The problem
Every developer knows the pain: you build something cool, then spend 30 minutes fighting with markdown. Badge URLs with typos. Tables that break because you forgot a pipe character. Pushing to GitHub just to check if it renders correctly.
The solution
I built README Builder -- a visual drag-and-drop editor that generates GitHub-flavored markdown.
Features
- 15+ block types -- headings, badges, code, tables, lists, images, alerts, collapsible sections, and more
- Live preview -- see exactly how GitHub will render your README
- Badge editor -- visual builder with shields.io integration, color picker, logo selector
- Import -- paste markdown, upload a file, or fetch any GitHub repo's README
- SEO-optimized templates -- proper heading hierarchy, descriptive alt text, FAQ sections
- Undo/Redo -- full history with Cmd+Z
- Dark/Light preview -- toggle to match GitHub's theme
Tech stack
React 19, TypeScript (strict), Tailwind CSS 4, Vite 7, Zustand + zundo, CodeMirror 6, @dnd-kit, react-markdown + remark-gfm
Try it
It's fully client-side, no backend, no login, no tracking.
Live: ofershap.github.io/readme-builder
Source: github.com/ofershap/readme-builder
Would love to hear what block types or templates you'd want added.
Top comments (0)