README Forge

Build clean, professional GitHub README files in seconds. README Forge is a split-pane editor with a live Markdown preview: fill in a simple form on the left and watch a GitHub-styled README render on the right, ready to copy or download. It runs entirely in the browser with no build step, no backend, and no dependencies to install.

Features

• Live GitHub-style Markdown preview that updates while you type
• Automatic README generation — empty sections are omitted, so the output is always clean
• Technology badge selection with selectable chips grouped by category (28 curated technologies)
• License picker with common SPDX licenses (MIT, Apache-2.0, GPL-3.0, BSD-3-Clause, ISC, Unlicense)
• Author section with an automatic GitHub profile link
• Copy the generated Markdown to the clipboard
• Download the result as a ready-to-commit .md file with a filename derived from the project name
• Light and dark theme with system-preference detection and persistence
• Auto-save to localStorage — your draft survives page reloads
• Responsive layout: side-by-side panes on desktop, an Edit/Preview toggle on mobile
• Accessible by design: semantic HTML, labelled controls, keyboard navigation, live status announcements
• Runs entirely in the browser — no backend, no accounts, no data ever leaves your machine

Demo

Live Demo:https://tanaymomle.github.io/readme-forge/ Repository:https://github.com/TanayMomle/readme-forge

Screenshots

Editor

Live Preview

Mobile View

Tech Stack

• HTML5
• CSS3 (custom properties, no framework)
• Vanilla JavaScript (ES Modules)
• marked (vendored) for Markdown rendering
• Hosted as a static site (GitHub Pages compatible)

Project Structure

readme-forge/
├── index.html              Application shell
├── favicon.svg
├── css/
│   ├── variables.css       Design tokens and theming (light/dark)
│   ├── base.css            Reset, typography, accessibility helpers
│   ├── app.css             Application UI and responsive layout
│   └── preview.css         GitHub-inspired Markdown styling
└── js/
    ├── main.js             Entry point
    ├── app.js              Application controller
    ├── state.js            Single application store (subscribe/update)
    ├── config/
    │   ├── techStack.js    Technology catalogue (badges, categories)
    │   └── licenses.js     License catalogue
    ├── modules/
    │   ├── uiManager.js    Orchestration and user interactions
    │   ├── formManager.js  Form input → state
    │   ├── markdownGenerator.js  Pure state → Markdown
    │   ├── previewRenderer.js    Markdown → rendered preview
    │   ├── clipboardManager.js   Clipboard API with fallback
    │   ├── downloadManager.js    Blob-based file download
    │   ├── themeManager.js       Theme resolution and persistence
    │   └── storageManager.js     Versioned localStorage persistence
    ├── utils/              Small pure helpers (debounce, Markdown escaping)
    └── vendor/             Vendored Markdown parser

State flows in one direction: form input updates the store, the store feeds a pure Markdown generator, and the generated string drives the preview, clipboard, and download. Technologies and licenses live in configuration files, so extending the catalogue never touches application logic.

Getting Started

git clone https://github.com/<your-username>/readme-forge.git
cd readme-forge

README Forge is a fully static application — there is nothing to install or build. Because it uses ES Modules, it needs to be served over HTTP rather than opened from the filesystem. Any static server works:

# VS Code: right-click index.html → "Open with Live Server"

# or with Python
python -m http.server 8000

# or with Node
npx serve

Then open http://localhost:8000 (or whichever port your server prints).

Usage

1. Enter your project name and a short description.
2. Select the technologies your project uses — they become badges in the README.
3. List your features (one per line) and add installation and usage commands.
4. Pick a license and add your author name and GitHub username.
5. Watch the preview update as you type; sections you leave empty are skipped automatically.
6. Click Copy README to copy the Markdown, or Download README to save it as a .md file.

Your draft is saved locally as you work, so you can close the tab and pick up where you left off.

Browser Support

README Forge targets modern evergreen browsers:

• Chromium-based browsers (Chrome, Edge, Brave, Opera)
• Firefox
• Safari (desktop and iOS)

There is no build or transpilation step, so very old browsers without ES Module support are not supported.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Future Improvements

• Custom badge support (colors, styles, additional services)
• Multiple README templates to choose from
• Auto-generated table of contents
• Export options beyond Markdown
• Drag-and-drop section ordering