An AI-assisted integration of LeaferJS, an ultra-high-performance 2D Canvas engine designed for building complex graphic editors, games, and responsive UI layouts.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install leafer-js-skill
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install leafer-js-skill using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is LeaferJS Canvas Engine?
LeaferJS is a lightweight 2D graphics and Canvas engine built for modern web applications. Designed to handle up to one million shapes with exceptional rendering speeds, it simplifies the creation of interactive vector graphics, design tools like Figma or Canva, and visual dashboards. This integration for Openclaw Skills empowers AI coding assistants to seamlessly generate, debug, and optimize complex Canvas projects.
By providing native support across diverse execution environments—including standard browsers, Web Workers, Node.js server-side rendering, and WeChat Miniprograms—this skill bridges the gap between AI code generation and robust graphics programming. It fully supports TypeScript, Vue, React, and modern SSR frameworks such as Next.js, making it an essential tool for frontend developer workflows.
LeaferJS Canvas Engine Use Cases
- Collaborative Editors: Developing vector graphics editors, mind-mapping tools, flowchart makers, and online whiteboard applications.
- Interactive 2D Gaming: Creating lightweight games, responsive gaming UI overlays, and sprite-based animations.
- Data Visualization: Building complex industrial topologies, monitoring dashboards, and real-time visualization screens.
- Automated Media Generation: Programmatically rendering marketing posters, certificates, social media covers, and video frames via server-side Skia-canvas setups.
- AI Infinite Canvases: Powering zoomable infinite canvas spaces for AI-driven visual curation and design tools.
How LeaferJS Canvas Engine Works
- Environment Setup: The skill configures the development environment, verifying framework compatibility (Vue, React, Next.js, etc.) and initializing dependencies.
- App and Tree Initialization: It instantiates the core App or Leafer class, designating target viewports and separating layout layers into "tree" (design content) and "sky" (UI controls).
- Vector Element Composition: The skill generates and adds graphic primitives (Rect, Ellipse, Line, Text, Image, SVG) using efficient batch APIs like addMany.
- Event and Animation Mapping: Interactive states (hover, active, selected) and motion timelines are registered using CSS-like transitions or keyframe animation modules.
- Resource Cleanup: To prevent memory leaks, especially within reactive frameworks, the skill safely handles lifecycle hooks and executes canvas context cleanup routines.
LeaferJS Canvas Engine Setup
Get started quickly with standard package managers using the commands below:
# Install the lightweight UI package (Recommended, 70KB min+gzip)
npm install leafer-ui
# Or install the full bundle containing all standard plugins
npm install leafer
Alternatively, initialize a new structured workspace from scratch:
# Scaffold a Vue + LeaferJS project
npm create leafer@latest my-vue-app -- --template vue
# Scaffold a React + LeaferJS project
npm create leafer@latest my-react-app -- --template react
LeaferJS Canvas Engine Data Schema & Taxonomy
The engine organizes content structurally through a declarative layout system. Key components and metadata options are mapped below:
| Hierarchy Level | Class Name | Primary Responsibility |
|---|---|---|
| Application Root | App |
Manages multi-layered rendering, coordinating background, active shapes, and interactive controls. |
| Rendering Target | Leafer |
An independent rendering layer bound to a physical canvas context or offscreen view. |
| Layout Groups | Group, Box, Frame |
Structural elements supporting absolute clustering, background styles, padding, and scroll behaviors. |
| Visual Primitives | Rect, Ellipse, Path, Text, Image |
Standard vector or pixel rendering units containing coordinates, styles, and state modifiers. |
All elements support distinct coordinate space transformations including world (absolute), local (relative to parent), box (bounding box relative), and page (relative to viewport).
LeaferJS Canvas Engine Advanced Features
- Interactive States: Declarative definition of states using
@leafer-in/statefor real-time hover, press, and selected styling. - Editor Framework: Multi-selection, resizing, grouping, transformations, and snap-to-grid features powered by
@leafer-in/editor. - Flex-Like Auto-Layout: Dynamic alignment, spacing, and wraps using the flex-based
@leafer-in/flowsystem. - Multithreading & SSR: Support for offscreen canvas rendering within Web Workers and backend rasterization using server-side Skia integrations.
- High-Fidelity Exporting: High-resolution image generation (PNG, JPG, SVG) with custom pixel ratios for print and download tasks.
SKILL.md
Loading
Related Openclaw Skills
UI Cloner Skill
Converts product screenshots into structured, reusable design systems and self-contained .skill files for AI agents to recreate across any tech stack.
Professional Naming Skill
A structured AI agent skill designed to generate multi-scenario names for individuals, brands, and companies with multi-turn risk assessment.
Live Highlight Slicer
An automated live stream recording processing tool designed to detect highlight moments and slice them into short video clips.
dlazy-video-generate
An AI-powered video generation skill that dynamically selects and executes the optimal dLazy CLI model based on user prompts.
Perry TypeScript Compiler (perryts)
A high-performance compiler that translates TypeScript directly to native machine code via LLVM without virtual machines or runtimes.
autoskill-chart-craft
An AI agent skill that translates natural language data descriptions into standalone, interactive SVG and HTML charts with zero external dependencies.
Featured*
