Code components - Workbench preview build

Workbench can export standalone preview artifacts for a component or page into the output directory you pass with --out-dir.

Component target

npx canvas-workbench preview-build --component-path components/card/component.yml --out-dir .canvas-preview/card

Component exports write:

• component-default.html
• component-mock-01.html, component-mock-02.html, and so on for each mock
• manifest.json

Page target

npx canvas-workbench preview-build --page-path pages/home.json --out-dir .canvas-preview/home

Page exports write:

• page-default.html
• manifest.json

Path constraints

--component-path must point to a component metadata file discovered inside the configured componentDir. --page-path must point to a page JSON file inside the configured pagesDir.

Paths elsewhere in the project are not supported, even when the files exist, because preview discovery, mocks, and @/ module resolution are scoped to those configured roots. If your files live under a different tree, update canvas.config.json first.

Manifest format

manifest.json is target-specific:

• Component manifests include entries.default and entries.mocks.
• Page manifests include only entries.default.
• Each entry includes path and label.
• Entry path values are relative to the export directory, so the bundle stays portable when you move or copy it.
• The default entry uses Default, and mock entries use each mock name.

Command output

The command prints one JSON payload to stdout with request, target, renderMode (interactive), outDir, manifestPath, summary counts, warnings, and errors.

Each exported HTML file is self-contained. Local asset imports, such as fonts and images, are bundled inline as data URLs. Binary assets, such as WOFF2 and PNG files, use base64 encoding in those URLs.