LeaferJS: An Easy-to-Use Canvas Engine

May 27, 2026 · View on GitHub

English | 简体中文


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

👉 A Canvas engine that can handle 1 million graphics in the browser
👉 A Canvas core capable of building Figma-level editors

Extreme Performance · Ultra-Low Memory · DOM-like API · Graphic Editing · Cross-Platform · Zero Dependencies · Lightweight (70KB min+gzip)

NPM Downloads GitHub Stars GitHub Release GitHub 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 | MCP & Skills | Ask AI

🎨 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 LibrariesLeaferJSImprovement
Initial Render Time~9–15 seconds1.28s~8x faster 🎉
Memory Usage~2-4GB (may crash browser)320MB~8x lower
Drag FPS (single element)0–4 FPS60 FPS~15x faster

Test environment: 2K laptop screen / Chrome V143.0. Results are for reference only; actual performance depends on hardware.

Performance Details | Benchmark

⚡️ 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 | Live Examples

🛠️ Quick Start

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

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 | Editor Example

💼 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 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

RepositoryDescriptionLink
LeaferJSMain integration repo (runnable)GitHub
leaferCore engineGitHub
leafer-uiUI layerGitHub
leafer-inOfficial pluginsGitHub
leafer-xCommunity plugins showcaseGitHub
testAutomated testingGitHub
codeExample codeGitHub
docsDocumentationGitHub

🌟 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

Commit Convention

How to Ask Questions the Smart Way

Acknowledgements

All code contributors

All community contributors

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