Overview
LeaferJS is an innovative and easy-to-use Canvas engine that enables effortless graphic interaction and editing. It is suitable for AI infinite canvas, AI design tools, graphic editing, mini games, interactive applications, industrial visualization, and image/video generation scenarios.
It provides a rich set of UI drawing elements and out-of-the-box features such as viewport control, automatic layout, graphic editing, and SVG export. This makes it easy to integrate with products like PS, Figma, and Sketch. It also offers unified cross-platform interaction events, including drag, rotation, and zoom gestures.
📗 A visual, step-by-step introduction to LeaferJS
📙 New animation, state, transition, and game features
If you find it useful, please give us a Star 🌟 and help more people discover this library ✨ ✨ ✨
Quick Start
1. Set up the online Playground environment
Used to run and experiment with the following example code.
2. Learn the LeaferJS quick start tutorial
Follow the official tutorial step by step (with navigation buttons at the bottom of the docs) to learn from basics to advanced topics, and practice each example code.
Quick Installation
🚀 To start using in your project immediately, install leafer-ui (70KB min+gzip, zero dependencies) and begin your journey.
You can also install the full package leafer, which will automatically include leafer-ui and all @leafer-in/* plugins.
Community & Support
FAQ ｜ Community Q&A ｜ Submit Issue
For simple questions, you can also use the AI chat bubble in the bottom-right corner.
⏰ 4-Day Work Week
LeaferJS runs a 4-day work week (Monday, Tuesday, Thursday, Friday)!
We believe that energy and perspective drive creativity and innovation, so we value rest, learning, and exploration.
⚠️ We do not handle work on rest days (Wednesday, Saturday, Sunday, and public holidays). Thank you for your understanding and support!
1. Bug Reports & Suggestions
Found a bug or have a suggestion? Please submit an issue on GitHub. Your contribution helps make LeaferJS stronger!
Issue Template
【Bug/Suggestion】xxxxxxxxxxx title xxxxxxxxxxxxxx
Environment: PC + Windows 11 + Chrome 131 + LeaferJS 2.1.0
Steps to reproduce: Please provide detailed reproduction steps and runnable code. This greatly improves debugging efficiency.
2. Need Help?
Go to Zhihu and create a question with the topic tag #LeaferJS.
To ensure knowledge sharing and avoid duplicated effort, please keep questions public and share the link in community groups if needed.
Issue Template
【LeaferJS】xxxxxxxxxxx title xxxxxxxxxxxxxx (must include “LeaferJS” keyword)
Environment: PC + Windows 11 + Chrome 131 + LeaferJS 2.1.0
#LeaferJS (click the “#” tag in Zhihu to bind the topic so others can find it easily)
3. Technical Discussion
Welcome to join the LeaferJS community chat group, where you can connect with developers, share experience, and discuss improvements.
You will get early update notifications and occasional community events & rewards.
Notice
Please keep discussions friendly. Avoid political or irrelevant topics. Violations may result in removal from the group.
As the community grows, the chat group will no longer provide 1-on-1 support. Please ask questions publicly so more people can benefit.
Disclaimer
LeaferJS is open-source under the MIT license. Please read the disclaimer before use. We welcome community contributions and mutual support. We are not obligated to answer or fix all issues (but we try our best). Our main focus is product development, and we encourage everyone to participate and build a stronger ecosystem together.
Enhance LeaferJS
We hope to see more open-source projects built around LeaferJS:
- AI integrations
- Graphic editing libraries
- Rich text editors
- Animation and effects libraries
- Vue / React components
- UI frameworks
- Anything you can imagine...
Turn your ideas into products faster.
Ecosystem Extensions
We also hope to see innovations in the ecosystem:
- Real-time collaborative storage formats capable of handling millions of graphics with version control, fast loading, and local-first design.
- High-performance real-time transmission systems for large-scale graphical data, with low bandwidth usage and high stability.
These will help ensure smooth workflows across the entire graphics pipeline.
Development Philosophy
Do the right things in a simple and correct way.
Under the premise of general usability and maintainability, pursue extreme performance, minimal memory usage, and a small code footprint.
🥥 Finding the Right Seed
Focus on problems that the ecosystem truly needs but are still unsolved, especially those you are skilled at and passionate about.
🌱 Let the Seed Grow
Continuously solve real user problems, innovate, and prioritize shipping first, then refining.
🌴 Sunlight, Rain, and Time
Sustainable growth comes from simple principles: consistency and patience. Time will do the rest.
Mission & Vision
LeaferJS is not only committed to building cutting-edge 2D and future 3D engine technology, but also aims to create a modern, open UI graphics standard that is expressive, AI-friendly, and human-readable.
It enables software systems to communicate, collaborate, and share graphical data, making digital product development faster and simpler.
Through continuous innovation in rendering technology and tooling, we aim to build an open ecosystem where developers can benefit from each other and accelerate industry progress.
We empower developers to build next-generation AI-era tools for web, applications, design, canvas, games, and animation—such as the next Figma, Miro, Notion, Unity, Adobe, Canva, Webflow, and more.
This is a long journey, and we are steadily moving toward it year after year. You can learn more in the development plan.
Culture
We aim to build a community culture that values:
Sincerity, resilience, excellence, passion for life, uniqueness, listening, mutual support, prioritization, fearlessness, and results orientation
We believe that when people are physically and mentally strong and curious about the world, creativity naturally emerges. We encourage people to pursue excellence while also enjoying life—fitness, food, travel, photography, music, writing, painting, dance, games, and more.
We may even form bands, exhibitions, or reading clubs.
We aim to climb peaks that others have never reached, while focusing our energy on the most meaningful and valuable problems.
We understand success is not instant. Failures are part of the journey. As long as we stay resilient and keep improving step by step, we will eventually reach our destination.
We hope to build a new type of internet company and community together. If you resonate with this culture, welcome to read the contribution guide and join us.