A zero-dependency, client-side Markdown notes app with a live preview and auto-save — built with vanilla HTML, CSS, and JavaScript.
🌐 Live Demo · Built by Giovanni Moreno
Markdown Notes is a lightweight, single-page Markdown editor that runs entirely in the browser — no backend, no build step, no dependencies. You write Markdown on the left and see the rendered HTML update live on the right. Notes are auto-saved to localStorage, so your content persists across page reloads. The Markdown-to-HTML conversion is implemented from scratch with regular expressions.
Keywords: JavaScript, vanilla JS, Markdown editor, live preview, localStorage, zero dependencies, regex parser, front-end.
| Feature | |
|---|---|
| 🖋️ | Live preview — renders Markdown to HTML on every keystroke |
| 💾 | Auto-save — debounced (400ms) persistence to localStorage, restored on load |
| 🧩 | Custom Markdown parser — built from scratch with regex (no libraries) |
| ⚡ | Zero dependencies — pure HTML/CSS/JS, just open the file |
| 🎨 | Styled output — headings, lists, blockquotes, inline code, links, images |
Vanilla HTML5 · CSS3 · JavaScript (no frameworks, no build tools) · Browser localStorage
flowchart TD
E["Editor (textarea)"] -->|input event| C[app.js controller]
C -->|render| P["parser.js (regex MD - HTML)"]
P --> V["Preview (innerHTML)"]
C -->|saveDebounced 400ms| LS[("localStorage")]
LS -->|on load| C
markdown-notes/
├── index.html # page structure / entry point
├── style.css # split-pane layout and preview styling
├── parser.js # Markdown -> HTML conversion (regex)
├── app.js # wires editor <-> preview <-> localStorage
└── README.md
No installation or build required:
git clone https://github.com/Gemu03/markdown-notes.git
cd markdown-notesThen simply open index.html in your browser. Optionally serve it with any static server:
python3 -m http.server
# then visit http://localhost:8000This project is licensed under the MIT License — see the LICENSE file for details.