1. Project Overview

Kuaitu Design - vue-fabric-editor

A plugin-based image editor developed with fabric.js and Vue. It supports customizable fonts, assets, design templates, context menus, and keyboard shortcuts.

Its Chinese name is Kuaitu Design, and its English name is vue-fabric-editor. Developed with fabric.js and Vue, it features a simple and user-friendly interface, comprehensive functionality, and a plugin-based architecture, making it ideal for secondary development.

2. Open Source License

Licensed under MIT

3. Screenshots

Project Preview

Custom fonts

Gradients, custom fonts, font sizes, line heights, spacing, and background colors can all be adjusted, along with common properties such as strokes and shadows.

Shape Drawing

It supports more than just text. Standard shapes, SVGs, QR codes, barcodes, and irregular polygons are also supported.

Context Menus and Keyboard Shortcuts

Keyboard shortcuts and context menus can be defined through a plugin-based approach.

Image filters

Image cropping

Drag to Adjust the Canvas

PSD Import

Watermark Settings

Categorized Assets

Create Design and Artwork Categories

The feature set is comprehensive, including design templates, login and registration, new design creation, and user artwork and asset management.

4. Feature Overview

Help developers quickly build image editor applications

An open-source image editor that is more like an open-source online design tool. It can be used for poster design, illustrated notes, product design, cover design, label design, logo design, and other scenarios. It supports custom fonts, assets, design templates, context menus, and keyboard shortcuts, and also provides a plugin-based architecture for extending functionality and secondary development.

An open-source Web image editor built with Fabric + Vue3. It is easy to customize and extend, helping developers quickly build a graphic editor designed for non-professional designers.

Features

1. Plugin-Based Architecture: Supports customizable assets, context menus, keyboard shortcuts, and other features, making it easy to extend.

2. Simple and Easy to Use: A lightweight, streamlined graphic editor rather than a large, feature-heavy online Photoshop-style design tool.

3. Comprehensive Features: Includes custom templates, gradients, custom fonts, and other features to meet lightweight image editing needs.

Available Features

Feature introduction article with text and animated GIFs.

• Import JSON and PSD 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

5. Tech Stack

Usage

Start the Project

First, install Node.js v16 and pnpm, then run the following commands:

pnpm i
pnpm dev