Markdown Editor

CommonMark and GFM source editor with write, preview, split, formatting, uploads, and deferred rendering.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Release checklist

aq-ui renders CommonMark with GitHub Flavored Markdown.

Preview content is sanitized before it reaches the page.

Keyboard navigation
Light and dark themes
Server rendering
Publish the alpha

Package	Status
Registry	Ready
CLI	Ready

tsx

import { Button } from "@/components/ui/button"

export function SaveButton() {
  return <Button>Save changes</Button>
}import { Button } from "@/components/ui/button"export function SaveButton() {  return <Button>Save changes</Button>}

76 words453 characters

Loading interactive preview…

Installation

pnpm dlx aq-ui@alpha add markdown-editor

API reference

Client moduleView full source

Quick start

"use client"

import { MarkdownEditor } from "@/components/ui/markdown-editor"

<MarkdownEditor />

Exports

EditorAssetUploadAdapter type
MarkdownEditor const
MarkdownEditorMode type
MarkdownEditorPreview const
MarkdownEditorPreviewProps interface
MarkdownEditorProps interface
MarkdownEditorStatusBar function
MarkdownEditorStatusBarProps interface
MarkdownEditorToolbar function
MarkdownEditorToolbarProps interface
MarkdownRenderer const
useMarkdownEditor function

Registry dependencies

button, code-editor, code-language-markdown, markdown-renderer, upload, use-code-editor, use-markdown-editor, utils

Markdown Editor

Preview

Release checklist

Installation

API reference

Quick start

Exports

Registry dependencies

Package dependencies

Files

Source

Release checklist