Orvain UI

Rich Editor

A rich editor is a text surface where formatting belongs to the text itself rather than being typed as markup: bold, headings, lists and quotes live in the document, and the toolbar reports what is under the cursor.

Get Pro to installPro6 blocksReact, Vue and Figma
MCPConnect the MCP server
People in this document: Cara, Noah and you
Saved0 words1 min read

Every block in the set#

Document editor

Docs, knowledge bases, long-form writing: a page with its toolbar on top

Comment thread

Reviews and discussions where the reply matters most: read the thread, answer with full formatting

Floating toolbar

Distraction-free writing: formatting appears where you select, not at the top

Basic toolbar

The full formatting row as a pill: pin it above any editor

Large toolbar

Touch and focus modes: big controls grouped in capsules above the task they drive

Segmented toolbar

Two pills (type settings on the left, formatting on the right) for wide editors

When to use#

  • Long-form content read as a page: documentation, articles, release notes.
  • Replies where a quote or an @mention changes what the sentence means.
  • Authors who will never learn markup and should not have to.
  • A writing surface meant to stay clean until the writer selects something.

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.

Open in BlocksSee plans