vue-fabric-editor: a canvas editor that treats plugins as the product

What the project is and what it is not

This is a front-end image editor built on fabric.js and Vue, described as plugin-based, drag-and-drop, and configurable in its fonts, materials, design templates, context menus and keyboard shortcuts. The positioning statement is specific and worth repeating: it aims to be a lightweight, simple graphic editor rather than a heavy online Photoshop clone. That choice explains a lot about the feature list, since a poster and layout tool needs guides, rulers and alignment while a raster editor needs selections and masks.

The feature list is concrete. It imports JSON and PSD files and exports PNG, SVG and JSON. It has layers, grouping and ungrouping, gradient properties, appearance and font properties, strokes and shadows, undo and redo, keyboard shortcuts, a context menu, guides, rulers, custom fonts, custom template materials, SVG and image insertion, horizontal and vertical alignment across multiple elements, background properties, arrows and lines, brush and polygon drawing, QR codes and barcodes, image replacement, cropping and filters, watermarking, and internationalisation.

PSD import is the item most likely to surprise people, since layer parsing is normally the hardest part of adopting a Photoshop file. Having it already solved is a large part of the value here.

The repository also documents its own intent for contributors: to build an out of the box web image editor while accumulating a wrapper layer that sits between a web editor application and fabric.js, aimed at developers who want simpler interfaces. The contribution guide asks only for basic Git and JavaScript, and the README links technical notes published on the Juejin community where the architecture reasoning is written out in detail.

The setup constraint is real and stated bluntly

Installation takes four commands, and the important part is the warning attached to them.

// 安装pnpm
npm install -g [email protected]

// 中国使用淘宝代理
// npm install -g [email protected] --registry=https://registry.npmmirror.com
pnpm i
pnpm dev

The README asks for Node.js v18 to v20 and pnpm 8.4.0, then states in bold that pnpm 8.x must be used and that a higher version causes dependency inconsistency and runtime page errors. That is an unusual requirement to state so plainly, and it comes from the lockfile and workspace layout rather than from the editor code. `pnpm-workspace.yaml` sits at the root next to a `workspaces` entry in `package.json` pointing at `packages/*`, and the root `package.json` has a `preinstall` hook running `npx only-allow pnpm`, so the project enforces its own package manager.

fabric.js itself is pinned at exactly `5.3.0` in the dependency list, with `@types/fabric` at the same version. Pinning the canvas library exactly is sensible for an editor, because a minor version can change object serialisation and therefore change what a saved JSON file means when reopened.

The rest of the stack is a normal Vue 3 application: Vue 3.2 or later, vue-router, vue-i18n at 9.0.0, view-ui-plus as the component library, VueUse, axios, dayjs, lodash-es, qs, uuid, number-precision, fontfaceobserver for custom font loading, vue-cropper, vue-masonry, vue3-lazyload, vite-svg-loader, color-gradient-picker-vue3 and a local `@kuaitu/core` workspace package.

packages/core is the part other projects would want

The most consequential structural decision is that `@kuaitu/core` is a workspace dependency declared as `workspace:^`, meaning the editor application depends on a local package rather than a published one. The root scripts make the split explicit: `build:sdk` runs a build inside `packages/core`, and `test` runs the tests in the same place.

So the repository is two things. One is an editor application in `src/`, and the other is a reusable wrapper layer under `packages/` with its own build and test lifecycle. That matches the stated goal of producing a layer between a web editor application and fabric.js, and it means an integrator can depend on the core package without inheriting the whole demo application.

Vite handles the application side, and the scripts show three modes: `dev` is `vite serve`, while `dev:staging` and `dev:prod` pass `--mode=staging` and `--mode=production`. There are matching build scripts, and the corresponding `.env`, `.env.development`, `.env.staging` and `.env.production` files sit at the root. `preview` chains a build with a preview server. The presence of separate staging and production modes suggests the commercial version deploys from the same codebase with different environment configuration.

For tooling, the repository carries ESLint with an auto-import generated config, Prettier with its own ignore file, Husky for git hooks, and a `commitlint.config.js`, which together mean commit message format is checked before it reaches the default branch.

Plugins carry the context menu and the shortcuts

The plugin architecture is listed first among the project's characteristics, and it is described in terms of what plugins extend: the context menu and the keyboard shortcuts. That framing is more specific than most plugin systems, which talk vaguely about extending behaviour. Here a plugin has a concrete surface, a place to register a right-click entry and a shortcut binding.

Right-click menus and keyboard shortcuts are also the two features a typical in-house design tool needs and cannot easily retrofit, because they need a command registry to hang off. If the plugin contract is the command registry, then adding a feature means adding a command rather than patching the editor, which is the whole argument for a plugin architecture in this kind of tool.

The editor is also configurable where commercial design tools usually are not: custom fonts, custom template materials, and customisable UI elements such as the context menu. `fontfaceobserver` in the dependency list is the mechanism for the custom font side, since a web editor cannot draw a font the browser has not loaded and needs to observe when a font becomes available before rendering text with it.

The README carries a series of technical notes published on the Juejin community covering fabric.js editor development, implementation details, the plugin architecture specifically, and the author's open source and commercialisation experience. Those notes are where the architecture rationale lives, since the README itself stays at the level of features and commands.

Where the open source version stops

The README is explicit about the boundary between the repository and the paid product. The open source version is front-end code only. The paid version provides the complete front end and back end plus an admin panel, is described as feature complete and ready to deploy, and comes with source licensing and secondary development support.

The feature comparison is worth reading carefully because it clarifies what you would have to build. The paid side adds batch image generation through an HTTP interface and spreadsheet input, a deployment-ready back end and admin console, PC and H5 platform coverage, and technical onboarding with documentation and training. The open source side gives you the editor itself, which is the hard part and the part most teams want.

There is also a separate commercial product aimed at a different use case: a goods and apparel DIY designer, described as a badge and acrylic designer for a self-publishing mini program mall, plus e-commerce platform DIY, with a separate documentation site for it. The README lists custom development cases including fabric printing, silk scarf try-on, process simulation, parametric box design and other DIY designers, each shown only as a screenshot.

So the project has three audiences: developers who want the editor source, businesses who want a deployable design platform, and merchants who want a product customiser. Only the first is served by the repository itself.

Deployment, releases and the state of the repository

The Docker setup is a two stage build that matches the toolchain constraints exactly. The first stage is `node:18-alpine3.18`, which copies the project, installs pnpm and configures the registry to the npmmirror mirror, runs `pnpm install` and then `pnpm build`. The second stage is `nginx:1.25.3`, copying the built `dist` directory into the nginx html root along with `nginx.conf` as a config in `/etc/nginx/conf.d/`. `docker-compose.yml` builds from the local directory and maps port 8888 on the host to port 80 in the container.

The two published releases are not releases in the usual sense, and reading them as such would mislead. The `no-plugin` tag is described as the archived pre-plugin version, stored for reference. The `vue` tag is described as the Vue 2 version of the editor, archived and explicitly not to be maintained further. Both date from 2023. Nothing in the releases list represents a current version, so version tracking for this project happens in the repository rather than in tags.

The repository itself is MIT licensed, not archived, with the last push in July 2026, around 8000 stars and roughly 1400 forks. That fork ratio is unusually high for a UI project, which is consistent with people cloning it to build their own design tool rather than merely reading it. There are 65 open issues. Documentation lives at a separate documentation site and the demo is hosted on GitHub Pages, and there is a companion blog publishing fabric.js tutorials in Chinese.

Two contributors are credited in the acknowledgements: one for the ruler feature, and palxiao for the gradient component, whose colour picker was taken from another poster design project.

Editorial conclusion

vue-fabric-editor is one of the more useful things to study if you are building a design tool, because it separates two things that usually get confused: the editor application and the wrapper layer above fabric.js. The repository is candid about wanting both, and the commercial version's boundary, frontend only versus frontend plus backend plus admin plus HTTP batch generation, makes that split concrete. The functional list is longer than most open source editors of this kind, with PSD import, guides, rulers, gradients, custom fonts and templates all present. Before you clone it, accept the toolchain constraints: pnpm exactly 8.4.0, Node 18 to 20, and fabric pinned at 5.3.0. The two archival release tags are history rather than downloads, and the last push was in July 2026.

Frequently asked questions

Official sources

1. ikuaitu/vue-fabric-editor on GitHub
2. License: MIT
3. Project website
4. README
5. Releases