English | [简体中文](./README-CN.md)
# LeaferJS: An Easy-to-Use Canvas Engine
Effortlessly build graphic interaction and editing — an infinite canvas engine for the AI era
Official Website: [leaferjs.com](https://www.leaferjs.com)
**👉 A Canvas engine that can handle 1 million graphics in the browser**
**👉 The first Canvas core capable of building a “Figma-level editor”**
Extreme Performance · Ultra-Low Memory · DOM-like API · Graphic Editing · Cross-Platform · Zero Dependencies · Lightweight (70KB min+gzip)
[](https://www.npmjs.com/package/leafer-ui)
[](https://github.com/leaferjs/leafer-ui/stargazers)
[](https://github.com/leaferjs/leafer-ui/releases)
[](https://github.com/leaferjs/leafer-ui/blob/main/LICENSE)
## 🧐 Why Choose LeaferJS?
In Web graphics development, developers often face a trade-off between **performance and usability**.
**LeaferJS aims to eliminate this compromise.** Rebuilt from the ground up, it not only pushes the limits of Web rendering and interaction performance, but also pursues ultimate simplicity in developer experience. It is a standardized engine designed for productivity tools handling **large-scale, high-density, and massive-layer graphics**.
## 🏗️ Why an Infinite Canvas Engine for the AI Era?
With the explosion of AI-generated content, the challenge for graphics engines has shifted from **“how to render”** to **“how to organize and refine”**:
- **⚡ Extreme Capacity:** Handles millions of interactive layers smoothly, perfectly accommodating massive AI-generated fragments.
- **🤖 Semantic Editing:** A structured scene tree allows AI to manipulate graphics like the DOM, enabling true AI collaborative workflows.
- **🛠️ Native Editor:** Built-in Editor plugin enables one-click access to industrial-grade editing features such as rotation, scaling, and multi-selection for AI-generated content.
[Leafer AI Knowledge Base](https://github.com/leaferjs/ai-docs) | [MCP & Skills](https://context7.com/leaferjs/ai-docs?tab=skills) | [Ask AI](https://context7.com/leaferjs/ai-docs?tab=chat)
## 🎨 Use Cases
With its extreme performance and standardized capabilities, LeaferJS is an ideal foundation for:
- 🤖 **AI Applications:** Infinite AI canvas, AI design tools, generative UI interactions.
- 🛠️ **Productivity Tools:** Graphic editors, online design platforms (Figma/Canva-like), whiteboards, low-code engines.
- 📊 **Industrial Visualization:** Large-scale node systems, flowcharts, asset monitoring, massive topology diagrams.
- 🎬 **Digital Content Generation:** Batch image/poster generation, short video frame rendering (Node.js), interactive H5.
- 🎮 **Interactive Applications:** Lightweight games, brand interactive apps, high-frequency data dashboards.
## 🔥 Performance
LeaferJS pushes the ceiling of Web graphics processing by approximately **10x**.
| Test (1M Interactive Rectangles) | Traditional Canvas Libraries | **LeaferJS** | Improvement |
| :------------------------------- | :--------------------------- | :----------- | :---------------- |
| **Initial Render Time** | ~9–15 seconds | **1.28s** | **~8x faster 🎉** |
| **Memory Usage** | ~2-4GB (may crash browser) | **320MB** | **~8x lower** |
| **Drag FPS (single element)** | 0–4 FPS | **60 FPS** | **~15x faster** |
Test environment: 2K laptop screen / Chrome V143.0. Results are for reference only; actual performance depends on hardware.
[Performance Details](https://www.leaferjs.com/#performance) | [Benchmark](https://benchmark.leaferjs.com/leafer/)
## ⚡️ Core Capabilities
- **🎨 Powerful Graphics System:** Complete scene tree supporting vector graphics, SVG paths, and pixel operations.
- **🧠 Ultra-Fast Interaction:** Native support for drag, zoom, multi-touch, and millisecond-level hit testing.
- **🛠️ Built-in Editor Support:** Integrated **Editor plugin** enabling **scale, rotate, move, multi-select** with one click.
- **🧩 Modern Layout Engine:** Rare native **Flexbox layout** support in a Canvas engine — as natural as writing HTML.
- **🎬 State-Driven Animation:** Built-in high-performance transitions and path animations for smooth dynamic interactions.
- **🌍 Cross-Platform:** One codebase runs seamlessly on Web, Node.js, WeChat Mini Programs, and mobile H5.
[Full Feature List](https://www.leaferjs.com/#different) | [Live Examples](https://www.leaferjs.com/examples/)
## 🛠️ Quick Start
```sh
npm install leafer-ui
# When using plugins, it is recommended to install core packages together
# to avoid version mismatch issues
npm install leafer-ui @leafer-ui/core @leafer-ui/draw
```
```ts
import { Leafer, Rect } from 'leafer-ui'
// Create an interactive app that adapts to the 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)
```
[Run Online Example](https://www.leaferjs.com/examples/#official%2Fstart%2Fcreate.ts) | [Editor Example](https://www.leaferjs.com/examples/#official%2Fplugin%2Feditor%2Fframe%2Ftransparent.ts)
## 💼 Commercial Support & Sustainability
There is a significant gap between “an engine” and “a mature product.” To ensure long-term maintenance of the open-source engine and help enterprises overcome complex development challenges, we’ve built a transparent and sustainable ecosystem:
- **LeaferJS Forever Open Source (MIT):** Core features and foundational plugins remain open and free, ensuring developer freedom and control.
- **[PxGrow](https://www.pxgrow.com/) Commercial Plugins (Optional):** Focused on solving **complex industrial scenarios**, including advanced editor suites, extreme performance optimizations, and complex graphic algorithms — saving months or even years of development time.
- **Sustainable Growth:** All commercial revenue is reinvested into the open-source engine to ensure LeaferJS stays at the forefront of Web graphics technology.
### LeaferJS Repository Overview
| Repository | Description | Link |
| :------------ | :------------------------------- | :---------------------------------------------- |
| **LeaferJS** | Main integration repo (runnable) | [GitHub](https://github.com/leaferjs/LeaferJS) |
| **leafer** | Core engine | [GitHub](https://github.com/leaferjs/leafer) |
| **leafer-ui** | UI layer | [GitHub](https://github.com/leaferjs/leafer-ui) |
| **leafer-in** | Official plugins | [GitHub](https://github.com/leaferjs/leafer-in) |
| **leafer-x** | Community plugins showcase | [GitHub](https://github.com/leaferjs/leafer-x) |
| **test** | Automated testing | [GitHub](https://github.com/leaferjs/test) |
| **code** | Example code | [GitHub](https://github.com/leaferjs/code) |
| **docs** | Documentation | [GitHub](https://github.com/leaferjs/docs) |
## 🌟 Contribute: Five Years of Craftsmanship, Built from Passion
LeaferJS is an original open-source engine refined over five years. Our mission is to standardize the **graphics system foundation**, so developers can focus on creativity rather than low-level implementation.
**If you value originality and extreme performance, please give us a Star!**
- 🌟 **Star the repo:** Your support means everything.
- 🐞 **Report issues:** Every issue helps us improve.
- 🤝 **Join the community:** Explore the limits of Web graphics together.
## Contribution Guide
When you use LeaferJS, you become part of this vibrant community — stepping into a growing “tech castle.” Only through collective participation can it truly flourish.
[Code of Conduct](./contributor/CODE_OF_CONDUCT.md)
[Commit Convention](./contributor/COMMIT_CONVENTION.md)
[How to Ask Questions the Smart Way](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md#%E6%8F%90%E9%97%AE%E7%9A%84%E6%99%BA%E6%85%A7)
## Acknowledgements
[All code contributors](https://github.com/leaferjs/leafer-ui/graphs/contributors)
[All community contributors](https://www.leaferjs.com/ui/contribute/)
## Sponsors
Gold Sponsors
Silver Sponsors
Bronze Sponsors
用户zw8T394C 用户zw8T398C 龙眼吃多了上火 用户zw8T392T 用户z89CSw69 用户CzP9SCAz Kim 用户249AzA8v l0f5c7bf 夏先生 yinuo 用户3wTwAz78 用户zw8T39zT 用户249AzA82 用户CzP9SCvz 用户39A334xT 用户3wTwAz3x 用户zw8T39zC 稀饭、微凉 用户CzP9SCT4 便宜VPS服务器 菲鸽 szhua Cheng Suezp beyond 用户3PvP2S63 o Arvin finallycc 用户39A3346C 大雷 用户CzP9SC4z 随风 用户z89CSwT9 用户3wTwAzCx UPMuling 军杨 桔子雨工作室 用户zw8T37xC 前端炒饭仔 用户z89CSw46 崮生 互动矩阵 ZhanYoHo 何佳Q coderhyh 早上好啊 快图设计 do 毛哥哥 迅排设计 用���z89CSw86 糖果 南城以北 黑色摩天仑 Charm Lauginwing 在路上 Jerry 张余🌈 李狗嗨。💢 用户zw8T376T 用户249AzA2v ʚ LMT ɞ 格子 等等 goosen F4nniu 梁福斌 江万江 杨超 ToB Dev 前端之虎陈随易 A☀️云☀️A zhk 爱发电用户_c9c82 轻简历 爱发电用户_0fac0 wangyesheji.cn 风间 爱发电用户_Tqsm 爱发电用户_6KpE 星小志 zwm 爱发电用户_3725c Noth1ng 纳西妲の√ 爱发电用户_Ahb9 爱发电用户_7617d 冷漠 爱发电用户_9RXB 今日值得读 爱发电用户_49sT 爱发电用户_NFCS 爱发电用户_43ad8 爱发电用户_30455 砖吐筷筷 xiaozhang 爱发电用户_b47b3 longbow1998 爱发电用户_5d755 爱发电用户_b76b8 爱发电用户_e70c2 xiaou@截图工具 ousiri 爱发电用户_039dc 花祁 爱发电用户_99f39 坤坤 爱发电用户_X6hp ycteng 曹吉美爸爸 啸沧海 Ronny 爱发电用户_UXEV Biu 王志强 SaltedFish 爱发电用户_76f9d PD.新城คิดถึง 糖颂缘冥倾 ALBERT. 爱发电用户_Pbm7 Leafer 赞助我们
## License
MIT License — free to use, including for commercial applications.
Copyright © 2023-present Chao (Leafer) Wan
