1. Project Overview

Leafer Design

Leafer Design is a free and open-source poster designer. Developed using modern mainstream technologies such as Vue 3, Vite 4, and TypeScript, it is ready to use out of the box.

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

A beautiful and easy-to-use online design editor that supports PSD importing and parsing. It can be used as a poster designer, advertising designer, logo designer, or AI-powered image creation and composition tool. Common use cases include generating QR code posters, image posters, QR code promotional posters, image editing, business card design, e-commerce product images, and holiday posters.

Features / Roadmap

Tips: 🕙 Planned 🔲 Preparing 🚧 In Progress ✅ Completed

• ✅ PSD Import

• ✅ Plain Text

• ✅ Rich Text

• 🚧 Effects and Special Effects Processing

• ✅ Single-Layer Mask

• 🔲 Continuous Multi-Layer Masks

• ✅ Supports importing PSD files in RGB color mode

• 🕙 Supports importing PSD files in CMYK color mode and color mode conversion

• ✅ Group Management

• ✅ Layer Hierarchy Management

• ✅ Image Parsing

• ✅ Clipping Masks

• ✅ Text Parsing

• ✅ Font Loading

• 🕙 Smart Objects

• ✅ JSON Import

• ✅ Multi-Page Support

• ✅ Keyboard Shortcut Support (Partial Features)

• ✅ Template Import

• ✅ Layer Management

• ✅ Ruler Tool

• ✅ Pen Tool

• ✅ Default Brush Styles

• 🚧 Custom Brush Styles

• ✅ Element Editing

• ✅ Preview

• ✅ File Download (JSON / PNG / JPG / WEBP)

• ✅ Export Entire Canvas

• ✅ Export Selected Elements

• ✅ Canvas Zoom and Pan Modes

• ✅ Border Strokes (Solid Color, Linear Gradient, Radial Gradient, Image)

• ✅ Fill (Solid Color, Linear Gradient, Radial Gradient, Image)

• ✅ Blend Modes, Rotation, and Opacity

• ✅ Text Font, Weight, Size, Underline, Strikethrough, Italic, Line Height, Letter Spacing, Padding, and Wrapping Rules

• ✅ Text Overflow Control and Custom Overflow Display

• ✅ Group and ungroup multiple elements

• ✅ Modify canvas dimensions and apply multiple background fills

• ✅ Clip or display elements extending beyond group boundaries

• ✅ Rich text support

• 🔲 Drag and drop across groups (move in and out)

• 🔲 Masking functionality

• 🔲 Masks within groups

• 🔲 Erase elements within groups

• 🔲 Outer and inner shadows

• 🚧 Undo and redo functionality

• 🔲 Image cropping

• 🔲 Image filters

• 🕙 SDK packaging

• 🚧 PSD plugin integration

• 🕙 Automatic snapping for guides and elements

• ✅ QR Code Tool

• ✅ Barcode Tool

• 🕙 AI Background Removal

• 🕙 AI Image-to-Image Generation and Automatic Completion

• ✅ Guide Line npm Package

5. Tech Stack

Installation and Usage

• Get Project Code

Visit Yifei Open Source: https://code.exmay.com/ Download

• Install Dependencies

cd gzm-design

pnpm install

• Run

pnpm dev

• Packaging

pnpm build

Acknowledgments

Special thanks to the following projects and contributors:

• liumingye/fabric A high-performance editor based on fabric.

• poster-design An online poster image designer based on DOM.

• vue-fabric-editor An image editor based on fabric.js and Vue.

• free-font A curated collection of free fonts for commercial use