Building a Small Video Notes App with Vanilla JavaScript

In this post I walk through a tiny weekend project: a browser-based notes app that embeds a reference video for each note. The goal is to keep the stack simple, so everything is plain HTML, CSS and JavaScript.

Why vanilla JavaScript?

Frameworks are great, but for a small tool the platform already gives us everything we need. We use localStorage for persistence and the native <video> element for playback.

The data model

Each note is just an object:

const note = {
  id: crypto.randomUUID(),
  title: "Reference talk",
  body: "Key ideas to revisit",
  video: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
};

Rendering the list

We keep a small render function that rebuilds the list from state. Because the content is user supplied we always use textContent rather than innerHTML, which avoids accidental markup injection.

function render(notes, root) {
  root.replaceChildren(...notes.map((n) => {
    const li = document.createElement("li");
    const h = document.createElement("h3");
    h.textContent = n.title;
    const p = document.createElement("p");
    p.textContent = n.body;
    li.append(h, p);
    return li;
  }));
}

Persistence

Saving is a one-liner:

localStorage.setItem("notes", JSON.stringify(notes));

Loading is symmetric, with a defensive fallback so a corrupt value never breaks the app.

Wrapping up

The whole app fits in a single file and loads instantly. If you extend it, consider adding keyboard shortcuts and a search box. Thanks for reading, and happy hacking!