README Studio

Visual editor for crafting beautiful GitHub README files with drag-and-drop simplicity.

Why README Studio?

Stop writing markdown by hand. Build visually, export instantly.

• 🎯 Drag & drop blocks - Reorder elements with ease
• 👁️ Live GitHub preview - See exactly how it looks
• 🎨 Rich content blocks - Text, code, tables, images, badges
• 📐 Alignment control - Left, center, right for everything
• 💾 Template system - Save and reuse your designs

Core Features

Visual Building

No markdown syntax needed
Just click, type, and arrange
See GitHub-styled preview in real-time

Content Blocks

• Headers (H1, H2, H3) with alignment
• Text paragraphs with formatting (bold, italic, code)
• Lists and todo checklists
• Code blocks with syntax highlighting
• Images with size control
• Shields.io badges
• Tables with quick templates
• Collapsible details sections
• Blockquotes, links, dividers

Smart Controls

• Alignment buttons on every block (left/center/right)
• Drag handles to reorder instantly
• Text formatting toolbar (bold, italic, code)
• Quick table templates (2×2 to 5×5)
• Custom table dimensions up to 20×20

Template System

• Export complete layouts as JSON
• Import templates to restore designs
• Share configurations with team
• Reuse proven structures

Interface

┌──────────────┬────────────────────────┬──────────────┐
│   Sidebar    │       Editor           │   Preview    │
│              │                        │              │
│ Structure    │  [Block] Drag here     │  # Title     │
│  • Title     │         ↕↕             │              │
│  • Heading   │  [Block] Drop zones    │  Preview as  │
│  • Section   │                        │  GitHub      │
│              │  Click to edit         │  renders it  │
│ Content      │  Drag to reorder       │              │
│  • Text      │                        │              │
│  • List      │  + Add Block           │              │
│  • Code      │                        │              │
│              │  Export / Template     │              │
└──────────────┴────────────────────────┴──────────────┘

Quick Start

Create new README:

1. Open readme-studio.html in browser
2. Click blocks in sidebar
3. Edit content inline
4. Drag to reorder
5. Download as README.md

Use templates:

1. Build your design
2. Export Template (JSON)
3. Import later to restore
4. Share with team

Export Options

• Download README.md: Get markdown file instantly
• Copy Markdown: One-click clipboard copy
• Export Template: Save as JSON for reuse
• Live Preview: See GitHub rendering in real-time

Content Blocks

Structure

• Title (H1): Main project heading
• Heading (H2): Section headers
• Section (H3): Subsections

Content

• Text: Paragraphs with bold, italic, code
• List: Bullet lists
• Todo: Checkboxes for tasks
• Code: Syntax-highlighted blocks
• Quote: Blockquotes

Media

• Image: With URL, alt text, width, alignment
• Badge: Shields.io badges with custom colors
• Link: Clickable hyperlinks

Advanced

• Table: Markdown tables with templates
• Details: Collapsible sections
• Divider: Horizontal rules

Perfect For

• 📦 Open source projects - Professional documentation
• 👤 Profile READMEs - Stand out on GitHub (@username/username)
• 🚀 Repository presentations - Showcase your work
• ⚡ Quick mockups - Test layouts before committing
• 👥 Team standards - Consistent README structure

Tips

• Use alignment controls for centered titles and images
• Drag the header of any block to reorder
• Format text by selecting and clicking toolbar buttons
• Quick tables with 2×2, 3×3, 4×4, 5×5 buttons
• Save templates to reuse across projects

License

MIT - Free for personal and commercial use

---

Made with care for the GitHub community
Built by David Sangouard