中文   EN
✨ Easy-to-use Canvas Engine 🌿
Build interactive and editable graphics applications with ease.
Quick Start
Nice ◠‿◠ Day
Update v2.3.3 - 70KB min+gzip Zero Dependencies - MIT Free & Open Source
Skills & AI Knowledge Base
MCP
Ask AI
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
Live Demo
Online Playground Environment
GitHub GitHub
Core Advantages
A Canvas engine that can handle 1 million graphics in the browser
A Canvas core capable of building Figma-level editors
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
GitHub
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 Editing
PxGrow Quantum Engine
What Makes It Different
Focused on graphic interaction and editing scenarios
Layout & Rendering
Browser-level layout capabilities for complex UI building
Leafer
Fabric
Konva
Pixi
Absolute & Relative Layout
Freely position elements
Directional & Edge Layout
Position elements relative to their parent using directional alignment or edge offsets
Auto Layout (Flex)
Flex-like layout, simpler and more intuitive for fast content arrangement
Anchor Layout
Draw elements around a center point, unaffected by width and height
Origin Layout
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
Appearance & Style
Rich styles and visual effects comparable to professional tools
Leafer
Fabric
Konva
Pixi
Fill
Fill elements with color, gradient, or pattern
Stroke
Add stroke to elements
Fixed Size
Element size remains constant during zoom
Fixed Stroke Width
Stroke width remains constant during zoom
Outer Shadow
Outer shadow style
Inner Shadow
Inner shadow style
Box Shadow
Same as CSS boxShadow effect
Fixed Shadow
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
Pattern Fill
Supports various fill modes like cover, fit, repeat
Fixed Pattern
Pattern remains constant during zoom
Pattern Gap
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
Mask & Clip
Supports masking and clipping like Photoshop
Eraser
Erase parts of elements
Blend Mode
Supports blending modes like normal, multiply, screen
Sub Blend Mode
Control blending for individual parts
Pixel Alignment
Ensure crisp rendering on non-retina displays
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...
We are currently focused on drawing and editor scenarios
Open Source Forest
In Progress, Waiting to Be Claimed Product Cases、Use Cases
Product Cases
Explore real-world applications
Featured Examples
Share practical code
Community Plugins
Extend your capabilities
AI Tools
Connect AI with Leafer
Collaborative Development
Crowdfund or build together
Technical Articles
Share knowledge and experience
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)
Graphic Editing
Our Blog
LeaferJS 聚焦开拓 AI 视频行业，让 AI 视频创作拥有流畅的无限画布
让每个人都能更快创造出自己的 AI 视频创作软件
Leafer    2026/11/03
LeaferJS AI 时代路线图：让每个人都能用 AI 创造自己的专业可视化软件
成为 AI 创造可视化世界的基础设施
Leafer    2026/11/02
LeaferJS Open Source Forest — You’re Welcome to Join!
We hope to see more and more genuinely interesting things emerge here — technology, tools, products, creations, ideas, and things that no one has thought of yet.
Leafer    2026/09/20
The Story After 800,000 RMB in Debt · Episode 1
We want to solve the hardest, most time-consuming infrastructure problems so that other teams don't have to spend years solving the same challenges again.
Leafer    2026/07/02
🚦 The First Intersection Principle
The kind of organization we aspire to build: freedom on the road, order at every intersection.
Leafer    2026/06/22
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.
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.
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.
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.
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...
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Leafer    2023/06/28
User Reviews
Step1
From WeChat Articles
Join Promotion
独立开发前线 - 1000+阅读
前端之神 - 2K+阅读
茄子懂编程🙈 - 2000+点赞
像树生长的Leafer - 5000+点赞
前端Hardy - 6k+阅读
像树生长 - 9K+阅读
像树生长的Leafer - 8.3w+播放
布依前端 - 约2k阅读
二进制驿站 - UI 框架
AI前端探索 - 约4k阅读
前端开发爱好者 - 约18k阅读
格子开源栈 - 1w+阅读
茄子懂编程 - 近百万播放
积极的阿灰 - 1000+点赞
陈随易 - 创业访谈
LeaferJS - 创业故事
茄子懂编程 - 2.1w+播放
程序员Rain - 1w 播放
web前端智汇堂 - 1.2w+阅读
null - 21k+阅读
子洋 - 7k+阅读
Leafer - 1.2w+阅读
Let you represent LeaferJS, highly welcomed by users
Commercial Support
LeaferJS
Permanently open source, with the core engine and foundational plugins always remaining open and accessible. It meets the needs of most projects, giving developers a secure, controllable, and sustainable technology choice without concerns about core capabilities being restricted by commercial limitations.
PxGrow
Provides optional commercial plugins focused on solving complex challenges in industrial applications, including professional editor suites, advanced graphics algorithms, and extreme performance optimizations. It helps enterprises saving months or even years of development effort.
Sustainable Cycle
Developers benefit from open source, enterprises improve efficiency through commercial capabilities, and commercial support continuously drives the growth and innovation of LeaferJS, creating an open, transparent, and sustainable development cycle.
Why Enterprises Choose LeaferJS × PxGrow
Online PPT (Ideal for Team Presentations) · LeaferJS Technical Support
Our Mission
“ Make digital product development simpler ”
Vision & Culture
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
Contact Us

Please specify your purpose ~

技术交流1群

技术交流2群

技术交流3群

技术交流4群

技术交流5群

技术交流6群

技术交流7群

技术交流8群
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.
像素生长（北京）科技中心

商标注册号：
[LeaferJS] 66471244

Software Copyright Registration Number：
[LeaferJS] 2021SR1143803
[LeaferUI] 2023SR0528918
Partners
北   京:   北京彩动元码科技有限公司
新加坡:   Aedu AI Pte.Ltd.
Copyright © 2021-2026 Chao (Leafer) Wan    赣ICP备18002459号