FORMS · FORM ELEMENTS

Editors

Rich text, Markdown and code — built on contenteditable and textarea, no libraries. Toolbars, slash menu, mentions, paste cleanup and autosave all work.
THEME
DENSITY
01

Playground

Mode, toolbar, height, state — and the exact output you store
PREVIEWLive · 0 words
Project brief
Saved0 words · 0 chars
Leave the editor with fewer than 20 words to see the error
Settings
MODE
TOOLBAR
HEIGHT
STATE
STORED HTML0 chars
(empty)
02

Variants

8 editors, all working
Full toolbarheadings · marks · lists · link · align · undo
Saved0 words · 0 chars
Comment boxcompact · @mention · ⌘ Enter sends · 280 limit
Markdown shortcuts on280
Type @ to mention a teammate
Bubble toolbarselect text — formatting floats above it
Markdown splitsource left · live preview right · synced scroll
59 words · converted on every keystroke · scroll is synced
Slash commandstype / at the start of a line
Try: /h2, /check, /quote, /divider.
Mentions & tags@ people · # projects
0 mentions · 0 project tags — chips are atomic: one Backspace removes them
Codeline numbers · highlight · Tab indents · Esc then Tab leaves
LANGUAGE
Ln 1, Col 1 · 8 linesTab inserts 2 spaces · Esc then Tab to leave
Character limitring counter · amber at 90% · coral over
Shown on proposals160
Keep it to one or two sentences
03

States

Frame and toolbar buttons
DEFAULT
HOVER
FOCUS
ERRORBrief needs 20+ words
DISABLED
READ-ONLY
Toolbar buttonsidle · hover · active · pressed · disabled · focus
IDLE
HOVER
ACTIVE
PRESSED
DISABLED
FOCUS
Specframe · toolbar · content
Frame16 px radius · 1.5 px border · 3% fill · focus ring 4 px at 20%
Toolbar30 px buttons, 8 px radius, 1 px separators · role="toolbar", arrows move
Active formatCyan text on 22% cyan — aria-pressed="true"
Content14.5 / 1.6 · H1 24 · H2 19 · H3 16 · 14×16 padding
FooterStatus dot + text on the left, words · chars on the right
Menus240 px, 14 px radius, open under the caret, ↑ ↓ Enter Esc
04

Behavior

Shortcuts, paste cleanup, autosave, Markdown shortcuts
Shortcutsthe keys people already know
Saved0 words · 0 chars
⌘BBold⌘IItalic⌘UUnderline⇧⌘XStrike⌘KLink⇧⌘8Bullets⌘ZUndoEsc TabLeave editor
EVENT LOGUse a shortcut in the editor above.
Paste handlingfrom Word or Google Docs
ON PASTE
Saved0 words · 0 chars
Clean up keeps headings, bold, italic and links — drops fonts, colours and sizes
Autosavedraft survives a reload
All changes saved0 words · 0 chars
No draft stored yet
Markdown shortcutstype the syntax — get the format
Saved0 words · 0 chars
# Heading 1## Heading 2- Bullet list1. Numbered[] Checklist> Quote**bold**Bold`code`Inline code
EVENT LOGType “## ” at the start of a line.
05

In Avava

Project brief, file comments, invoice email
Project brief · Lume packagingheadings · checklist · @client · attachments · autosave
All changes saved0 words · 0 chars
0 words
Comments · Lume_dielines_v4.pdfcompact editor · edit · delete
Ben CostaYesterday, 17:20
Olivia LaneToday, 09:05
⌘ Enter to send
Invoice email templatevariables as chips · live preview
Insert
5 variables0 words · 0 chars
PREVIEW · AS THE CLIENT SEES IT
Subject: Invoice INV-0428 from Avava Studio
06

Rules & a11y

Which editor, keyboard, output safety
Rich, Markdown or plain?match the audience
Rich text
Clients and non-technical teammatesBriefs, emails, comments with formatting
Markdown
Engineers and power usersRelease notes, docs, README-style content
Plain
Short, unformatted inputBios under 160 chars, SMS, notes
Code
Snippets that must stay exactEmbeds, CSS overrides, webhooks
Screen readers & keyboardan editor is a text field first
✓role="textbox" aria-multiline="true"Plus aria-label or aria-labelledby — the editor needs a name
✓role="toolbar" aria-controlsOne Tab stop; ← → move between buttons
✓aria-pressed on format buttonsBold, Italic, lists and headings announce on/off
✓Esc, then Tab leavesWhen Tab indents, there must be a way out
✓Menus: role="listbox" + optionArrow keys move, Enter inserts, Esc closes
✓Mentions are atomic chipscontenteditable="false" — read as one word
✓aria-invalid + described errorFor limits and required briefs
Output & safetywhat you store matters more than what you show
✓Sanitise on the server — allow-list tags (p, h1–h3, b, i, u, s, a, ul, ol, li, blockquote, pre, code) and only href on a
✓Store one format — HTML or Markdown — never both, never the editor’s internal state
✓Keep mentions as ids — data-m="ol" — names can change, ids don’t
✕Never trust pasted HTML — it carries fonts, colours, tracking ids and sometimes scripts
✕Don’t render user HTML unsanitised — not even in previews or emails
DO✓Give the editor a visible label and an accessible name✓Clean pasted content by default — keep structure, drop styles✓Save drafts automatically and say when it happened✓Offer Markdown shortcuts for people who type fast✓Show the character limit before people hit it
DON’T✕Trap keyboard users — Tab must be able to leave✕Show a 20-button toolbar for a comment box✕Store raw editor HTML without sanitising✕Use colour alone to show an active format✕Lose a draft on reload or navigation