Editor

Rich text editing using native contenteditable. Axiom01 provides the semantic shell; bind toolbar actions through your editor runtime instead of deprecated browser commands.

Basic Rich Text Editor

Formatting

Type here to edit. Use the toolbar structure as the semantic shell for your chosen editor runtime.

<fieldset class="segmented" role="group" aria-label="Formatting">
  <legend class="sr">Formatting</legend>
  <button type="button" aria-label="Bold" aria-pressed="false"><b>B</b></button>
  <button type="button" aria-label="Italic" aria-pressed="false"><i>I</i></button>
</fieldset>

<div role="textbox"
     aria-label="Message"
     aria-multiline="true"
     contenteditable="true">
  <p>Initial content here</p>
</div>

Read the Content

const editor = document.querySelector('[contenteditable]');

// Get plain text
const text = editor.textContent;

// Get HTML
const html = editor.innerHTML;

// Clear
editor.innerHTML = '';

Accessibility

  • Add role="textbox" and aria-multiline="true" on the editable element
  • aria-label is required — contenteditable cannot use a native <label>
  • Announce formatting state with aria-pressed on toolbar buttons
  • For production, consider a dedicated accessible editor library (Tiptap, Quill, ProseMirror)

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Editor component is designed for versatile implementation across modern web applications. Ideal scenarios include:

  • Dashboards & Admin Panels - Structured data presentation and interface control.
  • Content Management Systems - Organizing complex information hierarchies and media.
  • E-Commerce Platforms - Enhancing product discovery and user workflows.
  • Marketing Sites - Highlighting key product offerings cleanly and effectively.
  • SaaS Applications - Delivering native-feeling, responsive app experiences.