A Tiny Notes App with localStorage and Vanilla JavaScript

I like small weekend projects. This one is a notes app that runs entirely in the browser. It stores notes in localStorage and renders them with the DOM API, so there is no build step and no framework.

The state

Notes are plain objects with an id, a heading and a short description:

const note = { id: crypto.randomUUID(), heading: "Weekend reading", description: "Collect a few articles to revisit later" };

Saving and loading

The persistence layer is two functions. Loading is defensive: if the stored value is corrupt we fall back to an empty array.

function save(notes) { localStorage.setItem("notes-v1", JSON.stringify(notes)); } function load() { try { const raw = localStorage.getItem("notes-v1"); return raw ? JSON.parse(raw) : []; } catch (error) { console.warn("Could not read notes", error); return []; } }

Rendering

Every render starts from the current array. We build elements with createElement and assign text with textContent, which keeps user input out of the HTML parser.

function render(notes, root) { root.replaceChildren(...notes.map((note) => { const item = document.createElement("li"); const title = document.createElement("h3"); title.textContent = note.heading; const text = document.createElement("p"); text.textContent = note.description; item.append(title, text); return item; })); }

Adding a note

A small form handler appends a new object, saves the array, and re-renders. Keeping state and rendering separate makes each part easy to reason about.