Live Example Tab

Components can surface a dedicated Example tab with one or more live demos. Point at any URL you control (a fixture page, a hosted demo, a StackBlitz project) and compodocx renders it inside an iframe alongside the component’s API and source.

The marker

Use an HTML-style <example-url> marker inside the component’s class JSDoc. Multiple markers render as multiple iframes inside one Example tab. The tab is hidden automatically when no marker is present.

/**
 * A selectable card surface.
 *
 * <example-url>https://demos.example.com/cards/article</example-url>
 * <example-url>https://demos.example.com/cards/action</example-url>
 */
@Component({ ... })
export class CardComponent { ... }

Each URL renders as <iframe class="cdx-example-container">. Browsers that don’t allow iframes show the localized no-iframes fallback message.

Example URLs vs. @example

Both can coexist on the same component. @example blocks render as syntax-highlighted code under an Examples section on the Info tab. <example-url> renders runnable demos in a separate Example tab. Use @example for snippets readers should copy, <example-url> for behavior they want to see.

Hosting the demo

The marker accepts any URL: your own demo site, a CodeSandbox, a StackBlitz project, or a static fixture deployed alongside the docs. compodocx does not bundle a runtime sandbox; it links to whatever you already host.