MarkSight

An open source markdown editor with real-time preview, a smart formatting toolbar, keyboard shortcuts, a document outline, and Markdown/HTML/PDF export.

🔗 Live: marksight.laramateo.com

Features

• Live preview — CodeMirror editor with an instantly-rendered preview pane
• Smart toolbar — context-aware formatting that detects and toggles existing markdown
• Keyboard shortcuts — bold (⌘B), italic (⌘I), strikethrough (⌘U), link (⌘K), inline code (⌘`), headings (⌘⇧1–3), lists, and more
• Document outline — auto-generated, clickable heading navigation that scrolls the preview
• Export — download the raw Markdown source or styled HTML, print to PDF, or preview the HTML in a new tab
• GitHub-flavored markdown — tables, task lists, strikethrough (via remark-gfm)
• Syntax highlighting — fenced code blocks rendered with Prism
• Light / dark theme — system-aware, persisted across sessions
• Local persistence — your document is saved to localStorage automatically

Tech stack

• Next.js 15 (App Router) + React 19
• Tailwind CSS v4 + shadcn/ui primitives
• CodeMirror (@uiw/react-codemirror) for editing
• react-markdown + remark-gfm for rendering
• next-themes for theming

Getting started

npm install
npm run dev      # start the dev server at http://localhost:3000

Other scripts:

npm run build    # production build
npm run start    # serve the production build
npm run lint     # run ESLint

Regenerating brand assets

App icons and social images are generated from inline SVG with sharp:

node scripts/generate-assets.mjs

This writes the manifest icons (public/icon*.png) and the Next.js metadata images (src/app/apple-icon.png, opengraph-image.png, twitter-image.png).

Project structure

src/
├── app/              # App Router entry (layout, page, metadata, route assets)
├── components/       # UI components (editor, preview, toolbar, sidebar, …)
│   └── ui/           # shadcn/ui primitives
├── contexts/         # React context providers
├── hooks/            # custom hooks
└── lib/              # utilities (slugify, local storage, syntax highlighter, …)

Contributing

Contributions are welcome — whether it's a bug report, a feature idea, a docs fix, or a pull request. See the contributing guide for how to set up the project and submit changes, and please follow our Code of Conduct.

New here? Look for issues labelled good first issue.

License

See LICENSE.