LeaferJS 1.0 Official Release: A Powerful and Easy-to-Use Canvas Rendering Engine

2024-07-09 "Seeing Hope, Growing Continuously"

Introduction

Hello everyone, I’m Wan Chao, the founder of LeaferJS.

In the height of summer, green leaves shine brightly under the sunlight after rain—just like the meaning of “Leafer”: seeing hope and growing continuously.

Today, I’m very excited to announce that after more than 3 years of development, the LeaferJS open-source engine has finally matured and reached its official release! 🎉🎉🎉

It has been exactly one year since our last public beta release.

Growing Together with Users

Over the past year, countless user needs and feedback have poured in like a tide, continuously refining and shaping this product. It has become more feature-rich and better aligned with real-world use cases, while our documentation has also become clearer and easier to understand.

Even when the product was not yet perfect, user enthusiasm never stopped! Word-of-mouth brought in a steady stream of new users.

Thanks to every user who wrote articles, tutorials, shared content, reported bugs, gave suggestions, built products, demos, plugins, or generously sponsored us.

With the official release, more companies can now confidently use LeaferJS in production environments, and the surrounding ecosystem is set to thrive.

Understanding LeaferJS Step by Step

Those familiar with us know that we’ve been moving toward an ambitious and exciting vision.

Our engine can create 1 million interactive rectangles in just 1.5 seconds, using only 350MB of memory. While maintaining this advantage, the official release introduces many practical features, expanding its application scenarios.

Let’s start from a frontend developer’s perspective and explore how LeaferJS can be applied in your work.

First, take a look at how LeaferJS works through code:

Next, we’ll begin with three entry-level scenarios:

Finally, we’ll explore advanced scenarios and our vision.

Efficient Drawing

Many products require generating long images or promotional posters, especially in mini-programs.

We provide an easy-to-use auto layout system (similar to Flex but simpler) and center-based drawing capabilities. This creates a completely new development experience for poster creation, eliminating the need for manual text measurement when layouts change frequently.

With simple and controllable gradients, shadows, masks, and erasing effects, you can easily achieve professional design results.

We also provide a powerful Pen tool that allows you to draw paths and combine elements just like painting.

// #创建 Pen [画曲线 (Leafer)]
import { Leafer, Pen } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const pen = new Pen() 

pen.setStyle({ fill: { type: 'radial', stops: [{ offset: 0, color: '#FF4B4B' }, { offset: 1, color: '#FEB027' }] } })
pen.roundRect(0, 0, 100, 100, 30)

pen.setStyle({ y: -5, fill: 'white' })
pen.moveTo(40, 30).bezierCurveTo(70, 30, 90, 60, 63, 80).quadraticCurveTo(50, 88, 40, 80).bezierCurveTo(10, 60, 50, 40, 40, 30)

leafer.add(pen)

Additionally, you can design content in advance using tools on our website, export it as JSON, then modify variables and import it to automatically generate images. More importantly, we support image generation in mini-program environments, including high-resolution exports.

UI Interaction

Configuration & Flowcharts

We offer a variety of arrow styles and element states. Combined with user-provided connection plugins, you can quickly build configuration or flowchart tools.

UI Interaction Interfaces

Building UI interaction systems in a Canvas environment has always been a challenge in the industry. With minimal code, we’ve taken a major step toward solving this problem.

We provide rich cross-platform interaction events, gestures, CSS-like state styles, and cursor styles.

Combined with auto layout, you can quickly integrate high-performance UI interaction features into scenarios like configuration tools, game development, data visualization, rich media, and creative design.

Here’s a UI component library developed by our community:

Mini Games

With our rich drawing and interaction capabilities, combined with animation libraries and physics engines you prefer, LeaferJS can also be used to develop fun mini-games.

Here are some community-built mini-game collections:

Graphics & Image Editing

Image Cropping

Almost every product needs avatar or image cropping.

We provide comprehensive graphic editing capabilities and tailored configurations for cropping scenarios, such as cropping masks and mobile touch gestures (zoom and rotate), allowing you to build your own image cropping tool with minimal code.

Image Editor

Building an image editor from scratch is extremely complex—but we make it accessible to everyone.

We provide rich features and customizable editor styles, including move, scale, rotate, skew, multi-select, box select, grouping, double-click to enter groups, locking, and layering.

You can also customize editing tools and internal editors.

We collaborate with third-party developers to offer ready-to-use plugins such as rulers, viewport controls, scrollbars, text editing, and alignment snapping. SVG export plugins are also coming soon, saving you significant development time.

Short Video

In today’s short-video era, you can combine LeaferJS animations and editing capabilities with open-source canvas-to-video libraries to quickly generate videos in bulk.

Deep Dive into LeaferJS

After exploring these three entry-level scenarios, you should now have a basic understanding of LeaferJS. But its capabilities go far beyond that.

Let’s look at some advanced scenarios and our vision.

Online Design

If you want to build professional tools like vector design software, UI design tools, whiteboards, flowchart tools, low-code editors, vector engraving tools, CAD software, EDA tools, or video editors—we can help you save 3 years of development time.

Our core architecture is designed for professional-grade graphics and image editing software, offering out-of-the-box features and excellent extensibility.

You can build on top of LeaferJS to quickly create products that transform how people live and work.

Here are some products officially featured on our website—we look forward to seeing yours here in the future.

Large-Scale Scenarios

Here are some large-scale application scenarios listed on our website (far from exhaustive), which can serve as inspiration for your next product.

Gradual Expansion

We adopt a core package + scenario plugin architecture to meet diverse needs.

As each scenario matures, it will be packaged as a dedicated module for easy installation. Third-party developers are also welcome to contribute.

At this stage, we focus primarily on drawing and editor scenarios (core scenarios), with future plans to explore AI drawing and further performance improvements.

Mission & Vision

We aim to establish a simple, open, and modern UI drawing language standard through LeaferJS—one that is easy for humans to use and understandable by AI.

We strive to provide a cross-platform, lightweight, high-performance runtime for digital product development.

Our goal is to enable different software systems to communicate, collaborate, and share drawing data and digital interfaces, fostering an open ecosystem that drives innovation and accelerates the creation of new technologies and products—especially in the AI + visual editing space.

Our performance goal is to support smooth interaction with millions of static elements and hundreds of thousands of dynamic game elements (GPU-accelerated).

Passion and Courage Turn Dreams into Reality

We are not just building a meaningful open-source product—we are also promoting a culture of innovation, humanity, and excellence.

The journey of entrepreneurship and innovation is challenging and often lonely. It is this culture and sense of mission that carried us through 3 long years of continuous improvement and overcoming countless obstacles.

With the official release, we’ve found supporters who help sustain us financially (not investors), allowing us to focus fully on advancing LeaferJS and building a community we all love.

We aim to design sustainable business models on top of the ecosystem and bring LeaferJS to the world.

Congratulations 🎉🎉🎉

You’ve now completed an overview of LeaferJS!

You’ve gained a powerful productivity tool, and we’ve gained a new friend.

Welcome to visit our website—there are many more features and stories waiting for you to explore.

www.leaferjs.com

Media Coverage

Frontend Xigua - WeChat Official Account

OSC Open Source Community

Frontend Morning Read

Share with Friends

Next Step

Learn Our Startup Story