1. Project Overview

vue-fabric-editor

Help developers quickly build image editor applications

It is an open-source web image editor built with Fabric.js and Vue 3，Easy to customize and extend,Helps developers quickly build a graphics editor for non-designers。

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

Features

• Complete feature set: solid core functionality and finer details for poster and image editing scenarios.
• Easy to use: a clean, intuitive interface for non-designers.
• Easy to extend: the business layer is built with Vue for a gentle learning curve, with Fabric.js underneath.

Use Cases

Suitable for poster design, cover design, T-shirt design, certificate/badge design, electronic price tag design, seal design, phone wallpapers, and PPT design, as well as more complex industrial software scenarios such as data center topology diagrams and equipment inspection drawings.

How It Differs from Other Products

There are already powerful professional open-source editors such as SVGEdit, which are like an online version of Photoshop for professional designers;vue-fabric-editor is positioned for non-designers, for example, letting operations staff without design skills make simple edits to a template and produce a header image for a WeChat article.

Supported Features

• Import and export JSON source files; export common image formats PNG and SVG.
• Custom design templates, font style templates, and custom material categories.
• Drag and drop, grouping, layer management, and multiple alignment operations for elements.
• Insert, replace, filter, and crop image assets.
• Shape assets, line drawing, gradients, borders, opacity, and shadow settings.
• Custom canvas size, zoom, guides, and rulers.
• Keyboard shortcuts and right-click context menu actions.

Available Features

Feature introduction article with text and animated GIFs.

• Import JSON files
• Save as PNG, SVG, or JSON
• Insert SVG and image files
• Horizontal and vertical alignment for multiple elements
• Font templates
• Group / ungroup
• Layers and z-order adjustment
• Undo / redo
• Background property settings
• Appearance / font properties / stroke / shadow
• Custom fonts
• Custom template assets
• Keyboard shortcuts
• Right-click context menu
• Guides
• Rulers
• Image replacement
• Image filters
• Internationalization

Source: Vue-Fabric-Editor official documentation

5. Tech Stack

The project uses Fabric.js as its foundation, built with the Vue 3 framework and the polished View UI Plus component library. Fabric.js is a well-known Canvas library that has been around for 12 years and is widely used and recognized in the industry; Vue offers a friendlier learning curve and is especially popular in China. Building on these excellent open-source projects, we aim tocreate an open-source image editor with a powerful foundation, an easy learning curve, convenient extensibility, and out-of-the-box usability。

Usage

Start the Project

Install Node.js v16 first, then run the following commands:

yarn install
yarn serve

A deployment guide is available for developers who do not work on web frontends, to help you get deployed quickly.

Custom Assets

Custom fonts, design templates, title templates, and more; all custom assets are stored in the vue-fabric-editor-static project.