Template Host Demo

This example demonstrates how a template page consumes a runtime generated via the "new generator workflow":

• Only the canvas is mounted on the left.
• Only partial parameters are mounted on the right.
• The host controls visible parameters via PanelFilter.
• The host consumes template JSON via sdk.template.parse() / toRuntimeSnapshot().
• The host can read state and trigger exports.

Online Demo

• Open Template Host Demo

Minimal Host Integration Example

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,
});

What This Demo Validates

1. New generators do not need to rely on the old bridge to enter template pages.
2. Template pages do not need to copy the generator's internal DOM.
3. Parameter panels can be tailored via schemas and filters.
4. Template JSON can restore state and parameter rules via a unified protocol.
5. Runtime state can be read, partially updated, and exported by the host.

Recommended Usage

• Use starter-html-runtime or starter-vue-runtime to create new generators.
• Validate business logic in the full page first.
• Integrate into the template host using embed mode.
• Use sdk.template.build() to export template JSON when needed.
• Postpone old generator refactoring to the compatibility governance phase.