DEV Community

Bilal Malik
Bilal Malik

Posted on • Edited on

A visual README editor so developers never have to write markdown from scratch again

ReadmeForge: README Editor Without the Markdown Struggle
Every developer knows this moment. You've finished a project. Pushed it to GitHub. Created the repo. And now you're staring at an empty README.md with no idea where to start.

README writing gets delayed indefinitely. You either copy-paste a template and spend an hour reformatting markdown syntax. You use some tool that generates a generic, structureless result. Or you ship a repo with a two-line description and call it done.

**ReadmeForge **removes that friction. A block-based visual editor — the same mental model as Notion, but the output is a clean, GitHub-ready README.md. Drag, drop, fill in content, download. No markdown syntax required.

Try Readmeforge | View on GitHub (MIT licensed)

No Markdown, No Problem
ReadmeForge gives you eleven purpose-built block types. Title for your project name. Badges for shields.io badges with live preview. Description for the long-form pitch. Features, Installation, Usage, Screenshots, API Docs, Contributing, License, and Custom Markdown for anything non-standard.

Each block has its own form. No raw markdown. No syntax to memorize. Just fill out the fields and watch the preview update in real-time on the right side.

Drag, Reorganize, Export
Drag blocks to reorder your entire README structure in seconds. Upload screenshots from your device, paste from clipboard, or link remote URLs - images convert to base64 and persist locally. Want Features before Installation? Drag it up. Need License at the bottom? Drop it there.

When you're done, copy the raw markdown to clipboard or download as README.md and drop it straight into your repo. Real-time stats show word count, file size, and image count so you know what you're shipping.

Everything Lives in Your Browser
Here's what sets ReadmeForge apart: everything runs client-side via Zustand with persistent localStorage. No sign-up. No password. No server ever sees your content.

Enter any email address when you land — your workspace creates instantly. Switch to a different email? Completely isolated workspace. Perfect for juggling multiple projects in the same browser. All private. All yours. No tracking.

Responsive Everywhere
Desktop layout has a resizable drag divider between editor and preview. Mobile gets a bottom navbar switching between Blocks and Palette tabs, with slide-in drawers for editing. The tool adapts without losing functionality.

Run It Locally

bashgit clone https://github.com/byllzz/readmeforge.git
cd readmeforge
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:5173. No environment variables needed — everything runs fully client-side.

Stack
React + Vite for the UI. Tailwind CSS for styling. Zustand for state management with persistence. @dnd-kit for smooth drag-and-drop. marked for markdown parsing. react-syntax-highlighter for the code view. Vercel for deployment. No unnecessary dependencies.

Contribute
Good first contributions: add new block types following the pattern in blocks.js, improve the markdown generator in markdown.js, add more badge providers, expand license types, or enhance accessibility with ARIA labels and keyboard navigation.

bashgit checkout -b feat/your-feature
git commit -m "feat: your short description"
git push origin feat/your-feature

Enter fullscreen mode Exit fullscreen mode

If ReadmeForge saved you from staring at a blank README.md, a ⭐ on GitHub means a lot.


What's the hardest part of writing your READMEs? Drop it in the comments!

Top comments (0)