1. Project Overview

WuJie Design is an open-source image design tool from Sichuan Aiquwu Technology, built with mainstream technologies including React Hooks, TypeScript, Vite, and LeaferJS. It is ready to use out of the box.

2. Open Source License

Licensed under MIT

Can it be used commercially?

The project uses the MIT license and is free for commercial use. Please keep the About Us information in the project, as it is the only way we promote ourselves.

3. Screenshots

Project Preview

Dark theme:

Light theme:

Using templates:

4. Feature Overview

Features / Roadmap

Tips: 🕙 Planned 🔲 Preparing 🚧 In progress ✅ Done

Editor

• 🚧 Asset management

• 🚧 Background color (solid, linear gradient, radial gradient)

• 🚧 Background image

• 🚧 Combined text assets

• ✅ Artistic text assets

• ✅ [System] image assets

• 🚧 [System] text assets

• 🚧 [System] sticker assets (SVG)

• 🚧 [System] background assets

• ✅ [User] asset upload

• ✅ [User] asset deletion

• ✅ [User] bulk asset management

• ✅ Right-click menu (undo, redo, export layer, delete, copy, cut, lock, bring forward, send backward, bring to front, send to back)

• ✅ Undo & redo

• ✅ Timed auto-save

• ✅ Light/dark theme switching

• 🔲 Multi-language support

• ✅ Keyboard shortcuts (see the shortcut documentation)

• 🚧 Element controller

• ✅ Box selection

• ✅ Zoom

• ✅ Drag

• ✅ Rotate

• 🚧 Snap alignment

• 🔲 Guides

• ✅ Rulers

• ✅ Template feature

• ✅ Drag elements onto the canvas

• 🔲 Drag an image to replace an element

• 🔲 Mosaic tool

• ✅ Multi-page support (add, delete, switch)

• 🚧 Layer list

• ✅ Drag to reorder

• 🚧 Drag within a group

• 🚧 Drag between groups

• 🚧 Group elements

• 🚧 Coordinate alignment (center, align top, align bottom, align left, align right, horizontal spacing, vertical spacing)

• ✅ Multi-element grouping

• ✅ Canvas size adjustment

• ✅ Canvas zoom & fit

• 🚧 Background fill

• ✅ Color fill

• 🚧 Image fill

• 🔲 3D text effects

• 🔲 3D models

• 🚧 Text elements

• ✅ Quick actions (flip horizontal, flip vertical, lock layer, hide & show layer, copy, delete)

• ✅ Text style settings (bold, italic, color (solid, linear gradient, radial gradient), alignment, font size, font family, line spacing, letter spacing, stroke)

• ✅ Position settings

• ✅ Rotation settings

• ✅ Shadow settings

• ✅ Opacity settings

• 🔲 Mask (eraser)

• 🕙 Text on path

• 🚧 Image elements

• 🔲 LUT filters

• 🚧 SVG color customization

• ✅ Image cropping

• 🔲 Mask (container)

• 🔲 Mask (eraser)

• ✅ Quick actions (flip horizontal, flip vertical, lock layer, hide & show layer, copy, delete)

• ✅ Border settings

• ✅ Corner radius settings

• ✅ Position settings

• ✅ Rotation settings

• ✅ Shadow settings

• ✅ Opacity settings

• 🕙 Element animation (entrance, emphasis, exit)

• 🔲 QR code element

• 🔲 Barcode element

• 🔲 Freehand brush element

• 🔲 Shape elements

• 🔲 Lines

• 🔲 Polygons

• 🔲 Stars

• 🔲 Rings & sectors

• 🔲 Chart elements

• 🔲 Word cloud element

• ✅ Download files

• ✅ Static image download (PNG, JPG, WEBP)

• 🔲 Animated image download (GIF, WEBM)

• 🔲 PDF download

• 🔲 Layered PNG download (ZIP)

• 🔲 Preview

• 🔲 SDK wrapper

• 🔲 Plugin development API

• ✅ AI cutout

• 🔲 AI portrait relighting

• 🔲 AI watermark removal

• 🔲 AI background removal

• 🕙 AI image enhancement

• 🕙 AI image outpainting

• 🕙 AI photo beautification

5. Tech Stack

image-editor is an online image editor similar to Canva, Chuangkit, and Tugaishou. It is easy to use yet powerful; main tech stack: TypeScript, LeaferJS, React, MobX.

Related Technologies

• Leaferjs

• TypeScript

• React

• Mobx

• Semi Design

Installation and Usage

// Install dependencies
yarn install

// Start the project
yarn dev

// Build the project
yarn build