---
title: Code components - Workbench preview build
description: Export standalone Workbench preview artifacts for components and pages.
---

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

## Component target

```bash
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

```bash
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.
