A modern, real-time markdown editor with live preview, syntax highlighting, LaTeX math support, and GitHub Flavored Markdown.
- 📝 Rich Markdown Editing — Syntax highlighting, line numbers, bracket matching, and smart indentation
- 👁️ Live Preview — Real-time rendering with smooth performance on large documents
- 🧮 LaTeX Math Support — Inline and block equations powered by KaTeX
- 📊 GitHub Flavored Markdown — Tables, task lists, strikethrough, and auto-linking
- 🎨 Syntax Highlighting — 150+ languages with One Dark theme
- 🖥️ Flexible View Modes — Split, editor-only, or preview-only layouts
# Clone the repository
git clone https://github.com/yourusername/render-md.git
cd render-md
# Install dependencies
pnpm install
# Start the development server
pnpm devThe app will be available at http://localhost:3000
| Feature | Powered by |
|---|---|
| Headings (h1–h6) | react-markdown |
| Bold, italic, emphasis | react-markdown |
| Links & images | react-markdown |
| Blockquotes | react-markdown |
| Ordered & unordered lists | react-markdown |
| Horizontal rules | react-markdown |
| Inline code | react-markdown + custom styling |
| Code blocks (150+ langs) | react-syntax-highlighter (One Dark theme) |
| Tables | remark-gfm |
| Task lists | remark-gfm + shadcn/ui Checkbox |
| Strikethrough | remark-gfm |
| Autolinks | remark-gfm |
Inline math ($...$) |
remark-math + rehype-katex |
Block math ($$...$$) |
remark-math + rehype-katex |
| Category | Technology |
|---|---|
| Framework | TanStack Start (React meta-framework) |
| UI Library | React 19 |
| Build Tool | Vite 7 |
| Styling | Tailwind CSS 4 |
| Components | shadcn/ui (base-vega style) |
| Editor | CodeMirror 6 via @uiw/react-codemirror |
| Markdown | react-markdown |
| GFM Support | remark-gfm |
| Math | remark-math + rehype-katex |
| Syntax Highlighting | react-syntax-highlighter |
| Typography | Geist Font (Sans & Mono) |
| Icons | Lucide React |
| Deployment | Cloudflare Workers via Nitro |
| Command | Description |
|---|---|
pnpm dev |
Start development server on port 3000 |
pnpm build |
Build for production |
pnpm preview |
Preview production build locally |
pnpm test |
Run tests with Vitest |
pnpm lint |
Run ESLint |
pnpm format |
Format code with Prettier |
pnpm check |
Run all checks (format, lint, typecheck) |
pnpm clean |
Clean build artifacts |
pnpm deploy |
Deploy to Cloudflare Workers |
This project uses shadcn/ui. To add a new component:
npx shadcn@latest add <component-name>The CodeMirror theme is defined in src/lib/editor-theme.ts. It includes both light and dark variants with carefully crafted color palettes that match the design system.
The project is configured for deployment to Cloudflare Workers:
pnpm build
pnpm deploySince this is built with TanStack Start and Nitro, it can be deployed to various platforms. Modify nitro.config.ts to target your preferred platform.
RenderMD is designed with a focus on calm productivity:
- Clean Interface: Minimal chrome, maximum content area
- Thoughtful Typography: Geist font family for excellent readability
- Subtle Interactions: Smooth transitions and unobtrusive feedback
- Focus on Content: The preview renders your markdown beautifully without distraction
The color scheme uses a refined slate palette with a signature blue primary color (#137fec) for accents and interactive elements.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.