Common examples

Every @basemark/common directive, in one page. Rendered server-side via renderMarkdownToHtml() into static HTML, then upgraded client-side into real custom elements — the same two-step path every narrative page on this site uses. This exact markdown also renders unchanged through examples/vanilla's renderMarkdown() and examples/react's MarkdownRenderer.

Alert

Badge

Default Secondary Outline Destructive

Button

Default Secondary Outline Ghost Link Destructive Small Large

Separator

Content above.

Content below.

Table

Plain GFM tables render with no directive needed:

Accordion

Carousel

Any direct child block works as a slide — card here, but a bare image works the same way (next section).

Bare images as slides:

Popover

Video

URL-only — provider and embed ID are detected automatically:

Audio

Also URL-only, and provider-agnostic:

Card

Columns

Tabs

Code blocks

Fenced code blocks get syntax highlighting via rehype-highlight, wired into @basemark/core's parse pipeline:

import { createRegistry } from '@basemark/core';
import { registerCommonComponents } from '@basemark/common';

const registry = createRegistry();
registerCommonComponents(registry);

Appendix: failing visibly

Basemark fails loudly, not silently, when a directive is wrong. An unknown directive:

A container missing its closing fence — everything below gets captured inside it instead of rendering separately, and the error banner shows exactly what was swallowed: