Rich text (WYSIWYG)

CSSSizing: content.js

Wrap any block of generated HTML — a rich-text editor’s output, a CMS body, a printed document — in wysiwyg to get readable prose styled with the design system’s tokens (built on @tailwindcss/typography).

Rich text + size controls

Open ↗

<div class="max-w-2xl">
  <!-- content-size controls (content.js) -->
  <div class="mb-5 flex items-center gap-2">
    <button type="button" class="button-secondary" data-set-content-size="minus">A−</button>
    <button type="button" class="button-secondary" data-set-content-size="reset">A</button>
    <button type="button" class="button-secondary" data-set-content-size="plus">A+</button>
  </div>

  <article class="wysiwyg" data-content>
    <h1>Design tokens</h1>

    <p>
      The design system exposes a layered set of <strong>design tokens</strong> — primitives, then semantic tokens, then
      action tokens — so a whole product can be re-themed from one place.
    </p>

    <h2>Why tokens?</h2>

    <ul>
      <li>Consistency across every screen and app</li>
      <li>Automatic light and dark theming</li>
      <li>One source of truth for color, type and spacing</li>
    </ul>

    <blockquote>Build with semantic tokens, never raw hex values.</blockquote>

    <p>
      Use utilities like <code>bg-background</code> and <code>text-foreground</code>, and read more in the
      <a href="#">foundations</a>.
    </p>

    <pre><code>&lt;div class="bg-background text-foreground"&gt;…&lt;/div&gt;</code></pre>
  </article>
</div>

Usage

<article class="wysiwyg">
  <h1>Title</h1>
  <p>Body copy, <a href="#">links</a>, <code>code</code>, lists, quotes, tables…</p>
</article>

Headings, links, quote borders, code and table borders all map to semantic tokens, so rich text looks right in both light and dark themes automatically.

Reader font size

Add data-content to the prose container and data-set-content-size buttons to let readers scale the text. Sizes step through wysiwyg-sm → wysiwyg-2xl and the choice is saved (via window._storage.contentFontSize).

<button data-set-content-size="minus">A−</button>
<button data-set-content-size="reset">A</button>
<button data-set-content-size="plus">A+</button>

<article class="wysiwyg" data-content>…</article>

Attribute	Role
`wysiwyg`	Prose styling. Fixed sizes: `wysiwyg-sm` … `wysiwyg-2xl`.
`data-content`	Marks the container whose size the buttons control.
`data-set-content-size="minus\|reset\|plus"`	Size controls (needs `content.js`).