Rich text editor

Both shared components speak one plain Markdown string — MarkdownEditor emits it as the user types, Markdown renders it read-only — so that single string is all you store.

Both rely on Tailwind’s prose class, so @tailwindcss/typography must be in the plugins array of tailwind.config.ts — without it, headings and lists render unstyled.

Editing

import { useState } from 'react';
import { MarkdownEditor } from '@project/components/markdown-editor';

function NoteEditor() {
  const [content, setContent] = useState('**Hello** world');
  return <MarkdownEditor content={content} onChange={setContent} />;
}

content?: string — initial Markdown. onChange?: (markdown: string) => void fires on every change.
editable?: boolean (default true) — set false to hide the toolbar and show read-only content.
height?: 'sm' | 'md' | 'lg' | 'dynamic-sm' | 'dynamic-md' | 'dynamic-lg' (default 'dynamic-md') — fixed heights, or minimums that grow with content.
Hide individual toolbar buttons with hideBold, hideItalic, hideHeadings, hideBulletList, hideOrderedList, hideBlockquote, hideUndoRedo, and so on.

The editor ships its own border and shadow — don’t wrap it in a div that adds more.

Rendering (read-only)

import { Markdown } from '@project/components/markdown';

<Markdown>{note.content}</Markdown>

Pass the Markdown as children. Supports GitHub Flavored Markdown (tables, strikethrough, task lists) and <mark> highlights; all other raw HTML is stripped.

Storing it

Give the field the rich_text type, then save the onChange string to it and pass it back into <Markdown> or <MarkdownEditor content={...} />.

Get started

Core concepts

Build with agents

Zite.js framework

Tutorials

Recipes

Deploy

Resources

Editing

Rendering (read-only)

Storing it

​Editing

​Rendering (read-only)

​Storing it

Editing

Rendering (read-only)

Storing it