# Markdown Editor

> A Markdown text area with Write and Preview tabs. Toolbar buttons and shortcuts wrap or prefix the selection, toggle off when pressed again and stay on the browser's undo stack. Enter continues lists and quotes and ends them on an empty item, Tab indents list items, and pasting a link over text makes a Markdown link. Preview renders lists, task lists, quotes and code without raw HTML.

- Slug: `markdown-editor`
- Category: [Inputs](https://www.assembli.design/category/inputs.md)
- Type: component
- Tags: markdown, textarea, editor, toolbar, preview, comment, rich-text, shortcuts
- npm dependencies: lucide-react
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/markdown-editor
- Page: https://www.assembli.design/components/markdown-editor

![Markdown Editor preview](https://www.assembli.design/thumbnails/markdown-editor-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` |  |  |
| `defaultValue` | `string` | `""` |  |
| `onValueChange` | `(value: string) => void` |  |  |
| `label` | `React.ReactNode` |  |  |
| `hint` | `React.ReactNode` |  | Quiet text to the right of the label, such as "Optional". |
| `description` | `React.ReactNode` |  |  |
| `error` | `React.ReactNode` |  | Replaces the description and marks the field invalid. |
| `minRows` | `number` | `5` |  |
| `maxRows` | `number` | `16` | Past this the box stops growing and scrolls. |
| `tools` | `MarkdownTool[][]` | `GROUPS` | Which buttons show, in groups. Shortcuts work either way. |
| `defaultMode` | `"write" \| "preview"` | `"write"` |  |
| `fieldClassName` | `string` |  | Classes for the field box; `className` goes on the root. |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/markdown-editor/markdown-editor.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/markdown-editor
```

Registry item JSON: https://www.assembli.design/r/markdown-editor.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.