yft-design rebuilds a poster editor on fabric.js, with TODOs left visible

An open source take on a commercial Chinese design tool

The repository describes itself as an open source version built on fabric.js of a commercial online design product, and the listed use cases are poster generation, e-commerce product images, long article graphics, and video or public account covers. The topic tags place it plainly in the Canva-alternative category.

The stack is Vue 3 with TypeScript, Element Plus for the interface, Pinia for state and Vite for the build, on fabric 6.4.1 as the canvas engine. TypeScript rather than the JavaScript the project started on is visible in the dependency list and the two tsconfig files.

Three hosted instances exist: a free demo at demo.yft.design, a full Pro version at yft.design, and a performance instance that opens the editor with a stress mode of 5000 elements, a fixed seed of 42, partial rendering and canvas performance flags. That stress URL is more informative than a benchmark table, because it lets you judge how the editor behaves with a heavy document on your own machine.

The package is marked private at version 0.1.0 with no published releases, so this is a codebase you run rather than a library you depend on.

Import fidelity is the differentiator, and it is uneven

The README states PDF import restores the format faithfully but does not support cropping images on import. PSD import is described as restoring the format fully with partial support for effects, specifically brightness, contrast and colour overlay. SVG import is documented as not supporting tspan fonts.

Those three caveats are the whole story about the editor's maturity. A layered PSD from a designer will come in with its adjustment layers approximated, and SVG text using tspan will lose its font handling. Both are common in real files rather than edge cases.

Export goes the other way to image, SVG and PDF, and to local file. The import and export side is backed by a substantial dependency set that shows how it is done: clipper-lib for path operations, opentype.js for font parsing, pako for compression, gifler for GIF handling, chroma-js and tinycolor2 for colour, raphael and perfect-freehand for drawing, jsbarcode and beautify-qrcode for code and QR insertion, and dexie for browser storage.

The topic list also names clipper, pdf-parser, psd-parse and text2path, which are the areas this editor differs most from a generic canvas demo.

The directory layout separates the canvas engine from the product

The project structure is documented in detail, and it reads like a deliberate separation between framework and fabric. Under app/ sit the canvas internals: fabricCanvas, fabricControls for selectors, fabricRuler, fabricTool for dragging, guideLines, hoverBorders for pre-selection and wheelScroll for zoom.

The extension/ directory holds custom fabric objects, with controls and mixins for image cropping and an object/ directory for custom element types. That is the extension point to use if you need an element fabric does not provide.

Above that sits ordinary application structure: components for things unrelated to business logic, configs for colours and fonts, hooks, plugins as custom Vue plugins, types, store for Pinia, utils, and views split into Canvas for editor objects and Editor for editor modules. The assets/fonts directory holds online font files, and worker/ holds a web worker, which is where the heavy parsing work belongs.

components.d.ts at the root suggests auto-imported components, which matches the .eslintrc-auto-import.json file next to it.

Running it takes three pnpm commands

The build requirements are minimal: Node 16 or newer. The whole local workflow is three commands.

pnpm install
pnpm dev
pnpm build

pnpm dev runs vite in development mode and pnpm build produces the production bundle. There is also a deploy script that shells out to deploy.sh, and a docker/ directory in the repository root for a container image.

The scripts in package.json confirm the shape: dev and build are vite and vite build, with deploy as the only extra. There is no test script and no lint script in the scripts block, although eslint, prettier and stylelint configuration files are present at the root, so quality tooling exists but is not wired into a command you can run from the package manifest.

Interface strings go through vue-i18n and routing through vue-router, and there is a mocks/ directory for mock data.

What works and what is still marked TODO

The feature list is unusually honest about its gaps, which is more useful than a complete-looking list. Baseline editing is there: undo and redo history, keyboard shortcuts, a context menu, and local export to SVG, image and PDF.

Pages can be added, deleted, reordered, given a background of solid colour, gradient or image, and a canvas size can be set, with rulers, canvas zoom and pan, page templates and alignment guides. Marked TODO are page copy and paste, grid lines, and the selection panel with element hiding, layer ordering and element naming.

Elements can be added, deleted, copied, moved, rotated, scaled, multi-selected by box or click, grouped, aligned to the canvas and to each other, with explicit coordinate, size and rotation entry. TODO here are batch editing of multiple elements and element locking.

The element-level detail is genuinely broad. Text covers colour, highlight, font, size, bold, italic, underline, strikethrough, alignment, bullets, indent, clear formatting, line height, letter spacing, paragraph spacing, fill, shadow and opacity. Images cover filters, tinting by mask, flip, border, shadow and crop. Shapes have fill, border, shadow, opacity, flip and editable text. Lines have colour, width and style.

The gap between multi-select existing and batch editing not existing is the one that will bite a production user.

Maintenance, licensing and where support actually comes from

The repository is not archived and the last push was on 2026-09-04, so work is recent. There are no GitHub releases, and the package version is 0.1.0, which means you follow main and there is no upgrade path between versions to plan for.

The license is MIT, which permits commercial deployment subject to its notice requirements. The topic of running this as a hosted service is separate from licensing and worth thinking about before offering it as a product.

Support is contact-based rather than community-based: a WeChat contact for technical help, an email address for commercial cooperation and support, and a Telegram group for technical discussion. There is no issue template, no discussion board and no contributing guide mentioned in the README. That means an issue you find is best raised directly, and it is the main practical difference from a community-maintained project of similar scope.

The README also links an introductory article and a video on Bilibili, which is where the design decisions behind the project are explained, in Chinese.

Editorial conclusion

Adopt yft-design if you need an open source poster editor you can host yourself and your files are mostly SVG or PDF, since that is where the parsing quality is. Do not expect a finished professional tool: page copy and paste, grid lines, the selection panel, batch element editing and element locking are all marked TODO in the README. Before building on it, run pnpm dev against a real PSD and PDF from your production files, because the README states image cropping is not supported on PDF import, and note that the package is private at version 0.1.0 with no GitHub releases.

Frequently asked questions

Official sources

1. dromara/yft-design on GitHub
2. Issues
3. License: MIT
4. Project website
5. README