> ## Documentation Index
> Fetch the complete documentation index at: https://developers.zite.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Rich text editor

> Let users write and read formatted text with the built-in MarkdownEditor and Markdown components.

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.

<Note>
  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.
</Note>

## Editing

```tsx theme={null}
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)

```tsx theme={null}
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](/api/field-types), then save the `onChange` string to it and pass it back into `<Markdown>` or `<MarkdownEditor content={...} />`.