A WYSIWYG Markdown editor that finally doesn't make me want to cry while creating GitHub READMEs.
prettyeys.mp4
🤦 Open VS Code → Write raw Markdown for 2 hours
😤 Try online editor → "Rendering failed" for the 15th time
🙄 Use Notion → Copy, paste, format again, pray
😭 Final result → "Why doesn't this badge align?!"
I'm done. Done with Markdown editors that:
- Don't show how it'll look on GitHub
- Break with tables
- Have terrible syntax highlighting
- Make me cry debugging generated HTML
So I built PrettyEyes - an editor that renders exactly like GitHub, with everything I need and nothing I don't.
- Live Demo - See it in action (when I deploy it 😅)
- Features - What this thing does
- Getting Started - Copy, paste, run
- Why I Built This - The complete saga
- Contributing - Want to help? Let's go!
Things that make me happy using this
✅ True WYSIWYG - What you see IS what you get on GitHub
✅ GitHub Flavored Markdown - Full support, zero surprises
✅ Smart Import - Drop HTML, Markdown or text - it figures it out
✅ Live Preview - See Markdown being generated in real-time
✅ Syntax Highlighting - Code blocks that don't hurt your soul
Things that save me time
🚀 Command Palette - / and everything you need appears
🎨 Rich Media - Images, badges, tables without drama
⚡ Export Ready - .md, .html, .txt - you choose
🧠 Content Detection - Paste anything, it fixes it
📝 Document Structure - Visual sidebar with drag-and-drop reordering
🎯 Quick Templates - One-click README sections insertion
# Clone and run
git clone https://github.com/brennercruvinel/prettyeyes.git
cd prettyeyes
npm install
npm run devThat's it. Opens at http://localhost:5173 and be happy.
- Node.js 18+ (if you don't have it, get it here)
- npm or yarn (whatever you prefer)
- Patience with my bugs (work in progress 😅)
- Write - Like any normal editor
- Format - Select text → toolbar appears
- Commands - Type
/→ magic happens - Export - Download button → README ready
Because mouse is overrated:
- Bold:
Ctrl/Cmd + B - Italic:
Ctrl/Cmd + I - Code:
Ctrl/Cmd + E - Link:
Ctrl/Cmd + K - Command Palette:
/(the most important one)
You now:
- Open VS Code
- Create
README.md - Type markdown manually
- Pull your hair trying to align badges
- Commit and pray it doesn't break
With PrettyEyes:
- Open the editor
- Write like it's Word
- Download the
.md - Profit ✨
Left Sidebar - Document Structure
- See all your document sections at a glance
- Drag and drop to reorder blocks
- Click to jump to any section
- Real-time updates as you type
Right Sidebar - Quick Templates
- Pre-built README sections
- Installation, Usage, Contributing, License, etc.
- Click to insert formatted templates
- No more copy-pasting from other READMEs
- React 19 - Because new is always better (until it breaks)
- TypeScript - Mental sanity > 5 minutes of setup
- Vite - Fast build = happy developer
- TailwindCSS 4 - CSS that works without hating me
- TipTap - The heart of the whole thing
- Marked - Markdown parser that doesn't lie
- Lowlight - Syntax highlighting that actually works
- DOMPurify - Because XSS is not my friend
- @dnd-kit - Drag and drop that just works
prettyeyes/
├── src/
│ ├── components/
│ │ ├── TipTapEditor/ # The engine
│ │ ├── Sidebar/ # Document structure & templates
│ │ └── Preview/ # Where magic becomes reality
│ ├── hooks/
│ │ └── useEditorState.ts # Editor state management
│ ├── utils/
│ │ └── markdownProcessor.ts # Markdown to HTML conversion
│ ├── styles/
│ │ └── globals.css # CSS that doesn't break
│ └── App.tsx # Where everything comes together
├── public/ # Static assets
└── package.json # Dependencies (many)
I was creating a README for a project and thought: "This'll be quick, just basic markdown".
3 hours later...
- 47 attempts to align badges
- 12 online editors tested
- 1 near breakdown in Notion trying to export
- ∞ frustrations with preview that doesn't match the result
Conclusion: Markdown editors are made by people who don't use GitHub or enjoy suffering.
I decided to make an editor that:
- Renders EXACTLY like GitHub
- Doesn't force me to memorize syntax
- Works offline (because internet sometimes doesn't)
- Is simple - does one thing and does it well
If you're also tired of:
- Writing
by hand - Counting spaces to align tables
- Finding out your README broke after 3 commits
This editor is for you.
✅ Headers (H1-H6) - All sizes
✅ Text Formatting - Bold, italic, strike, code
✅ Lists - Ordered, unordered, task lists ✓
✅ Code Blocks - With real syntax highlighting
✅ Tables - That don't break (miracle!)
✅ Images & Badges - Drag, drop, done
✅ Links - Smart auto-linking
✅ Blockquotes - For epic quotes
✅ GitHub Alerts - NOTE, TIP, WARNING, etc.
- Initial Load: ~2s (with decent internet)
- Editor Response: <100ms for any action
- Export Time: Instantaneous (up to 50MB content)
- Memory Usage: ~30MB (less than a Chrome tab)
TL;DR: Got an idea? Send it!
I accept everything:
- 🐛 Bug reports (the more detailed, the better)
- 💡 Feature requests (even if they seem impossible)
- 🔧 Code improvements (all help is welcome)
- 📚 Documentation (if you understood something, document it!)
- 🎨 UI/UX suggestions (design isn't my strong suit)
# Fork → Clone → Branch
git checkout -b feature/my-genius-idea
# Code → Test → Commit
git commit -m "Add: amazing thing that will change everything"
# Push → PR → Party- Tests (I know, I know...)
- Accessibility (a11y)
- Mobile responsiveness
- Performance optimizations
- More README templates
Because honesty is important:
- Import of some complex HTMLs might break
- Mobile still kinda wonky
- Undo/Redo sometimes gets lost
- No white dark mode (I know, I know...)
Just the basics to make it better:
- Mobile fixes
- Better file import/export
- Maybe some README templates
That's it. It's a simple Markdown editor, not a spaceship.
| Feature | Competitors | PrettyEyes |
|---|---|---|
| GitHub accuracy | 60-80% | 99%+ |
| Setup time | 10-30 min | 30 sec |
| Learning curve | Steep | Flat |
| Bugs per session | 3-5 | 0-1 |
| Developer happiness | 😐 | 😍 |
MIT License - basically: do whatever you want, just don't sue me.
If this editor saved you 10 minutes creating a README, it was worth the effort.
If it saved you 2 hours (like it saved mine), consider giving it a ⭐ - it's free and motivates me to continue.
If you found a bug, open an issue. If you have an idea, share it. If you want to contribute, go for it.
Happy README writing! 🚀
 by hand