FormsGlass surface

RichTextEditor

Frames rich text toolbar and editing compositions.

View preview API reference View in Figma

FrameworksAstro · React · Elements

Registry commandlumen add RichTextEditor

InteractionEnhanced runtime

Design sourceLinked component node

See it and copy it

Framework example

Choose Astro, React, or Elements to compare native usage against the shared visual output. Each example assumes the framework-level setup is already complete.

v2.0 Release Notes

Draft release notes...

Added new rich text toolbar
Improved editor layout

View RichTextEditor code

Framework usage

Switch targets to compare the adapter code. This live preview runs the Astro example. React and Elements use their own behavior APIs; complete the matching framework setup before copying an example.

---
import { Button, ButtonGroup, Icon, RichTextEditor } from '@santi020k/lumen-astro'
---

<RichTextEditor>
  <div role="toolbar" aria-label="Editor toolbar">
    <ButtonGroup>
      <Button data-ui-editor-command="bold" type="button" variant="ghost" size="icon" aria-label="Bold">
        <Icon name="bold" decorative />
      </Button>
      <Button data-ui-editor-command="italic" type="button" variant="ghost" size="icon" aria-label="Italic">
        <Icon name="italic" decorative />
      </Button>
      <Button data-ui-editor-command="underline" type="button" variant="ghost" size="icon" aria-label="Underline">
        <Icon name="underline" decorative />
      </Button>
      <Button data-ui-editor-command="strikeThrough" type="button" variant="ghost" size="icon" aria-label="Strike">
        <!-- cspell:disable-next-line -->
        <Icon name="strikethrough" decorative />
      </Button>
    </ButtonGroup>
    <ButtonGroup>
      <Button data-ui-editor-command="insertUnorderedList" type="button" variant="ghost" size="icon" aria-label="Bullet List">
        <Icon name="list" decorative />
      </Button>
      <Button data-ui-editor-command="insertOrderedList" type="button" variant="ghost" size="icon" aria-label="Numbered List">
        <Icon name="list-ordered" decorative />
      </Button>
    </ButtonGroup>
    <ButtonGroup>
      <Button data-ui-editor-command="justifyLeft" type="button" variant="ghost" size="icon" aria-label="Align left">
        <Icon name="align-left" decorative />
      </Button>
      <Button data-ui-editor-command="justifyCenter" type="button" variant="ghost" size="icon" aria-label="Align center">
        <Icon name="align-center" decorative />
      </Button>
      <Button data-ui-editor-command="justifyRight" type="button" variant="ghost" size="icon" aria-label="Align right">
        <Icon name="align-right" decorative />
      </Button>
    </ButtonGroup>
    <ButtonGroup>
      <Button data-ui-editor-command="unlink" type="button" variant="ghost" size="icon" aria-label="Remove link">
        <Icon name="unlink" decorative />
      </Button>
      <Button data-ui-editor-command="removeFormat" type="button" variant="ghost" size="icon" aria-label="Clear formatting">
        <Icon name="remove-formatting" decorative />
      </Button>
    </ButtonGroup>
    <ButtonGroup>
      <Button data-ui-editor-command="undo" type="button" variant="ghost" size="icon" aria-label="Undo">
        <Icon name="undo-2" decorative />
      </Button>
      <Button data-ui-editor-command="redo" type="button" variant="ghost" size="icon" aria-label="Redo">
        <Icon name="redo-2" decorative />
      </Button>
    </ButtonGroup>
  </div>
  <div
    contenteditable="true"
    data-ui-rich-text-editable
    role="textbox"
    aria-label="Release notes"
    aria-multiline="true"
    spellcheck="true"
  >
    <h2>v2.0 Release Notes</h2>
    <p>Draft release notes...</p>
    <ul>
      <li>Added new rich text toolbar</li>
      <li>Improved editor layout</li>
    </ul>
  </div>
</RichTextEditor>

'use client'

import { Button, RichTextEditor } from '@santi020k/lumen-react'
import { useRichTextEditor } from '@santi020k/lumen-react'

export function Editor() {
  const editor = useRichTextEditor()

  return (
    <RichTextEditor {...editor.rootProps}>
      <div role="toolbar" aria-label="Formatting">
        <Button {...editor.getCommandProps('bold')} aria-label="Bold" size="icon">B</Button>
        <Button {...editor.getCommandProps('italic')} aria-label="Italic" size="icon">I</Button>
        <Button {...editor.getCommandProps('insertUnorderedList')} aria-label="Bulleted list" size="sm">List</Button>
      </div>
      <div {...editor.getEditableProps()}>
        <p>Start writing...</p>
      </div>
    </RichTextEditor>
  )
}

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<lumen-rich-text-editor>
  <div role="toolbar" aria-label="Editor toolbar">
    <lumen-button-group>
      <lumen-button data-ui-editor-command="bold" type="button" variant="ghost" size="icon" aria-label="Bold">
        <lumen-icon name="bold" decorative></lumen-icon>
      </lumen-button>
      <lumen-button data-ui-editor-command="italic" type="button" variant="ghost" size="icon" aria-label="Italic">
        <lumen-icon name="italic" decorative></lumen-icon>
      </lumen-button>
      <lumen-button data-ui-editor-command="underline" type="button" variant="ghost" size="icon" aria-label="Underline">
        <lumen-icon name="underline" decorative></lumen-icon>
      </lumen-button>
      <lumen-button data-ui-editor-command="strikeThrough" type="button" variant="ghost" size="icon" aria-label="Strike">
        <!-- cspell:disable-next-line -->
        <lumen-icon name="strikethrough" decorative></lumen-icon>
      </lumen-button>
    </lumen-button-group>
    <lumen-button-group>
      <lumen-button data-ui-editor-command="insertUnorderedList" type="button" variant="ghost" size="icon" aria-label="Bullet List">
        <lumen-icon name="list" decorative></lumen-icon>
      </lumen-button>
      <lumen-button data-ui-editor-command="insertOrderedList" type="button" variant="ghost" size="icon" aria-label="Numbered List">
        <lumen-icon name="list-ordered" decorative></lumen-icon>
      </lumen-button>
    </lumen-button-group>
    <lumen-button-group>
      <lumen-button data-ui-editor-command="justifyLeft" type="button" variant="ghost" size="icon" aria-label="Align left">
        <lumen-icon name="align-left" decorative></lumen-icon>
      </lumen-button>
      <lumen-button data-ui-editor-command="justifyCenter" type="button" variant="ghost" size="icon" aria-label="Align center">
        <lumen-icon name="align-center" decorative></lumen-icon>
      </lumen-button>
      <lumen-button data-ui-editor-command="justifyRight" type="button" variant="ghost" size="icon" aria-label="Align right">
        <lumen-icon name="align-right" decorative></lumen-icon>
      </lumen-button>
    </lumen-button-group>
    <lumen-button-group>
      <lumen-button data-ui-editor-command="unlink" type="button" variant="ghost" size="icon" aria-label="Remove link">
        <lumen-icon name="unlink" decorative></lumen-icon>
      </lumen-button>
      <lumen-button data-ui-editor-command="removeFormat" type="button" variant="ghost" size="icon" aria-label="Clear formatting">
        <lumen-icon name="remove-formatting" decorative></lumen-icon>
      </lumen-button>
    </lumen-button-group>
    <lumen-button-group>
      <lumen-button data-ui-editor-command="undo" type="button" variant="ghost" size="icon" aria-label="Undo">
        <lumen-icon name="undo-2" decorative></lumen-icon>
      </lumen-button>
      <lumen-button data-ui-editor-command="redo" type="button" variant="ghost" size="icon" aria-label="Redo">
        <lumen-icon name="redo-2" decorative></lumen-icon>
      </lumen-button>
    </lumen-button-group>
  </div>
  <div
    contenteditable="true"
    data-ui-rich-text-editable
    role="textbox"
    aria-label="Release notes"
    aria-multiline="true"
    spellcheck="true">
    <h2>v2.0 Release Notes</h2>
    <p>Draft release notes...</p>
    <ul>
      <li>Added new rich text toolbar</li>
      <li>Improved editor layout</li>
    </ul>
  </div>
</lumen-rich-text-editor>

Edit RichTextEditor in browser

Framework differences

React: Connect useRichTextEditor rootProps, getCommandProps, and getEditableProps. The same example appears in the hook reference.

Choose your target

Add this component

Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.

pnpm add @santi020k/lumen-astro

pnpm add @santi020k/lumen-astro

lumen add RichTextEditor

lumen add RichTextEditor

pnpm add @santi020k/lumen-react

pnpm add @santi020k/lumen-react

lumen add RichTextEditor --target react

lumen add RichTextEditor --target react

pnpm add @santi020k/lumen-elements

pnpm add @santi020k/lumen-elements

lumen add RichTextEditor --target elements

lumen add RichTextEditor --target elements

Glass

Add the glass prop to apply the shared blur, saturation, border, and highlight tokens. Glass reads best over vivid content, so place the surface above imagery or color.

Draft the glass release notes... the editing area stays translucent so the backdrop glows through.

View RichTextEditor code

Framework usage

Switch targets to compare the adapter code. This live preview runs the Astro example. React and Elements use their own behavior APIs; complete the matching framework setup before copying an example.

---
import { Button, ButtonGroup, Icon, RichTextEditor } from '@santi020k/lumen-astro'
---

<div class="docs-glass-demo">
  <RichTextEditor glass>
    <div role="toolbar" aria-label="Formatting">
      <ButtonGroup>
        <Button data-ui-editor-command="bold" type="button" variant="ghost" size="icon" aria-label="Bold">
          <Icon name="bold" decorative />
        </Button>
        <Button data-ui-editor-command="italic" type="button" variant="ghost" size="icon" aria-label="Italic">
          <Icon name="italic" decorative />
        </Button>
        <Button data-ui-editor-command="underline" type="button" variant="ghost" size="icon" aria-label="Underline">
          <Icon name="underline" decorative />
        </Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button data-ui-editor-command="insertUnorderedList" type="button" variant="ghost" size="icon" aria-label="Bullet List">
          <Icon name="list" decorative />
        </Button>
      </ButtonGroup>
    </div>
    <div contenteditable="true">Draft the glass release notes... the editing area stays translucent so the backdrop glows through.</div>
  </RichTextEditor>
</div>

'use client'

import { Button, RichTextEditor } from '@santi020k/lumen-react'
import { useRichTextEditor } from '@santi020k/lumen-react'

export function Editor() {
  const editor = useRichTextEditor()

  return (
    <RichTextEditor {...editor.rootProps}>
      <div role="toolbar" aria-label="Formatting">
        <Button {...editor.getCommandProps('bold')} aria-label="Bold" size="icon">B</Button>
        <Button {...editor.getCommandProps('italic')} aria-label="Italic" size="icon">I</Button>
        <Button {...editor.getCommandProps('insertUnorderedList')} aria-label="Bulleted list" size="sm">List</Button>
      </div>
      <div {...editor.getEditableProps()}>
        <p>Start writing...</p>
      </div>
    </RichTextEditor>
  )
}

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<div class="docs-glass-demo">
  <lumen-rich-text-editor glass>
    <div role="toolbar" aria-label="Formatting">
      <lumen-button-group>
        <lumen-button data-ui-editor-command="bold" type="button" variant="ghost" size="icon" aria-label="Bold">
          <lumen-icon name="bold" decorative></lumen-icon>
        </lumen-button>
        <lumen-button data-ui-editor-command="italic" type="button" variant="ghost" size="icon" aria-label="Italic">
          <lumen-icon name="italic" decorative></lumen-icon>
        </lumen-button>
        <lumen-button data-ui-editor-command="underline" type="button" variant="ghost" size="icon" aria-label="Underline">
          <lumen-icon name="underline" decorative></lumen-icon>
        </lumen-button>
      </lumen-button-group>
      <lumen-button-group>
        <lumen-button data-ui-editor-command="insertUnorderedList" type="button" variant="ghost" size="icon" aria-label="Bullet List">
          <lumen-icon name="list" decorative></lumen-icon>
        </lumen-button>
      </lumen-button-group>
    </div>
    <div contenteditable="true">Draft the glass release notes... the editing area stays translucent so the backdrop glows through.</div>
  </lumen-rich-text-editor>
</div>

Edit RichTextEditor in browser

API reference

Lumen-specific props and runtime attributes for the Astro primitive. Use the framework differences above and the copyable examples for React composition and Elements attributes; the public adapter types define their supported contracts.

Attribute	Values	Default	Description
glass	boolean \| "subtle" \| "strong"	false	Applies the tokenized liquid-glass surface treatment with backdrop-filter fallbacks; "subtle" and "strong" adjust the fill intensity.
data-ui-editor-native-state	boolean string	"true"	Set false when an external engine owns toolbar state; React commandHandler disables it by default.
data-ui-editor-command	string	-	Runs formatting, block, alignment, history, link, list, or custom commands and emits ui:editor-command.
data-ui-editor-value	string	-	Supplies a value for commands such as formatBlock and createLink. Native select values are read automatically.
data-ui-rich-text-editable	data attribute	-	Marks the editable content surface for shortcuts, state syncing, and ui:editor-change events.
class, className	string	""	Merges custom classes with the generated ui-* root classes.
...native attributes	HTML attributes	-	Forwards standard attributes to the root element unless the component consumes them.

Runtime events

CustomEvents dispatched by the Astro UIPrimitives runtime for this component.

Event	Target	Detail	When
ui:editor-command-request	RichTextEditor root ([data-ui-rich-text-editor])	{ command: string, executed: boolean, value?: string }	Cancelable request before execution. Prevent default and set detail.executed for external engine ownership.
ui:editor-command	RichTextEditor root ([data-ui-rich-text-editor])	{ command: string, executed: boolean, value?: string }	Fires after a toolbar control or keyboard shortcut runs an editor command.
ui:editor-change	RichTextEditor root ([data-ui-rich-text-editor])	{ html: string, text: string }	Fires after editable content changes or an editor command runs.