🎮 Playground

Try Editora with a live, working editor sample

Test 1: toolbar-items Attribute

Using toolbar-items="undo redo | bold italic underline"

Expected: Toolbar should show: Undo, Redo | Bold, Italic, Underline

Test 2: Full Toolbar (All Native + Enterprise Plugins)

Using toolbar-items with multiple groups, all native plugins, and all enterprise workflow plugins
Enterprise set included here: mentions trackChanges version-diff conditional-content data-binding content-rules citations approval-workflow pii-redaction smart-paste blocks-library doc-schema translation-workflow slash-commands spellCheck a11yChecker comments mergeTag template image document-manager
Note: image is the Media Manager plugin id in Web Components.

Full Feature Test

This editor should have a complete toolbar with all groups visible.

  • Undo/Redo buttons
  • Text formatting (Bold, Italic, Underline, Strikethrough)
  • Colors (Text Color, Background Color)
  • Typography (Font Size, Font Family)
  • Block types (Heading)
  • Alignment
  • Lists
  • Insert (Link, Image, Table)
  • Code and Blockquote
  • Clear Formatting

Test 2B: Full Toolbar (All Native + Enterprise Plugins, Dark Mode)

Same feature coverage as Test 2, rendered in theme="dark".
Enterprise set included here: mentions trackChanges version-diff conditional-content data-binding content-rules citations approval-workflow pii-redaction smart-paste blocks-library doc-schema translation-workflow slash-commands spellCheck a11yChecker comments mergeTag template image document-manager

Dark Mode Full Feature Test

This editor should show the same toolbar groups as Test 2 with dark-mode visuals.

  • All core formatting and insertion controls
  • All enterprise workflow toolbar commands
  • Dark-theme styling for toolbar, dialogs, and panels

Test 3: Auto Toolbar (No toolbar-items specified)

No toolbar-items attribute - should automatically create toolbar from registered plugins

Expected: Toolbar should auto-generate from the 4 specified plugins

Test 5: Readonly Toggle

Toggle the editor between editable and readonly states using the button below.

This editor can be toggled readonly.

Test 6: Placeholder

Multiple placeholder examples: short text, long helper copy, and prefilled content fallback behavior.

Simple Placeholder

Long Instruction Placeholder

Prefilled Then Clear

This editor starts with content. Delete all text to reveal placeholder.

Test 7: Theme Switcher (Editor Only)

Toggle theme attributes on editors only. This does not change page styles.

Theme Editor A

Editor A starts in default theme.

Theme Editor B

Editor B starts in dark theme.

Test 8: Custom Event Handling

Listen for editor-focus and editor-blur events and display status.

Focus and blur this editor to see events.

Test 4: Dynamic API & Events

Demonstrates onchange event, getContent(), setContent(), and dynamic behaviors.
Try editing, clicking the buttons, and observe the output below.

Edit this text. Changes will be shown below.