yft-design is an MIT-licensed online design editor written in TypeScript with Vue 3, fabric.js, and Element Plus, aimed at anyone who needs poster design and image editing without depending on a commercial design platform.

What it is

yft-design is a browser-based canvas design tool. It lives in the Vue 3 ecosystem: fabric.js handles canvas objects and controls, Element Plus supplies UI components, and Pinia manages state. The repository is organized around custom fabric extensions — fabricCanvas, fabricControls, fabricRuler, fabricTool, guideLines, hoverBorders, and wheelScroll — alongside a web worker directory for heavy rendering work and an extension directory of custom fabric objects, crop controls, and mixins.

The concrete problem it addresses is asset reuse and self-hosting. It is positioned by its authors as the open-source version of 稿定设计 (Gaoding Design), and the specific thing it replaces is a closed, vendor-hosted design service where artwork is trapped in a proprietary format. yft-design imports PDF, PSD, and SVG files and rebuilds them as editable canvas objects, then exports SVG, raster images, or PDF. Teams therefore continue from existing artwork instead of recreating it, and organizations can run the editor on their own infrastructure. Scenarios named in the README are poster generation, e-commerce product images, long-form article images, and video or WeChat official account covers.

Key capabilities

• Import PDF with format restoration; image cropping during import is not supported.
• Import PSD with partial effect restoration covering brightness, contrast, and color overlay.
• Import SVG, without support for tspan fonts.
• Export to SVG, raster image, and PDF.
• Full text editing: font, size, bold, italic, underline, strikethrough, alignment, bullets, indent, clear format, line height, letter spacing, paragraph spacing, fill, shadow, and opacity.
• Image editing: filters, tint applied as a mask, flip, border, shadow, and crop.
• Editor mechanics: undo and redo history, keyboard shortcuts, right-click menu, page templates, snap alignment on move and scale, layer ordering, canvas zoom and move, marquee and click multi-select, grouping, and element coordinate and rotation control.

Who uses it and how

• E-commerce sellers producing product images, starting from imported PSD or PDF source files and exporting raster or PDF output.
• Content and marketing teams building long-form article images and WeChat official account or video covers from page templates.
• Developers embedding a canvas editor in their own product, extending it through the extension directory of custom fabric objects, mixins, and crop controls.
• Teams working on large documents: a stress demo renders 5,000 objects on one canvas, and long-running render work is offloaded to a web worker.
• Self-hosters who prefer to run and control the editor themselves rather than use the hosted versions.

Getting started

The README gives three commands on Node 16 or later: pnpm install for dependencies, pnpm dev for debugging, and pnpm build for production. Hosted options are also listed — a free demo at https://demo.yft.design and a professional version at https://yft.design.

How it compares

The facts provide no list of paid products this project replaces, so comparison stays with the tools it names. It presents itself as the open-source counterpart to 稿定设计 (Gaoding Design), a commercial online design platform, and its topic list includes "canva-alternative", placing it in the same conversation as Canva. The distinction from those services is the MIT licence and the option to run the editor on your own infrastructure rather than working through a vendor-hosted product.

When to use it — and when not to

A self-hoster must supply Node 16 or later and run the pnpm build; the README names no database, object storage, or SMTP requirement, but it also gives no deployment, configuration, or environment documentation, so operation beyond a static build is undocumented. Several features are marked TODO, including page copy and paste, grid lines, the selection panel for hiding, renaming and reordering elements, batch element editing, and element locking, and PDF import does not support image cropping while SVG import does not support tspan fonts, so teams depending on those should look elsewhere. Documentation is thin and consists mainly of a feature list, a project structure tree, and contact points through WeChat, email, and a Telegram group, with no formal support process described; the repository carries 18 open issues against 1,644 stars and 333 forks.

  </td>

  </td>

  </td>

  </td>

node >= 16+
pnpm install  // 安装依赖
pnpm dev      // debug
pnpm build    // prod

├── app                           // 静态资源
│   ├── fabricCanvas              // FabricCanvas
│   ├── fabricControls            // 选择器
│   ├── fabricRuler               // 标尺
│   ├── fabricTool                // 拖动
│   ├── guideLines                // 辅助线
│   ├── hoverBorders              // 预选择
│   └── wheelScroll               // 缩放
├── assets                        // 静态资源
│   ├── fonts                     // 在线字体文件
│   └── styles                    // 样式
├── components                    // 与业务逻辑无关的通用组件
├── configs                       // 配置文件，如：颜色，字体。
├── hooks                         // 供多个组件（模块）使用的 hooks 方法
├── extension                     // 自定义fabirc对象
│   ├── controls                  // 裁剪图片controls
│   ├── mixins                    // 裁剪图片mixins
│   └── object                    // 自定义元素对象
├── mocks                         // mocks 数据
├── plugins                       // 自定义的 Vue 插件
├── types                         // 类型定义文件
├── store                         // Pinia store，参考：https://pinia.vuejs.org/
├── utils                         // 通用的工具方法
├── views                         // 业务组件目录。
│    ├── Canvas                   // 编辑器对象
│    └── Editor                   // 编辑器模块
└── worker                        // web worker