LeaferJS - Easy-to-use Canvas Engine

LeaferJS

✨ Easy-to-use 🌸 Canvas Engine 🌿

Effortlessly build interactive graphics and editing — an infinite canvas engine for the AI era

Nice ◠‿◠ Day

Update v2.0.9 - 70KB min+gzip Zero Dependencies - MIT Free & Open Source

Getting Started Scenarios

Efficient Drawing

Generate images, short videos, printed materials...

Flex auto layout, center-based drawing, backend batch generation, Gradients, inner & outer shadows, clipping, masking, erasing

UI Interaction

Mini games, interactive applications, industrial visualization...

Cross-platform interaction events, gestures, CSS states, cursor,Animation, states, transitions, motion paths, sprites, arrows, connections

Graphic Editing

AI infinite canvas, AI design tool, graphic editors...

Rich graphic editing features, highly customizable,Rulers, snapping, viewport control, scrollbars

Online Playground Environment

Core Advantages

1million

Interactive Rectangle

1.28seconds

Creation Time

320MB

Memory Usage

Graphic interaction and editing scenarios

Test environment: 2K display laptop / Chrome V143.0

Create Elements Create

Time and memory usage for creating 1M interactive rectangles (including initial render)

10K

100K

1M

Drag Elements Drag

Average FPS when dragging a single element among 1M interactive rectangles

10K

100K

1M

Pan View Move

Average FPS when panning 100K interactive rectangles on screen

10K

100K

1M

Zoom View Zoom

Average FPS when zooming 100K interactive rectangles

10K

100K

1M

Dynamic Elements Dynamic

Average FPS of 16K interactive rectangles moving randomly in the view

16K

100K

1M

Zoom Images Image

Average FPS within the first 6 seconds when zooming 1K images (1000×600px)

1K

100K

1M

Performance Benchmark Test

We use this as a baseline for continuous performance optimization

The above performance is based on default configuration and meets most project needs
More complex scenarios can be further optimized via the official ecosystem PxGrowSolutions for extreme scenarios are already provided

Million-element Smooth Scaling

PxGrow Quantum Engine

Nano Banana AI

Image Editing Tool

OmniSystem

Integrated Information Management System

Spin Master

What to eat for lunch?

Light & Shadow Calendar

DIY Beautiful Calendar

Icon Workshop

Your Personal Icon Customization Expert

Tuling Screenshot Tool

All-in-one Screenshot and Beautification Plugin

Frame Watermark Elf

Quickly Add Watermarks to Your Photos

fig2leafer

Render Figma Files with Leafer

Lazyva

Online Design Tool (Mobile Supported)

Simple Design

Free Online Design and Image Processing Tool

Fun Design

PS Posters, Avatars, Collages, Logos

Bead Design

WeChat Mini Program for DIY Bead Creations

Creative Emoji

DIY Fun WeChat Emojis

Boundless Cloud Image

Extensible B/S Image Editing Tool

Gzm Design

Open Source Poster Designer

leafer-ui

Modern UI Drawing and Interaction Framework

Asteroid Survivor Game

Photo Collage Tool

Puzzle Workshop (AI Random Image Generation)

Integrated Information Management System

Plugin-Based Canvas Architecture with Leafer + Vue3

Online Sports Data Video Generator

leafer-flow Whiteboard (Excalidraw-like)

Tetris Mini Game

luminous Online Canvas

Snake Mini Game

Interactive Courseware for Informatics Fundamentals

Music Rhythm Backlit Keyboard

Snowflake Effects Simulation

TO NORTH Online Annotation Tool

Dot Matrix Background Effect

Canvas with Leafer + Vue3

Minesweeper Mini Game

Minesweeper Game

FlyCut Online Video Editor

ShotEasy Screenshot Beautifier

Super Mario Game (Editable Map)

Leafer Games Center

Tuhigh Online Design Tool (Mobile Supported)

element-plus-leafer UI Components

What Makes It Different

Focused on graphic interaction and editing scenarios

Runtime Environment

Supports multiple platforms and product forms, reusable with the same API

Leafer

Fabric

Konva

Pixi

The most widely supported and compatible content platform

Web Worker Rendering

Free up the main thread, supports complex scenarios

Node.js Rendering

Server-side rendering or image generation

Mini Program (WeChat)

Adapted for WeChat Mini Program environment, note that there are some tricky platform limitations

Multiple Product Forms

One engine for drawing, games, and editors

Unified Core API

Consistent cross-platform API, making it easy to build plugins and products

Pluggable Rendering Backend

Core logic is decoupled from rendering, enabling future support for WebGL, WebGPU, Skia, and other platforms

Layout & Rendering

Browser-level layout capabilities for complex UI building

Leafer

Fabric

Konva

Pixi

Absolute & Relative Layout

Freely position elements

Auto Layout (Flex)

Flex-like layout, simpler and more intuitive for fast content arrangement

Draw elements around a center point, unaffected by width and height

Set a unified reference point for rotation, scaling, and translation

Partial Layout & Rendering

Only update changed areas to improve performance

Coordinate System

Supports multi-level coordinate systems (box/internal/local/world), with convenient transformations

Bounding Box System

Unified bounding box system for precise geometry, collision, and layout calculations

Bounds Change Events

Listen to bounding box size changes across coordinate systems

Layout Lifecycle Events

Customize layout logic at each stage

Layered Rendering

Render content in layers with different update frequencies for performance

Render Lifecycle Events

Customize rendering logic at each stage

Scene Tree & Elements

Fine-grained UI management support

Leafer

Fabric

Konva

Pixi

Scene Tree Management

Supports nested Group, Frame, Box, etc.

Multiple Element Types

Shapes, text, images, paths, polylines, curves, etc.

Frame & Box Containers

Container elements with appearance, similar to HTML div

Pen Free Drawing

Draw freely on canvas and convert to vector paths

Path-first Mode

All elements can be converted to SVG paths for easier editing

Vector arrow elements with customizable styles

Custom Elements

Extend custom element types

Appearance & Style

Rich styles and visual effects comparable to professional tools

Leafer

Fabric

Konva

Pixi

Fill elements with color, gradient, or pattern

Add stroke to elements

Element size remains constant during zoom

Fixed Stroke Width

Stroke width remains constant during zoom

Outer shadow style

Inner shadow style

Same as CSS boxShadow effect

Shadow remains constant during zoom

Multiple Fill/Stroke/Shadow

Support multiple layered styles

Path Corner Radius

Supports corner rounding between curves and lines

Filters & Effects

Supports CSS-style filters

Advanced Gradients

Supports linear, radial, conic gradients

Supports various fill modes like cover, fit, repeat

Pattern remains constant during zoom

Supports spacing between patterns

Pattern Interlace

Supports interlaced pattern arrangement

Group Opacity (No Overlap)

Children render as a single group opacity

Highlight Element

Highlight one element while dimming others

Supports masking and clipping like Photoshop

Erase parts of elements

Supports blending modes like normal, multiply, screen

Control blending for individual parts

Pixel Alignment

Ensure crisp rendering on non-retina displays

Interaction

Rich event system comparable to native browser experience

Leafer

Fabric

Konva

Pixi

Supports capture phase before bubbling

Supports bubbling to parent elements

Event Penetration

Access elements behind the target

Advanced Event Handling

Fine-grained control of interaction areas

Gesture Interaction

Supports pan, zoom, rotation gestures

Supports dragging and swipe actions

Cursor & Pointer

Browser-like cursor management

Viewport Zoom & Pan

Supports zooming and scrolling viewport

Control zoom level and focus

Infinite canvas scrollbars

Animation & State

Built-in high-performance animation and state system

Leafer

Fabric

Konva

Pixi

Basic Animation

Supports easing and transitions

CSS-style Transition

Property-based transition similar to CSS

Advanced Animation

Supports delay, loop, seek, events

Sprite Animation

Frame-by-frame animation

Text Typing / Count Animation

Typing effect and count animation

Dashed Animation

Animated dashed lines for flow visualization

Interaction States

Supports hover, press, focus, selected states

Define custom element states

Animate elements along paths

Editor Features

Built-in features for building graphic editors quickly

Leafer

Fabric

Konva

Pixi

Basic Transform Editing

Move, scale, rotate, skew elements

Resize Original Size

Resize width/height without scaling

Supports multi-element selection

Group / Ungroup

Group multiple elements

Edit Inside Group

Double-click to edit inside group

Element Locking

Prevent accidental edits

Z-index Management

Adjust element stacking order

Build custom editor tools

Built-in text editor

Custom Inner Editor

Extend internal editing

Canvas ruler for precise layout

Guides & Snapping

Align elements easily

Features are driven by user needs, and many more are not shown here

LeaferJS Covers most graphic and interaction scenarios as an engine
For ready-made features like image cropping and path editing, use the official ecosystem PxGrow Extensions are available, and custom plugin development can be requested

Professional Scenarios

Online Design Tool

Figma - Valuation: $19.5B
InVision - Valuation: $2B
Canva - Valuation: $40B

Online Whiteboard

Miro - Valuation: $17.5B
Mural - Valuation: $2B
Microsoft Whiteboard

Online Documents

Notion - Valuation: $10B
Google Docs
Microsoft Office 365

No-code Platforms

Webflow - Valuation: $4B
Framer - Series B $24M

Application Frameworks

Flutter - Mobile app framework
PixiJS - Game development framework
Leafer UI - UI graphics framework

Data Visualization

D3.js - Popular visualization library
Chart.js - Chart library
ECharts - Data visualization library

Scenario Coverage

Step1

Efficient Drawing

Design posters, illustrations, UI interfaces

SCADA systems, data visualization

Training AI for drawing...

Step2

Graphic & Image Editing

Poster and image editors

Architectural and vector-based design software

Powering professional design tools...

Step3

Web & Applications

Auto layout, interaction states, scrollbars

Component-based systems, HTML conversion

Supporting visual production workflows...

Step4

Games & Animation

Games, animations, path animations

WebGPU/WebGL acceleration, morph animations

Supporting visual design systems...

Graphic Editing

Easy to Learn & Use



import { Leafer, Rect } from 'leafer-ui'

// Create an interactive app with a responsive window
const leafer = new Leafer({ view: window })

// Create a draggable rectangle
const rect = new Rect({
  x: 100,
  y: 100,
  width: 200,
  height: 200,
  fill: '#32cd79',
  draggable: true
})

leafer.add(rect)

We Couldn’t Afford Canva, So We Built an Open-Source Online Designer with LeaferJS

[Open Source Story] Hello everyone, we are the development team of Gzm Design. In our daily work, we rely heavily on various online design tools to create posters, event graphics, and marketing materials. These tools are mature, but as usage deepens, some issues gradually emerge.

Author：Gzm Design 2026/04/09

Abandoning Heavy 3D: I Rebuilt Our School Library Seat System with LeaferJS

[Open Source Story] Hello everyone, I am Seeridia, a student developer. As a frequent “power user” of the library, I deal with the seat reservation system every day. But honestly, the original system experience was quite frustrating.

Author：Seeridia 2026/03/30

5 Years of Open Source: I Created 20 Million in Value but Ended Up 800K in Debt

After 5 years of striving in Beijing, trading strands of white hair for a miracle. See how a Chinese developer rises against the odds.

Author：Leafer 2026/03/26

From “Zero Graphics Background” to “Poster Editor Launch”: My Love-Hate Journey with LeaferJS

[Open Source Story] Hello everyone, I’m Ranbow! Last year, our team launched an online design tool called "Tu Jing Ling", mainly for poster editing, batch image processing, and AI image generation. Feel free to check it out.

Author：Ranbow 2026/03/20

Call for Submissions: Share Your Open Source Story with LeaferJS

We’ve seen many real and amazing stories—some use it for architectural drawing, some for animation editing software, some for AI infinite canvas, some for tunnel monitoring, some for design tools, and some have achieved million-node production data visualization...

Author：Leafer 2026/03/19

[Pixel Growth] Five Years of Persistence: From Open Source to Profitability

I wanted to build an open-source graphics engine capable of handling millions of elements smoothly, making design and graphic editing more fluid, and supporting professional creative tools at the level of Adobe and Figma, allowing frontend developers to unleash their creativity.

Author：Leafer 2025/10/31

LeaferJS Community Question Guide

Found a bug or have suggestions? Feel free to submit an issue on GitHub. Your contributions help make LeaferJS stronger! We also plan to train and integrate external AI assistants, expected to launch in the coming months, to automatically answer LeaferJS-related questions.

Author：Leafer 2025/02/07

LeaferJS Introduces a 4-Day Work Week to Explore More Efficient Open Source Collaboration

New year, new momentum! To focus on core breakthroughs, LeaferJS officially starts a 4-day work week (Monday, Tuesday, Thursday, Friday), aiming to boost creativity, optimize development rhythm, and attract more talented developers to join the community.

Author：Leafer 2025/02/06

"Blooming Heart": From Dream Inspiration to Tencent Cloud AI Hackathon Success

On January 11, 2025, I flew from Beijing to Shanghai to participate in an AI hackathon hosted by Tencent Cloud. The event was held at East China University of Science and Technology, where I joined as a judge and award presenter.

Author：Leafer 2025/01/23

LeaferJS Community Launch: Driving Global Popularity Like Vue

Hi everyone, I’m Wan Chao (Leafer), founder of the LeaferJS open-source engine. I’d like to share a story of dreams and persistence, and sincerely invite those interested to join us in writing the next chapter of this open-source journey.

Author：Leafer 2024/11/20

LeaferJS Appears at AI Competition, Million-Follower Creator “Xiao Hua” Wins with a Hilarious Entry

At the 2024 Programmer’s Day, the “Super Code Factory” competition was held grandly. As an innovative graphics rendering engine, LeaferJS provided strong technical support, helping participants realize creative programming and interactive design.

Author：Leafer 2024/11/06

LeaferJS Releases New Animation, State, Transition, and Game Features

Provides rich animation features, supporting delay, loop, and seek. You can create keyframe animations, swing animations, transition animations, path animations, and scroll animations. With the Robot element, you can quickly build game characters with walking and attack actions.

Author：Leafer 2024/09/19

LeaferJS × Cloud Studio: A Powerful Playground Environment

Is there an online Playground where you can directly run official examples and share code snippets and demos? While thinking about this, I received a message from Gan Mi, product lead of Tencent Cloud Studio.

Author：Leafer 2024/08/20

LeaferJS 1.0 Official Release: A Powerful and Easy-to-Use Canvas Rendering Engine

Hello everyone, I’m Wan Chao, founder of LeaferJS. After more than 3 years of development, our open-source engine has matured and is now officially released.

Author：Leafer 2024/07/09

♫ Blooming in Adversity: The Story of an Independent Developer

It has been exactly 3 years since I started my journey in Beijing. In these long and uncertain years, facing financial struggles and unknowns, I can hardly imagine how I persevered.

Author：Leafer 2024/04/08

LeaferJS Selected in OSChina 2023 Annual Highlights!

LeaferJS is a vibrant HTML5 Canvas 2D rendering engine with the ability to instantly create 1 million shapes. It can be combined with AI for drawing and interface generation.

Author：Leafer 2023/12/31

LeaferJS Engine Released: Unlock a Colorful Digital Creative World!

Welcome to the world of LeaferJS—an engine that sparks creativity and unlocks endless possibilities! Here, digital product development is no longer difficult, but an enjoyable journey of exploration.

Author：Leafer 2023/06/28

Step1

From WeChat Articles

Join the Ecosystem, Collaborate for Mutual Success

Benefiting 10,000,000+ developers worldwide

“ Make digital product development simpler ”

Vision & Culture

We are planning to build a self-sustaining, continuously growing world-class open-source community, Enable anyone to easily participate and gain growth and rewards

Grow continuously like a sprouting tree, full of hope and vitality

Thanks: Astro Vue Vite Vitest Vitepress TypeDoc pnpm Rollup.js Node.js skia-canvas @napi-rs/canvas monaco-editor danmu.js

Open Source Partners

🎉 Become a Partner

Please specify your purpose ~

技术交流1群

技术交流2群

技术交流3群

技术交流4群

技术交流5群

技术交流6群

技术交流7群

技术交流8群

LeaferJS

LeaferJS is an innovative and easy-to-use Canvas engine that makes interactive graphics and editing effortless. It is suitable for AI infinite canvas, AI design tools, graphic editing, mini games, interactive applications, industrial visualization, image and short video generation, and more. It gives you the super ability to instantly create 1 million graphics. Free and open source, easy to learn and use, with rich scenarios.

Software Copyright Registration Number：
[LeaferJS] 2021SR1143803
[LeaferUI] 2023SR0528918

像素生长（北京）科技中心

Partners

北京: 北京彩动元码科技有限公司

新加坡: Aedu AI Pte.Ltd.

Copyright © 2021-2026 Chao (Leafer) Wan 赣ICP备18002459号