Markdown Studio

A self-contained web app for working with markdown files: upload a .md file (or start blank), edit it with live syntax highlighting, see a rendered preview, and export the result as PDF, standalone HTML, or Markdown.

Built with React + Vite + Tailwind CSS and Untitled UI React components. No backend — everything runs in the browser, and your document auto-saves to localStorage.

Features

• Upload — drag & drop or browse for .md / .markdown / .txt files (drop works anywhere in the app)
• Edit — CodeMirror editor with markdown + fenced-code syntax highlighting
• Preview — GitHub-flavored markdown (tables, task lists, strikethrough) with highlighted code blocks
• Layouts — editor only, side-by-side split (draggable divider), or preview only
• Export — Markdown download (⌘S / Ctrl+S), self-contained HTML file, or PDF via the browser's print dialog
• Extras — light/dark theme, autosave to localStorage, unsaved-changes indicator

Development

npm install
npm run dev        # http://localhost:5173
npm run build      # typecheck + production build into dist/

Docker

docker compose up --build
# → http://localhost:8080

Or without compose:

docker build -t markdown-studio .
docker run -p 8080:80 markdown-studio

The image is a multi-stage build: Node builds the static bundle, nginx serves it (SPA fallback + gzip + long-lived caching for hashed assets).

SEO

The app ships with full on-page SEO: keyword-rich title/description, canonical URL, Open Graph + Twitter cards with a branded share image (public/og-image.png), JSON-LD WebApplication structured data, favicons + web manifest, robots.txt, and a <noscript> fallback for crawlers.

Absolute URLs (canonical, og:url, og:image) are stamped at build time from VITE_SITE_URL. Set it to your public domain before building:

# .env file
VITE_SITE_URL=https://markdown.yourdomain.com

# or as a Docker build arg
VITE_SITE_URL=https://markdown.yourdomain.com docker compose up --build

After deploying, verify the share card with https://www.opengraph.xyz and submit the site in Google Search Console. Ranking beyond on-page factors depends on your domain, backlinks, and content — consider a landing/blog section if you want to target more queries.

Project layout

src/
├── components/      # Untitled UI components (installed via `npx untitledui add`)
├── features/        # App UI: header, editor pane, preview pane, upload zone
├── hooks/           # use-document (state + autosave), use-resolved-theme
├── lib/             # markdown pipeline, export (md / html / pdf), sample doc
└── pages/           # markdown-studio (main screen)