MarkFlow

A browser-based Markdown editor built for documentation writers.

Write Markdown on the left, see live-rendered HTML on the right — with auto-generated document outline, word count, reading time, and HTML/PDF export.

Live App → markflow1.vercel.app

---

What It Does

MarkFlow is a split-pane Markdown editor that updates your preview in real time as you type. It automatically generates a document outline from your headings so you can navigate long documents instantly. Write your content, check the structure in the sidebar, then export when you're done.

• Write Markdown in the left pane — preview renders live on the right
• Document outline auto-generates from # headings and updates on every keystroke
• Click any outline heading to jump to that section in the preview
• Word count, character count, line count, and reading time shown in the header
• Export your document as a standalone .html file or a .pdf
• Autosaves to localStorage — your work survives a page refresh

---

Stack

• React · Vite · marked.js · jsPDF
• CSS Modules — scoped, no global leakage
• localStorage for autosave
• No backend, no database, no login
• Deploys as a static site on Vercel

---

Features

• Split-pane editor — Markdown source left, rendered HTML right
• Live preview — updates on every keystroke via marked.js
• Auto-generated document outline — built from heading elements, click-to-scroll
• Active heading tracking — outline highlights the section you're reading
• Keyboard shortcuts — ⌘B bold · ⌘I italic · ⌘K link · Tab indent
• Export HTML — downloads a fully styled, standalone .html file
• Export PDF — generates a multi-page PDF from the rendered preview
• Autosave — content persisted to localStorage automatically
• Dark / light theme toggle — persisted across sessions
• What's new panel — fetches GitHub Releases via API with sessionStorage caching
• Matches the StyleGuard / ReadScore design system

---

Part of a 26-App Portfolio

MarkFlow is App E of 26 in a Phase 1 portfolio of browser-based documentation tools.

App	Name	Description
A	StyleGuard	Documentation style checker
B	GlossaryKit	Technical glossary manager
C	DocStruct	Documentation template generator
D	ReadScore	Readability analytics tool
E	MarkFlow	Markdown editor with live preview
…	…	…

---

Local Development

git clone https://github.com/luke-pekala/mark-flow.git
cd mark-flow
npm install
npm run dev
# opens at http://localhost:5173

To build for production:

npm run build
# output in /dist

---

Deployment

Deploys to Vercel with zero configuration.

1. Push to GitHub
2. Import repo at vercel.com
3. Set Build Command → npm run build
4. Set Output Directory → dist
5. Deploy

---

License

MIT