Template Host Demo

这个示例演示模板页如何消费一个“新生成器链路”生成的 runtime：

左侧只挂载 canvas
右侧只挂载部分参数面板
宿主通过 PanelFilter 控制可见参数
宿主通过 sdk.template.parse() / toRuntimeSnapshot() 消费模板 JSON
宿主可以读取状态并触发导出

在线 Demo

打开 Template Host Demo

宿主接入最小示例

const runtime = window.__GENERATOR_RUNTIME__
const sdk = GeneratorSDK.init({ appKey: 'your_app_key', env: 'prod' })

const importedTemplate = sdk.template.parse(templateText)
const snapshot = sdk.template.toRuntimeSnapshot(importedTemplate)

await runtime.mount({
  mode: 'embed',
  target: 'canvas',
  container: canvasContainer,
  state: snapshot.state,
})

await runtime.mount({
  mode: 'embed',
  target: 'panel',
  container: panelContainer,
  state: snapshot.state,
  panelFilter: snapshot.panelFilter,
})

这个 demo 验证了什么

新生成器不需要先依赖老 bridge 才能进入模板页
模板页不需要复制生成器内部 DOM
参数面板可以通过 schema 和 filter 裁剪
模板 JSON 可以通过统一协议恢复状态和参数裁剪规则
运行时状态可以被宿主读取、局部更新和导出

Template Host Demo ​

在线 Demo ​

宿主接入最小示例 ​

这个 demo 验证了什么 ​

推荐用法 ​

Template Host Demo

在线 Demo

宿主接入最小示例

这个 demo 验证了什么

推荐用法