Amplience Content Form Preview

A VS Code extension that live-previews an Amplience JSON content type schema by hosting the dc-extension-content-form inside a webview and acting as its parent frame.

Features

• Live preview of any Amplience content type schema in a side panel.
• Reloads automatically as you edit the schema (debounced).
• Resolves local file $refs relative to the schema. Optional opt-in for remote $refs.
• Toolbar: reload, reset model, zoom, toggle read-only.

Installation

The extension is not yet published to the Marketplace. The easiest way to install it is to grab a pre-built .vsix from the GitHub Releases page, then install it locally via either:

• Command palette → Extensions: Install from VSIX… → pick the file.
• Terminal: code --install-extension amplience-content-form-preview-<version>.vsix

Reload VS Code afterwards.

Usage

1. Open a content type schema .json file.
2. Run Amplience: Open Content Form Preview from the command palette, or click the preview icon in the editor title bar.
3. Edit the schema — the form re-renders on the fly.

Settings

Setting	Default	Description
amplienceFormPreview.formSource	hosted	hosted or custom.
amplienceFormPreview.hostedFormUrl	https://content-form.extensions.content.amplience.net/	Hosted form URL.
amplienceFormPreview.customFormUrl	http://localhost:5173	Custom URL — useful when running dc-extension-content-form locally with pnpm dev.
amplienceFormPreview.followActiveEditor	true	Re-bind the preview to the active editor.
amplienceFormPreview.allowRemoteRefs	false	Allow $ref to follow http(s) URIs. Security-sensitive.
amplienceFormPreview.debounceMs	200	Debounce before reloading on edit.
amplienceFormPreview.defaultLocales	[{ "locale": "en-GB" }]	Locales surfaced as sdk.locales.available.
amplienceFormPreview.instanceParams	{}	Merged into params.instance (e.g. useFullWidth, collapseByDefault, slotStatus, showValidation).
amplienceFormPreview.compileEffectiveSchema	true	Compile the schema into its "effective" form (allOf merged, partials inlined) using @amplience/content-model-js before sending it to the form.
amplienceFormPreview.schemaGlob	**/*.json	Glob used to discover sibling schemas in the workspace for cross-schema $ref resolution.
amplienceFormPreview.schemaExcludeGlob	**/{node_modules,dist,build,...}/**	Glob excluded from schema discovery.

Limitations

This extension stubs everything that requires a real Amplience Hub. Choosers and lookups now resolve to synthetic dummy data rather than empty payloads, so picker-driven fields render their cards and you can iterate on layout — but nothing is persisted and the data is not real:

• Asset library / media pickers — resolve to a single dummy image/video asset (with a placeholder thumbnail).
• Content links and content references — resolve to a dummy content item whose _meta.schema matches the requested content type URI, so the chosen card renders.
• UI extensions (ui:extension) — not yet supported. A future release may add a local extension-lookup feature.

Pure schema-driven fields (text, number, boolean, enum, arrays, nested objects, oneOf/allOf) render fully.

Build from source (internal only)

If no release is available for your version, or you want to bundle local changes, build the .vsix yourself:

git clone https://github.com/amplience/vscode-plugin-amplience-content-form.git
cd vscode-plugin-amplience-content-form
pnpm install
pnpm build
pnpm dlx @vscode/vsce package --no-dependencies

@amplience/content-model-js is a private package. You'll need a GitHub PAT with read:packages scope in ~/.npmrc:

//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN

The package step produces amplience-content-form-preview-<version>.vsix. Install it the same way as a release build (command palette or code --install-extension).

Run from source (Extension Development Host)

If you'd rather hack on the extension instead of installing it, open the folder in VS Code and press F5. A new "[Extension Development Host]" window launches with the extension active and the samples/ folder open.

A sample schema lives at samples/sample-content-type.json.

Development

pnpm install
pnpm build      # compile extension + webview shim
pnpm watch      # rebuild on change

Press F5 in VS Code to launch an Extension Development Host.

To preview against a locally running form renderer:

# in dc-extension-content-form
pnpm dev

Then set:

"amplienceFormPreview.formSource": "custom",
"amplienceFormPreview.customFormUrl": "http://localhost:5173"