# @basenative/visual-builder 中文文档

规范地址：https://npmcn.com/package/%40basenative/visual-builder/

版本：3\.0\.0
npm 元数据更新时间：2026-10-31T13:46:48.299Z
中文译文更新时间：2026-10-31T16:56:26.493Z
软件包许可：Apache-2\.0

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40basenative/visual-builder
原文对照：https://npmcn.com/package/%40basenative/visual-builder/?lang=original
项目主页：https://github.com/DuganLabs/BaseNative/tree/main/packages/visual-builder#readme
源码仓库：https://github.com/DuganLabs/BaseNative

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：46.6 kB，10 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2026-03-20T05:27:54.372Z
- 最新版本发布：2026-10-31T13:46:47.944Z
- 已发布版本数：11（近 12 个月 11 个）

## 中文简介

BaseNative组件的无代码模板构建器

## 安装

```sh
npm install @basenative/visual-builder
```

也可以使用：`pnpm add @basenative/visual-builder`、`yarn add @basenative/visual-builder`、`bun add @basenative/visual-builder`

## README

# @basenative / visual builder构建

> 无代码拖放画布，用于可视化地组合BaseNative模板

部分 [BaseNative](https://github.com/DuganLabs/basenative) 生态系统——基于信号的web运行时，基于原生HTML。

## 安装

```bash
npm install @basenative/visual-builder
```

## 快速入门

```js
import {
  createCanvas,
  renderCanvas,
  serialize,
  deserialize,
  exportToHTML,
  createComponentPalette,
} from '@basenative/visual-builder';

// Create a canvas
const canvas = createCanvas({ width: 1280, height: 800, gridSize: 8 });

// Add nodes
const buttonId = canvas.addNode({
  type: 'button',
  props: { label: 'Click me', variant: 'primary' },
  position: { x: 100, y: 100 },
  size: { width: 120, height: 40 },
});

// Move, update, and remove nodes
canvas.updateNode(buttonId, { props: { label: 'Submit' } });
canvas.moveNode(buttonId, { x: 200, y: 150 });

// Undo/redo
canvas.undo();
canvas.redo();

// Export to HTML
const html = exportToHTML(canvas.getNodes());
console.log(html);
```

## 序列化

```js
// Save canvas state
const json = serialize(canvas.getNodes());
localStorage.setItem('canvas', JSON.stringify(json));

// Restore canvas state
const restored = deserialize(JSON.parse(localStorage.getItem('canvas')));
```

## API

### `createCanvas(options?)`

创建可视化构建器画布。选项: `width` (默认:1024), `height` (默认:768), `gridSize` (默认值:8)。

返回:

-   `addNode(node)` -添加一个节点到画布。返回节点ID。
-   `removeNode(id)` —按节点ID移除节点。
-   `updateNode(id, patch)` 将部分更新合并到节点的属性中。
-   `moveNode(id, position)` -更新节点 `{ x, y }` 的位置。
-   `getNode(id)` —按ID返回单个节点。
-   `getNodes()` —以数组形式返回所有节点。
-   `undo()` / `redo()` -撤消/重做最后一个画布动作。
-   `subscribe(fn)` -订阅画布事件 `(event, data)`． 返回退订函数。
-   `clear()` -从画布中删除所有节点。

### `renderCanvas(nodes, options?)` / `renderNode(node, options?)`

将画布节点呈现为HTML字符串以进行预览。

### `serialize(nodes)` / `deserialize(json)`

将节点数组转换为可序列化的JSON结构并返回。

### `exportToHTML(nodes, options?)` / `importFromHTML(html)`

将画布导出为独立的HTML片段，或者从HTML字符串导入节点。

### `createComponentPalette(options?)`

为构建器UI创建可用组件类型的调色板。选项: `components` 要注册的组件定义数组。

## 许可证

apache - 2.0

## 常见问题

### @basenative/visual-builder 是什么？

BaseNative组件的无代码模板构建器

### 如何安装 @basenative/visual-builder？

在项目目录运行 npm install @basenative/visual-builder，或使用 pnpm add / yarn add / bun add。

### @basenative/visual-builder 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @basenative/visual-builder 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @basenative/visual-builder 可以商用吗？

@basenative/visual-builder 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @basenative/visual-builder 还在维护吗？

最新版本 3\.0\.0 发布于 2026/10/31（2 天前）；至今共发布 11 个版本，其中过去 12 个月发布了 11 个；首次发布于 2026/03/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。