1st YearBeginnerWeb 2 weeks
Markdown Note-Taking App
A two-pane notes app where users write Markdown on the left and see a live HTML preview on the right, with notes saved locally and searchable.
HTMLCSSJavaScriptMarked.jsLocalStorage
Find GitHub repos & source code →How to build it — step by step
- 1Editor + preview: Bind a textarea to a preview pane; convert Markdown to HTML with marked.js on input.
- 2Notes list: Support multiple notes with titles, create/delete, and switching between them.
- 3Persistence + search: Save notes in localStorage and add a search box that filters by title/content.
- 4Sanitisation: Sanitise rendered HTML to prevent script injection from note content.
Key features to implement
- ✓Live Markdown preview
- ✓Multiple notes
- ✓Full-text search
- ✓Auto-save
- ✓Export note as .md
💡 Unique twist to stand out
Add a focus/zen mode that hides the notes list and centres the editor, plus a word and reading-time counter.
🎓 What you'll learn
Event-driven UI, third-party libraries, HTML sanitisation, and local persistence.