### Install leafer-ui using bun

Source: https://www.leaferjs.com/ui/guide/install/ui/start

Installs the leafer-ui package using bun. Ensure Node.js is installed before proceeding.

```sh
bun add leafer-ui
```

--------------------------------

### Install leafer-ui using yarn

Source: https://www.leaferjs.com/ui/guide/install/ui/start

Installs the leafer-ui package using yarn. Ensure Node.js is installed before proceeding.

```sh
yarn add leafer-ui
```

--------------------------------

### Install leafer-ui using pnpm

Source: https://www.leaferjs.com/ui/guide/install/ui/start

Installs the leafer-ui package using pnpm. Ensure Node.js is installed before proceeding.

```sh
pnpm add leafer-ui
```

--------------------------------

### Install leafer-ui using npm

Source: https://www.leaferjs.com/ui/guide/install/ui/start

Installs the leafer-ui package using npm. Ensure Node.js is installed before proceeding.

```sh
npm install leafer-ui
```

--------------------------------

### Install @leafer-ui/miniapp with pnpm

Source: https://www.leaferjs.com/ui/guide/install/ui/miniapp/start

Installs the @leafer-ui/miniapp package using pnpm. This is an alternative package manager that can offer faster installation speeds.

```sh
pnpm add @leafer-ui/miniapp
```

--------------------------------

### Install @leafer-ui/miniapp with bun

Source: https://www.leaferjs.com/ui/guide/install/ui/miniapp/start

Installs the @leafer-ui/miniapp package using bun. Bun is a fast, all-in-one JavaScript runtime and toolkit.

```sh
bun add @leafer-ui/miniapp
```

--------------------------------

### Install @leafer/miniapp using npm, pnpm, yarn, or bun

Source: https://www.leaferjs.com/ui/guide/install/leafer/miniapp/start

This snippet shows the commands to install the @leafer/miniapp package using various package managers. Ensure you have the respective package manager installed on your system.

```sh
npm install @leafer/miniapp
```

```sh
pnpm add @leafer/miniapp
```

```sh
yarn add @leafer/miniapp
```

```sh
bun add @leafer/miniapp
```

--------------------------------

### Install and Run LeaferJS Locally

Source: https://www.leaferjs.com/ui/guide/runtime

This snippet details the steps to clone the LeaferJS repository, install dependencies, and start the local development server. It also covers how to update the local repository. The process involves cloning the main repository, navigating into the directory, installing npm packages, and starting the project. Updating requires a git pull command. The local environment will be accessible at localhost:10101.

```shell
git clone  https://github.com/leaferjs/LeaferJS.git --recurse-submodules

cd LeaferJS

npm install
npm run start
```

```shell
git pull --recurse-submodules
```

--------------------------------

### Install @leafer-game/miniapp with npm, pnpm, yarn, or bun

Source: https://www.leaferjs.com/ui/guide/install/game/miniapp/start

These commands demonstrate how to install the @leafer-game/miniapp package using different package managers. Ensure you have the respective package manager installed on your system.

```npm
npm install @leafer-game/miniapp
```

```pnpm
pnpm add @leafer-game/miniapp
```

```yarn
yarn add @leafer-game/miniapp
```

```bun
bun add @leafer-game/miniapp
```

--------------------------------

### Install @leafer-draw/miniapp using npm, pnpm, yarn, or bun

Source: https://www.leaferjs.com/ui/guide/install/draw/miniapp/start

This section details the commands to install the @leafer-draw/miniapp package using various package managers. Ensure you have the respective package manager installed to use these commands.

```shell
npm install @leafer-draw/miniapp
```

```shell
pnpm add @leafer-draw/miniapp
```

```shell
yarn add @leafer-draw/miniapp
```

```shell
bun add @leafer-draw/miniapp
```

--------------------------------

### Install @leafer-ui/miniapp with npm

Source: https://www.leaferjs.com/ui/guide/install/ui/miniapp/start

Installs the @leafer-ui/miniapp package using npm. This is the standard way to add the library to your project for use in WeChat Mini Programs.

```sh
npm install @leafer-ui/miniapp
```

--------------------------------

### Install @leafer-ui/miniapp with yarn

Source: https://www.leaferjs.com/ui/guide/install/ui/miniapp/start

Installs the @leafer-ui/miniapp package using yarn. Yarn is another popular package manager for JavaScript projects.

```sh
yarn add @leafer-ui/miniapp
```

--------------------------------

### Install leafer-draw using bun

Source: https://www.leaferjs.com/ui/guide/install/draw/start

Installs the leafer-draw package using the bun package manager. bun is a fast, all-in-one JavaScript runtime.

```sh
bun add leafer-draw
```

--------------------------------

### Install @leafer-draw/worker with bun

Source: https://www.leaferjs.com/ui/guide/install/draw/worker/start

Install the @leafer-draw/worker package using bun. This command adds the package as a dependency to your project.

```sh
bun add @leafer-draw/worker
```

--------------------------------

### Install leafer-editor using bun

Source: https://www.leaferjs.com/ui/guide/install/editor/start

Installs the leafer-editor package using bun. bun is a new, fast JavaScript runtime, bundler, transpiler, and package manager.

```sh
bun add leafer-editor
```

--------------------------------

### Install @leafer-editor/worker using bun

Source: https://www.leaferjs.com/ui/guide/install/editor/worker/start

Installs the @leafer-editor/worker package using bun. bun is a new, fast JavaScript bundler, transpiler, task runner, and package manager.

```sh
bun add @leafer-editor/worker
```

--------------------------------

### Install leafer-game via bun

Source: https://www.leaferjs.com/ui/guide/install/game/start

This command installs the leafer-game package using bun, a new, fast JavaScript runtime, bundler, transpiler, and package manager.

```shell
bun add leafer-game
```

--------------------------------

### Install @leafer-editor/worker using yarn

Source: https://www.leaferjs.com/ui/guide/install/editor/worker/start

Installs the @leafer-editor/worker package using yarn. yarn is another popular package manager for JavaScript.

```sh
yarn add @leafer-editor/worker
```

--------------------------------

### Install @leafer-game/node using bun

Source: https://www.leaferjs.com/ui/guide/install/game/node/napi

Installs the @leafer-game/node package using the bun package manager. This package is suitable for server-side rendering and image generation in Node.js.

```shell
bun add @leafer-game/node
```

--------------------------------

### LeaferJS Graphics Editor Implementation Principles (TypeScript)

Source: https://www.leaferjs.com/ui/guide/plugin/editor

This code example illustrates the underlying principles of the LeaferJS Graphics Editor. It shows how to manually add the tree and sky layers to the App instance and then instantiate the Editor plugin, attaching it to the sky layer. This approach provides more explicit control over the editor's setup and integration.

```typescript
// #App结构 - 图形编辑器 [实现原理]
import { App, Leafer, Frame, Rect } from 'leafer-ui'
import { Editor } from '@leafer-in/editor' // 导入图形编辑器插件 //
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({ view: window, fill: '#333' })

app.add(app.tree = new Leafer({ type: 'design' })) // 添加 tree 层
app.add(app.sky = new Leafer())  // 添加 sky 层

app.tree.add(Frame.one({
    children: [
        Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 100, 100),
        Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 300, 100)
    ]
}, 100, 100, 500, 600))

app.sky.add(app.editor = new Editor()) // 添加图形编辑器，用于选中元素进行编辑操作 //

```

--------------------------------

### Install leafer-draw using npm

Source: https://www.leaferjs.com/ui/guide/install/draw/start

Installs the leafer-draw package using the npm package manager. This is a common way to add libraries to JavaScript projects.

```sh
npm install leafer-draw
```

--------------------------------

### Install @leafer-editor/node with bun

Source: https://www.leaferjs.com/ui/guide/install/editor/node/start

Installs the @leafer-editor/node package using the bun runtime and package manager. This is a fast, all-in-one JavaScript toolkit.

```sh
bun add @leafer-editor/node
```

--------------------------------

### Install @leafer-editor/miniapp using npm, pnpm, yarn, or bun

Source: https://www.leaferjs.com/ui/guide/install/editor/miniapp/start

Instructions for installing the @leafer-editor/miniapp package using various package managers. This is the first step to integrating the library into your project.

```shell
npm install @leafer-editor/miniapp
```

```shell
pnpm add @leafer-editor/miniapp
```

```shell
yarn add @leafer-editor/miniapp
```

```shell
bun add @leafer-editor/miniapp
```

--------------------------------

### Basic LeaferJS Canvas Setup in uniapp (Vue)

Source: https://www.leaferjs.com/ui/guide/install/ui/miniapp/uniapp

This snippet shows how to initialize LeaferJS with a basic canvas element in a uniapp Vue component. It includes setting up the canvas, creating a simple Rect shape, and handling touch events for interaction. Ensure you have LeaferJS miniapp package installed.

```vue
<template>
  <canvas
    id="leafer"
    type="2d"
    @touchstart="receiveEvent"
    @touchmove="receiveEvent"
    @touchend="receiveEvent"
    @touchcancel="receiveEvent"
  ></canvas>
</template>

<script setup lang="ts">
import { onReady } from '@dcloudio/uni-app'
import { Leafer, Rect, useCanvas } from '@leafer-ui/miniapp'

useCanvas('canvas', uni) // 绑定平台全局变量

let leafer: Leafer

onReady(() => {
  leafer = new Leafer({ view: 'leafer' })

  const rect = new Rect({
    x: 100,
    y: 100,
    width: 100,
    height: 100,
    fill: '#32cd79',
    draggable: true,
  })

  leafer.add(rect)
})

function receiveEvent(event: TouchEvent) {
  leafer.receiveEvent(event) // 需手动接收、传递画布交互事件给leafer
}
</script>

<style>
page {
  height: 100%;
}
#leafer {
  width: 100%;
  height: 100%;
}
</style>
```

--------------------------------

### Install @leafer-editor/worker using pnpm

Source: https://www.leaferjs.com/ui/guide/install/editor/worker/start

Installs the @leafer-editor/worker package using pnpm. pnpm is a performant package manager that saves disk space and speeds up installations.

```sh
pnpm add @leafer-editor/worker
```

--------------------------------

### Install leafer-game via npm

Source: https://www.leaferjs.com/ui/guide/install/game/start

This command installs the leafer-game package using npm, a popular JavaScript package manager. Ensure you have Node.js and npm installed on your system.

```shell
npm install leafer-game
```

--------------------------------

### Install @leafer-game/worker via npm

Source: https://www.leaferjs.com/ui/guide/install/game/worker/start

Installs the @leafer-game/worker package using npm. This command fetches and installs the package and its dependencies into your project's node_modules directory.

```bash
npm install @leafer-game/worker
```

--------------------------------

### Install skia-canvas with yarn

Source: https://www.leaferjs.com/ui/guide/install/editor/node/start

Installs the skia-canvas package using yarn. Ensure this is installed if your LeaferJS application requires server-side canvas operations.

```sh
yarn add skia-canvas
```

--------------------------------

### Install LeaferJS using yarn

Source: https://www.leaferjs.com/ui/guide/install/leafer/start

Installs the LeaferJS package using the yarn package manager. This command achieves the same result as npm or pnpm installation but within the yarn ecosystem.

```sh
yarn add leafer
```

--------------------------------

### Install leafer-draw using pnpm

Source: https://www.leaferjs.com/ui/guide/install/draw/start

Installs the leafer-draw package using the pnpm package manager. pnpm is known for its efficient disk space usage and faster installations.

```sh
pnpm add leafer-draw
```

--------------------------------

### Install @napi-rs/canvas with npm, pnpm, yarn, or bun

Source: https://www.leaferjs.com/ui/guide/install/draw/node/napi

Instructions for installing the @napi-rs/canvas package, which provides Canvas API functionality in Node.js environments using Rust and Skia. It requires separate installation.

```shell
npm install @napi-rs/canvas

```

```shell
pnpm add @napi-rs/canvas

```

```shell
yarn add @napi-rs/canvas

```

```shell
bun add @napi-rs/canvas

```

--------------------------------

### Install @leafer-draw/worker with yarn

Source: https://www.leaferjs.com/ui/guide/install/draw/worker/start

Install the @leafer-draw/worker package using yarn. This command adds the package as a dependency to your project.

```sh
yarn add @leafer-draw/worker
```

--------------------------------

### Create an interactive engine with a draggable rectangle in Mini Program

Source: https://www.leaferjs.com/ui/guide/install/editor/miniapp/start

Demonstrates how to create a Leafer instance in a mini-program environment, add a draggable rectangle, and handle touch events. This example sets up a basic interactive canvas.

```typescript
import { Leafer, Rect } from '@leafer-editor/miniapp'

Page({
  onReady() {
    // this 为当前小程序页面实例
    const leafer = new Leafer({ view: 'leafer', eventer: this })

    const rect = new Rect({
      x: 100,
      y: 100,
      width: 100,
      height: 100,
      fill: '#32cd79',
      draggable: true,
    })

    leafer.add(rect)
  },
  receiveEvent() {}, // 约定接收交互事件的方法名
})
```

```xml
<canvas
    id="leafer"
    type="2d"
    catchtouchstart="receiveEvent"
    catchtouchmove="receiveEvent"
    catchtouchend="receiveEvent"
    catchtouchcancel="receiveEvent"
></canvas>
```

```css
page {
  height: 100%;
}
#leafer {
  width: 100%;
  height: 100%;
}
```

```json
{
  "navigationStyle": "custom",
  "pageOrientation": "auto"
}
```

--------------------------------

### Install @leafer-draw/worker with pnpm

Source: https://www.leaferjs.com/ui/guide/install/draw/worker/start

Install the @leafer-draw/worker package using pnpm. This command adds the package as a dependency to your project.

```sh
pnpm add @leafer-draw/worker
```

--------------------------------

### Install @leafer-draw/worker with npm

Source: https://www.leaferjs.com/ui/guide/install/draw/worker/start

Install the @leafer-draw/worker package using npm. This command adds the package as a dependency to your project.

```sh
npm install @leafer-draw/worker
```

--------------------------------

### Install LeaferJS using pnpm

Source: https://www.leaferjs.com/ui/guide/install/leafer/start

Installs the LeaferJS package using the pnpm package manager. This command is equivalent to the npm installation but utilizes pnpm's efficient dependency management.

```sh
pnpm add leafer
```

--------------------------------

### LeaferJS Basic Example in HTML

Source: https://www.leaferjs.com/ui/guide/framework/html

This complete HTML example demonstrates how to initialize LeaferJS, create a draggable rectangle with rounded corners, and add it to the canvas. It uses the web.min.js script for integration.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Demo | Leafer UI</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <script src="https://unpkg.com/leafer-ui@1.12.0/dist/web.min.js"></script>
  </head>
  <body></body>
  <script>
    var leafer = new LeaferUI.Leafer({ view: window })

    var rect = new LeaferUI.Rect({
      x: 100,
      y: 100,
      width: 200,
      height: 200,
      fill: '#32cd79',
      cornerRadius: [50, 80, 0, 80],
      draggable: true,
    })

    leafer.add(rect)
  </script>
</html>
```

--------------------------------

### Download CDN versions of @leafer-ui/miniapp

Source: https://www.leaferjs.com/ui/guide/install/ui/miniapp/start

Provides direct links to download the miniapp library from a CDN. This allows for local import of the library files, though it may limit the use of additional plugins.

```sh
https://unpkg.com/@leafer-ui/miniapp@1.12.0/dist/miniapp.module.js
https://unpkg.com/@leafer-ui/miniapp@1.12.0/dist/miniapp.module.min.js
```

--------------------------------

### Run Node.js Example

Source: https://www.leaferjs.com/ui/guide/install/ui/node/start

Commands to run the LeaferJS Node.js example using either Node.js (index.js) or Node.js with ES Modules support (index.mjs). After running, access the output at http://localhost:3000.

```sh
node index.js
```

```sh
node index.mjs
```

--------------------------------

### Install @leafer-editor/node with npm

Source: https://www.leaferjs.com/ui/guide/install/editor/node/start

Installs the @leafer-editor/node package using the Node Package Manager (npm). This command fetches and installs the package and its dependencies into your project's node_modules directory.

```sh
npm install @leafer-editor/node
```

--------------------------------

### Create an interactive Leafer UI engine (TypeScript)

Source: https://www.leaferjs.com/ui/guide/install/ui/start

Demonstrates creating a Leafer UI instance and adding a draggable rectangle. Requires ES2015 compatible browser. This example uses the import syntax.

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

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

const rect = new Rect({
    x: 100,
    y: 100,
    width: 200,
    height: 200,
    fill: '#32cd79',
    cornerRadius: [50, 80, 0, 80],
    draggable: true
})

leafer.add(rect)
```

--------------------------------

### Simplified LeaferJS App Creation with Editor Configuration

Source: https://www.leaferjs.com/ui/guide/advanced/app

A simplified approach to creating a LeaferJS App where the 'editor' configuration automatically sets up the necessary tree and sky layers. This example focuses on adding content to the tree layer and relies on the configuration to manage the editor instance. Dependencies include 'leafer-ui', '@leafer-in/editor', and '@leafer-in/viewport'.

```typescript
// #App结构 - 图形编辑器 [简化]
import { App, Frame, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件 //
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({
    view: window,
    fill: '#333',
    editor: {},  //  配置 editor 会自动创建并添加 app.editor 实例、tree 层、sky 层
    //  tree: { type: 'design' },
    //  sky: {}
})

app.tree.add(Frame.one({
    children: [
        Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 100, 100),
        Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 300, 100)
    ]
}, 100, 100, 500, 600))

// app.sky.add(app.editor = new Editor()) // 添加图形编辑器，用于选中元素进行编辑操作 //

```

--------------------------------

### Download LeaferJS Miniapp CDN versions

Source: https://www.leaferjs.com/ui/guide/install/draw/miniapp/start

Provides direct links to download the minified and module versions of the @leafer-draw/miniapp library. These can be imported locally, but may not support additional plugins.

```html
https://unpkg.com/@leafer-draw/miniapp@1.12.0/dist/miniapp.module.js

https://unpkg.com/@leafer-draw/miniapp@1.12.0/dist/miniapp.module.min.js
```

--------------------------------

### Install @leafer/worker using yarn

Source: https://www.leaferjs.com/ui/guide/install/leafer/worker/start

Installs the @leafer/worker package using yarn. This command is used to add the package as a dependency to your project.

```bash
yarn add @leafer/worker
```

--------------------------------

### Install @leafer/worker using npm

Source: https://www.leaferjs.com/ui/guide/install/leafer/worker/start

Installs the @leafer/worker package using npm. This command is used to add the package as a dependency to your project.

```bash
npm install @leafer/worker
```

--------------------------------

### Import LeaferJS using web.js

Source: https://www.leaferjs.com/ui/guide/framework/html

This example demonstrates including the non-minified LeaferJS library and accessing its features. It also highlights the use of aliases for event handlers like Image, PointerEvent, and DragEvent to prevent conflicts with browser global variables.

```html
<script src="https://unpkg.com/leafer-ui@1.12.0/dist/web.js"></script>
<script>
  const { Leafer } = LeaferUI // 全局变量，包含 leafer-ui的所有功能

  // Image、PointerEvent、DragEvent 会与浏览器的全局变量冲突，请使用以下别名代替
  const { MyImage, MyPointerEvent, MyDragEvent } = LeaferUI

  // ...
</script>
```

--------------------------------

### Download CDN Versions of @leafer-editor/miniapp

Source: https://www.leaferjs.com/ui/guide/install/editor/miniapp/start

Provides links to download the library files directly for import. Note that this method may not support additional plugins.

```html
https://unpkg.com/@leafer-editor/miniapp@1.12.0/dist/miniapp.module.js
https://unpkg.com/@leafer-editor/miniapp@1.12.0/dist/miniapp.module.min.js
```

--------------------------------

### Install leafer-editor using yarn

Source: https://www.leaferjs.com/ui/guide/install/editor/start

Installs the leafer-editor package using yarn. yarn is another popular package manager for JavaScript.

```sh
yarn add leafer-editor
```

--------------------------------

### Install leafer-editor using pnpm

Source: https://www.leaferjs.com/ui/guide/install/editor/start

Installs the leafer-editor package using pnpm. pnpm is a fast, space-efficient package manager for JavaScript.

```sh
pnpm add leafer-editor
```

--------------------------------

### Install @napi-rs/canvas with bun

Source: https://www.leaferjs.com/ui/guide/install/editor/node/napi

Install the @napi-rs/canvas package using bun. This package provides Skia rendering capabilities in a Node.js environment, acting as a replacement for the Canvas API with high performance and zero system dependencies, as it's built with Rust.

```shell
bun add @napi-rs/canvas
```

--------------------------------

### Install LeaferJS using bun

Source: https://www.leaferjs.com/ui/guide/install/leafer/start

Installs the LeaferJS package using the bun package manager. This command is a modern alternative for managing JavaScript dependencies.

```sh
bun add leafer
```

--------------------------------

### Implement a Graphics Editor App Structure in Mini Program

Source: https://www.leaferjs.com/ui/guide/install/editor/miniapp/start

Sets up a Leafer App with editor plugins, specifying canvas elements for tree and sky layers, and enabling mobile optimization. This example is suited for complex editing scenarios.

```typescript
import { App, Rect } from '@leafer-editor/miniapp'

Page({
  onReady() {
    // this 为当前小程序页面实例
    const app = new App({
      view: 'leafer',
      mobile: true, // 优化手机端体验
      tree: { canvas: 'leafer-tree' }, // 需指定canvas
      sky: { canvas: 'leafer-sky' },
      editor: {}, // 会自动创建 editor实例
      eventer: this,
    })

    const rect = new Rect({
      x: 100,
      y: 100,
      width: 100,
      height: 100,
      fill: '#32cd79',
      editable: true,
    })

    app.tree.add(rect)
  },
  receiveEvent() {}, // 约定接收交互事件的方法名
})
```

```xml
<view
    id="leafer"
    catchtouchstart="receiveEvent"
    catchtouchmove="receiveEvent"
    catchtouchend="receiveEvent"
    catchtouchcancel="receiveEvent"
>
<canvas id="leafer-tree"  type="2d"></canvas>
<canvas id="leafer-sky" type="2d"></canvas>
</view>
```

```css
page {
  height: 100%;
}
#leafer {
  width: 100%;
  height: 100%;
}
#leafer-tree {
  position: absolute;
  width: 100%;
  height: 100%;
}
#leafer-sky {
  position: absolute;
  width: 100%;
  height: 100%;
}
```

```json
{
  "navigationStyle": "custom",
  "pageOrientation": "auto"
}
```

--------------------------------

### Install LeaferJS using npm

Source: https://www.leaferjs.com/ui/guide/install/leafer/start

Installs the LeaferJS package using the npm package manager. This is a standard method for adding JavaScript libraries to a project.

```sh
npm install leafer
```