@zuilib/text-editor · v0.13.3

The editor enterprise apps keep rebuilding.

Notes, comments, runbooks, spec fields: every product has them and none of the engines ship a finished one. This is a complete markdown editor for React, with tables, diagrams and highlighted code, that takes your theme as it is. Type in it below; it is the released package.

Documentation API →

Artboard · document workspace

light · 100%

Documents/Design review: billing v2

Loading editor

Document workspaceLibrary sidebar, document header, share panel, and the released MarkdownEditor with its outline. Each document keeps its own markdown; create, switch, edit, publish. The editor takes the theme from the same custom properties as the chrome around it.

TablesGFM pipe tables edited in place; row and column rails, per-table width and density.DiagramsAn embedded canvas: cards, arrows, flowcharts, stored as a fenced block in the markdown.CodeFifteen grammars highlighted by the package’s own lexer, on the Prism @lexical/code already brings; no additional highlighter.AI authoringThe document is a markdown string, so an LLM writes it directly, diagrams included.Outline and foldingA live outline from the headings; sections fold. Three modes on one controlled value.Themed by the contractReads the same tokens as every other ZUI package; a brand applies without editor-specific overrides.

Install

pnpm add @zuilib/text-editor

# app.css (Tailwind v4 host)
@import "tailwindcss";
@import "@zuilib/text-editor/tailwind.css";

Use

import {useState} from 'react'
import {MarkdownEditor} from '@zuilib/text-editor'
import '@zuilib/text-editor/styles.css'

export function Notes() {
  const [value, setValue] = useState('# Runbook\n\n...')
  return <MarkdownEditor value={value} onValueChange={setValue} />
}