好用的 Canvas 引擎，轻松构建可交互、可编辑的图形应用，AI 时代的无限画布引擎。An easy-to-use Canvas engine for building interactive and editable graphics applications — an infinite canvas engine for the AI era.
See the codeEnglish | 简体中文
轻松实现图形交互与编辑，AI 时代的无限画布引擎
开源官网: leaferjs.com
开源森林: leafer.pro
PxGrow: pxgrow.com
👉 在浏览器里 “跑得动 100 万个图形” 的 Canvas 引擎
👉 可以做 “Figma 级编辑器” 的 Canvas 内核
极致性能 · 极低内存 · 类 DOM API · 图形编辑 · 跨平台 · 零依赖 · 轻量 (70KB min+gzip)
在 Web 图形开发中，开发者常面临“性能与易用性”的选型困境。
LeaferJS 致力于终结这种权衡。 它从底层重构，不仅在性能上挑战 Web 渲染和交互的物理极限，更在开发体验上追求极致的简单。它是为了解决“大规模、高密度、海量图层”的生产力工具而诞生的标准化引擎。
在 AI 生成内容爆发的今天，图形引擎的挑战已从 “如何画出来” 转变为 “如何编排与精修”：
Leafer AI 知识库 | MCP & Skills | Ask AI
LeaferJS 的极致性能与标准化能力，使其成为以下领域的理想底座：
LeaferJS 将 Web 图形处理的“天花板”向上推举了约 10 倍。
| 测试项 (100万个可交互矩形) | 传统 Canvas 库 | LeaferJS | 提升 |
|---|---|---|---|
| 首屏创建速度 | ~9-15 秒 | 1.28 秒 | 约快 8 倍 🎉 |
| 内存占用 | ~2-4GB (浏览器可能崩溃) | 320 MB | 约节省 8 倍 |
| 单元素拖拽帧率 | 0-4 FPS | 60 FPS | 约流畅 15 倍 |
测试环境: 2K屏笔记本 / Chrome V143.0，数据仅供参考，实际表现取决于硬件性能。
npm install leafer-ui
# 需使用插件时，推荐同时安装跨平台核心包，防止出现更新版本不同步问题
npm install leafer-ui @leafer-ui/core @leafer-ui/draw
import { Leafer, Rect } from 'leafer-ui'
// 创建一个自适应窗口的交互应用
const leafer = new Leafer({ view: window })
// 创建一个可以被拖拽的矩形
const rect = new Rect({
x: 100,
y: 100,
width: 200,
height: 200,
fill: '#32cd79',
draggable: true,
})
leafer.add(rect)
从“一个引擎”到“一个成熟产品”之间存在巨大的研发鸿沟。为了支持开源引擎的长久维护，并协助企业跨越复杂场景的开发瓶颈，我们构建了透明且健康的生态：
| 仓库名称 | 功能描述 | 开源地址 |
|---|---|---|
| LeaferJS | 主集成仓库，支持直接运行代码 | GitHub |
| leafer | 引擎核心仓库 | GitHub |
| leafer-ui | UI 表现层仓库 | GitHub |
| leafer-in | 官方插件仓库 | GitHub |
| leafer-x | 社区插件提交/展示仓库 | GitHub |
| test | 自动化测试仓库 | GitHub |
| code | 示例代码仓库 | GitHub |
| docs | 在线文档仓库 | GitHub |
LeaferJS 是一个持续打磨了五年的原创开源引擎。我们致力于把“图形系统底座”这件事标准化，让开发者专注产品创意，而非底层实现。
如果你支持原创、追求极致性能，请为我们点亮一颗 Star！
当你使用 LeaferJS 时, 你就已成为了 这个充满活力的大家庭 的一员，踏入这座建设中的“技术城堡”。只有通过每位成员的热情参与与贡献，这座城堡才能逐步走向完善。
MIT 开源许可协议，可以免费使用，且能用于商业场景。
Copyright © 2023-present Chao (Leafer) Wan
好用的 Canvas 引擎，轻松构建可交互、可编辑的图形应用，AI 时代的无限画布引擎。An easy-to-use Canvas engine for building interactive and editable graphics applications — an infinite canvas engine for the AI era.
See the codeEnglish | 简体中文
轻松实现图形交互与编辑，AI 时代的无限画布引擎
开源官网: leaferjs.com
开源森林: leafer.pro
PxGrow: pxgrow.com
👉 在浏览器里 “跑得动 100 万个图形” 的 Canvas 引擎
👉 可以做 “Figma 级编辑器” 的 Canvas 内核
极致性能 · 极低内存 · 类 DOM API · 图形编辑 · 跨平台 · 零依赖 · 轻量 (70KB min+gzip)
在 Web 图形开发中，开发者常面临“性能与易用性”的选型困境。
LeaferJS 致力于终结这种权衡。 它从底层重构，不仅在性能上挑战 Web 渲染和交互的物理极限，更在开发体验上追求极致的简单。它是为了解决“大规模、高密度、海量图层”的生产力工具而诞生的标准化引擎。
在 AI 生成内容爆发的今天，图形引擎的挑战已从 “如何画出来” 转变为 “如何编排与精修”：
Leafer AI 知识库 | MCP & Skills | Ask AI
LeaferJS 的极致性能与标准化能力，使其成为以下领域的理想底座：
LeaferJS 将 Web 图形处理的“天花板”向上推举了约 10 倍。
| 测试项 (100万个可交互矩形) | 传统 Canvas 库 | LeaferJS | 提升 |
|---|---|---|---|
| 首屏创建速度 | ~9-15 秒 | 1.28 秒 | 约快 8 倍 🎉 |
| 内存占用 | ~2-4GB (浏览器可能崩溃) | 320 MB | 约节省 8 倍 |
| 单元素拖拽帧率 | 0-4 FPS | 60 FPS | 约流畅 15 倍 |
测试环境: 2K屏笔记本 / Chrome V143.0，数据仅供参考，实际表现取决于硬件性能。
npm install leafer-ui
# 需使用插件时，推荐同时安装跨平台核心包，防止出现更新版本不同步问题
npm install leafer-ui @leafer-ui/core @leafer-ui/draw
import { Leafer, Rect } from 'leafer-ui'
// 创建一个自适应窗口的交互应用
const leafer = new Leafer({ view: window })
// 创建一个可以被拖拽的矩形
const rect = new Rect({
x: 100,
y: 100,
width: 200,
height: 200,
fill: '#32cd79',
draggable: true,
})
leafer.add(rect)
从“一个引擎”到“一个成熟产品”之间存在巨大的研发鸿沟。为了支持开源引擎的长久维护，并协助企业跨越复杂场景的开发瓶颈，我们构建了透明且健康的生态：
| 仓库名称 | 功能描述 | 开源地址 |
|---|---|---|
| LeaferJS | 主集成仓库，支持直接运行代码 | GitHub |
| leafer | 引擎核心仓库 | GitHub |
| leafer-ui | UI 表现层仓库 | GitHub |
| leafer-in | 官方插件仓库 | GitHub |
| leafer-x | 社区插件提交/展示仓库 | GitHub |
| test | 自动化测试仓库 | GitHub |
| code | 示例代码仓库 | GitHub |
| docs | 在线文档仓库 | GitHub |
LeaferJS 是一个持续打磨了五年的原创开源引擎。我们致力于把“图形系统底座”这件事标准化，让开发者专注产品创意，而非底层实现。
如果你支持原创、追求极致性能，请为我们点亮一颗 Star！
当你使用 LeaferJS 时, 你就已成为了 这个充满活力的大家庭 的一员，踏入这座建设中的“技术城堡”。只有通过每位成员的热情参与与贡献，这座城堡才能逐步走向完善。
MIT 开源许可协议，可以免费使用，且能用于商业场景。
Copyright © 2023-present Chao (Leafer) Wan