1. Project Overview

LeaferJS is an easy-to-use Canvas engine that offers an innovative development experience. It can be used for efficient drawing, UI interaction (mini-games, interactive applications, and industrial configuration interfaces), and graphic editing.

It provides a rich collection of UI drawing elements and ready-to-use features such as automatic layout, graphic editing, and SVG export, making integration with products like PS, Figma, and Sketch convenient. It also provides unified interaction events for cross-platform development, including dragging, rotation, and pinch-to-zoom gestures.

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

LeaferJS is committed to establishing a simple, open, and modern UI drawing language standard with rich expressive capabilities that are easy for AI to understand and visually accessible to humans. It also provides a cross-platform, lightweight, and high-performance runtime for digital product development.

Enable different software applications to communicate, collaborate, and share drawing data, making digital product development faster and simpler.

Through continuously evolving graphics rendering technologies and supporting tools, we aim to attract more developers, establish an open ecosystem, facilitate communication and mutual benefits, accelerate industry development, and inspire the creation of more innovative technologies and products.

Our goal is not only to make it a cutting-edge 2D engine and a future 3D engine technology, but also to deliver an exceptional development experience for developers. We aim to help developers quickly build visual productivity tools for the AI era, including websites, applications, design tools, games, and animations (such as next-generation local-first alternatives to Figma, Miro, Notion, Unity, Adobe, Canva, and Webflow). This is a long yet exciting journey. We are steadily working toward this goal year after year. Learn more through the Development Plan.

Features

Easy to Learn and Use

Built on Javascript and Canvas API, with easy-to-use APIs and documentation.

Modern

A simple, open, and modern UI drawing framework with a cross-platform, lightweight, and high-performance runtime.

Rich Expressiveness

Rich graphical capabilities that can create a wide variety of stunning visual effects, comparable to those of today's mainstream design software.

Scenario Packages

For efficient drawing scenarios, we recommend installing the lighter leafer-draw (49KB min+gzip).

For game development scenarios, we recommend installing leafer-game, which offers greater convenience and already integrates game-related plugins.

For graphic editing scenarios, we recommend installing leafer-editor, which offers greater convenience and already integrates plugins related to the graphic editor.

5. Tech Stack

leafer-ui

Runs in a Web environment.

Installation

Make sure you have Node.js installed.

npm install leafer-ui

Easy to Learn and Use

import { Leafer, Rect } from 'leafer-ui'

// Create an application with a responsive window and a view that supports zooming and scrolling
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)

Browser Environment

Requires support for ES2015 syntax.

Browser
Chrome >= 51
Firefox >= 53
Safari >= 10
Edge >= 79
Opera >= 36
IE Not supported

For more information, please refer to the official LeaferJS documentation.