MarkdownEditor

Code

import { MarkdownEditor } from "@fadymondy/nasaq/web";import { useState } from "react";export function Description() {  const [value, setValue] = useState("## Notes\n\nWrite **here**.");  return <MarkdownEditor value={value} onValueChange={setValue} defaultView="split" aria-label="Description" />;}

Editors · beta

Live examples and controls: MarkdownEditor in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/markdown-editor.json

A textarea with a toolbar and a live preview. The value is Markdown text, so you store and diff it as is.

When to useCopy Anchor Link

• Descriptions, comments, release notes and docs where people know or tolerate Markdown.
• When you need the source text, not HTML.

When not to useCopy Anchor Link

• Writers who expect a word processor: use RichTextEditor.
• Showing Markdown only: use Markdown.
• A short single-line field: use Input.

ImportCopy Anchor Link

import { MarkdownEditor } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { MarkdownEditor } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function Description() {
  const [value, setValue] = useState("## Notes\n\nWrite **here**.");
  return <MarkdownEditor value={value} onValueChange={setValue} defaultView="split" aria-label="Description" />;
}

AnatomyCopy Anchor Link

MarkdownEditor                  data-slot="markdown-editor", data-view="write|preview|split"
├─ toolbar (role="toolbar")     bold, italic, headings, lists, task list, quote, link, code, code block
├─ ToggleGroup                  Write · Preview · Split (Split from md up)
├─ textarea                     monospace, dir="auto"
├─ preview                      data-slot="markdown-editor-preview", <Markdown>
└─ input type="hidden"          when `name` is set

APICopy Anchor Link

MarkdownEditor: every div prop except onChange and defaultValue, plus:

Shortcuts: Ctrl/⌘+B bold, Ctrl/⌘+I italic, Ctrl/⌘+K link. Toolbar actions wrap the selection, or insert a placeholder, and keep it selected.

AccessibilityCopy Anchor Link

• The toolbar is labelled and aria-controls the text area; every icon button has a name and a tooltip.
• Toolbar buttons keep focus and the selection in the text area.
• The preview is aria-live="polite".

RTL & i18nCopy Anchor Link

• English and Arabic strings follow the Nasaq locale. The text area uses dir="auto", so Arabic and English lines each read the right way; Split puts Write at the inline start.

Styling & tokensCopy Anchor Link

• Card surface, rounded-card, mono text area, preview in Markdown typography. Target [data-slot="markdown-editor"].

Do / Don'tCopy Anchor Link

• Do sanitise Markdown on the server before rendering it elsewhere.
• Do start in Split on wide screens for people new to Markdown.
• Don't use it for chat input; Enter makes a new line here.

RelatedCopy Anchor Link

• Markdown
• RichTextEditor
• Notes

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-editors-markdown-editor--docs