Quill

Local-first Markdown editor in the browser: split, edit-only, or preview-only layouts, a live preview, and exports—built with Next.js.

Next.js · React · TypeScript

Features

• Layouts — Resizable split view, full-width editor, or full-width preview (react-resizable-panels).
• Preview — GitHub-flavored Markdown via marked, HTML sanitized with DOMPurify.
• Toolbar — Formatting actions and keyboard shortcuts (e.g. bold / italic / link) while the textarea is focused.
• Export — Download .md, standalone .html, or .txt; copy rendered HTML to the clipboard.
• Persistence — Debounced save to localStorage (quill.markdown.v1); view mode stored as quill.view.v1.
• Theme — Light / dark toggle with next-themes; toasts via Sonner.
• Analytics — Vercel Web Analytics loads in production only (NODE_ENV === "production").

Stack

• Framework — Next.js 16 (App Router), React 19
• Styling — Tailwind CSS v4, CSS variables, tw-animate-css
• UI — shadcn/ui registry, base-maia style, Base UI primitives (@base-ui/react), Hugeicons in generated components; Lucide icons in the editor toolbar

Getting started

npm install
npm run dev

Open http://localhost:3000. The editor is the home page.

Other useful scripts:

npm run build   # production build
npm run start   # run production server
npm run lint    # ESLint

You can use pnpm or yarn instead of npm if you prefer; this repo ships with a package-lock.json for npm.

Project layout

Path	Role
[app/](app/)	App Router routes, [layout.tsx](app/layout.tsx), [globals.css](app/globals.css)
[components/editor/](components/editor/)	Editor shell, panes, toolbar, status bar
[components/ui/](components/ui/)	shadcn-generated primitives (button, tooltip, menus, etc.)
[lib/markdown/](lib/markdown/)	Default content, formatting helpers, export, marked + DOMPurify pipeline

Deploy

Deploy anywhere that supports Next.js. Vercel is a natural fit and matches the built-in Analytics wiring. See the Next.js deployment documentation for details.