[Open Source Story] We couldn’t afford Canva, so we built an open-source online design tool using LeaferJS

2026-04-09 · Gzm Design Team

Preface

Hello everyone, we are the development team of Gzm Design.

In our daily work, we have long relied on various online design tools to create posters, event visuals, and marketing materials. These tools are mature in functionality, but as usage deepened, several issues gradually became apparent:

• Costs continue to increase with usage scale
• No private deployment option, making systems and data uncontrollable
• Difficult to customize according to business requirements

These issues become even more prominent when we need to reuse existing design assets (such as PSD files).

Based on these real-world needs, we began to think about a more concrete question:

Can we build a controllable, extensible, and truly usable design tool in the browser?

Gzm Design was born in this context. It is an open-source online design tool built with Vue3 and LeaferJS, supporting PSD import, drag-and-drop editing, and AI image composition capabilities.

Why are existing solutions not sufficient?

Before starting implementation, we conducted a systematic analysis of existing solutions. The problems mainly fall into two categories.

Commercial tools

Online design tools represented by Canva and others are already very mature in both functionality and user experience, but for developers and small to medium teams, there are still some limitations:

• High long-term subscription costs
• No private deployment, making data and systems uncontrollable
• Limited extensibility, difficult to deeply customize

As business complexity grows, these limitations become real obstacles.

Open-source solutions

Compared with commercial tools, open-source solutions offer better controllability, but still have gaps in key capabilities:

• Lack of PSD file parsing and reconstruction support
• Insufficient rendering performance in multi-layer, high-complexity scenarios
• Editing experience hard to match professional design tools

This leads to a direct consequence: existing design assets are difficult to reuse, and Web-based design tools are hard to truly productionize.

Why choose LeaferJS?

We previously evaluated several engines, including Fabric.js. After trying multiple options, we ultimately chose LeaferJS as the underlying rendering engine. The core reason is that it achieves a relatively balanced state across several key dimensions.

Performance

Poster design typically involves a large number of layers, images, and effect overlays, which places high demands on rendering performance.

LeaferJS performs stably in this regard:

• Supports large-scale graphic rendering
• Maintains smooth interaction even in high-density layer scenarios

This enables it to support design-tool-level use cases.

Developer experience

Compared to traditional Canvas operations, LeaferJS provides a higher-level abstraction:

• Clean API, closer to UI development thinking
• Strong TypeScript support
• Built-in automatic layout capabilities (Flow), reducing complexity in interactive implementations

In actual development, it significantly reduces the burden of low-level drawing logic.

Ecosystem potential

As a rapidly evolving open-source project, LeaferJS has strong community activity and relatively fast response speed.

During development, some of our customization requests were addressed in time (we bothered the author quite a bit during development haha~), which is a plus for long-term project evolution.

Implementation approach

To make the design tool truly usable, we split the overall implementation into three layers: rendering, compatibility, and interaction.

Rendering layer: building stable graphics capabilities

At the bottom layer, we used LeaferJS to build the rendering system and implement the core capabilities required for the design tool:

• Layer organization and management
• Vector graphic editing
• Filter effects and blending modes
• Efficient rendering of multiple elements

In complex poster scenarios, this layer is mainly responsible for performance and stability.

Compatibility layer: PSD to canvas object conversion

To solve the problem of asset reuse, we focused on implementing PSD parsing and mapping:

• Parse layer structure and style information from PSD files
• Convert them into Leafer-recognizable graphic objects
• Preserve original hierarchy and visual appearance

The goal of this process is very clear:

Allow PSD files to be directly editable once imported into the system

This reduces reliance on traditional design software.

Interaction layer: turning capabilities into features

On the top layer, we built a component-based interaction system using Vue3 + Vite + TypeScript, encapsulating underlying capabilities into usable features:

• Drag-and-drop and selection operations
• Canvas zooming and viewport control
• Layer property editing (position, rotation, styles, etc.)
• Component-based encapsulation of common editing behaviors

This approach ensures both development efficiency and future extensibility.

Final result

After the overall solution was implemented, Gzm Design met expectations in both performance and user experience.

Performance

• High-resolution poster loading time reduced to seconds
• Canvas frame rate remains stable around 60 FPS in multi-layer scenarios

It meets the smoothness requirements of daily design workflows.

User experience

• Supports direct PSD import and editing
• Editing, previewing, and exporting can all be done in the browser

The entire workflow has been simplified from multi-tool collaboration to a single unified environment.

Real-world usage

Currently, Gzm Design is already used in multiple scenarios:

• E-commerce and event poster design
• QR code and marketing material generation
• Rapid template-based content creation

At the same time, as an open-source project, it is also used by many Leafer developers for secondary development, becoming a widely appreciated graphics editing foundation framework.

Conclusion

The implementation of Gzm Design is not about “reinventing design tools”, but rather a pragmatic engineering effort:

• Migrating existing design assets to the Web environment
• Balancing performance and complexity
• Achieving core requirements in a lightweight way

LeaferJS plays the role of foundational support, making this process feasible.

Open-source repository: https://github.com/LvHuaiSheng/gzm-design

Website: http://gzm-design-doc.guozimi.cn