← Apps
📝
Markdown Notes App
A note-taking app with a live-rendering markdown preview pane, built without any markdown library.
🔴 HardDifficulty
4-5 hoursTime
Python, JavaScript, TypeScriptLanguages
What you're building
A two-pane notes app: type markdown on the left (headings, bold, italic, links, lists, code) and watch it render as real formatted HTML on the right, instantly, as you type. Notes are listed in a sidebar, auto-saved to localStorage, and you can create, rename, and delete them freely - your own tiny personal Notion.
What you'll unlock 🔓
You'll need
- Basic JavaScript
- Regular expressions basics helps but not required
🗺️ Build roadmap
01 Set up the notes list and data model
→
02 Build the two-pane editor layout
→
03 Write a basic markdown parser
→
04 Wire up live preview on input
→
05 Add note creation and deletion
→
06 Add auto-save with a saved indicator
→
07 Polish the markdown support
🔒
Log in to start building
Your first project is free -- create an account to unlock it.
Log in Sign up free