Sidenote playground

This post is a permanent sandbox for playing with the Sidenote component. It’s unlisted (won’t show on the home page, in feeds, or in category/tag lists) but reachable at this URL. Edit freely in Keystatic — the worst you can do here is break the page.

Hover a term

Lavoisier’s insight was to weigh things×weigh thingsNot the qualitative alchemy that came before — actual scales, actual grams. The revolution was procedural before it was theoretical. and follow the numbers. That approach let him overturn a century of chemistry in a decade.

Multiple sidenotes stack in the gutter

The phlogiston theory×phlogiston theoryA hypothetical fire-substance believed to escape from burning materials. Widely believed for a century, disproved in the 1770s. survived long past the point of usefulness partly because growing anomalies×growing anomaliesMetals gained weight when calcined instead of losing it — the exact opposite of what the theory predicted. Ignored for decades. weren’t enough on their own to sink it. Try opening both notes to see them auto-stack in the gutter.

Formatting in note content

The note text supports basic Markdown: **bold**, *italic*, `code`, and [link](url). See it in action here: fetch API×fetch APIThe modern replacement for XMLHttpRequest — see the MDN docs for the full specification, including the abortable variant. .

Long note vs short note

A short note. terse×terseOne line. Fine.

A long note. verbose×verboseThis one runs on for several lines to test how a taller card sits in the gutter and whether it pushes any following notes down when opened alongside them. Auto-stack should handle this cleanly. Also fine, hopefully.

Code line links

Write code blocks as usual in Markdown. Each block on the page gets an auto-assigned letter label (A, B, C…) shown in its bottom-right corner. Reference specific lines from prose using a Code line link inline component.

function fetchUser(id) {
  return fetch(`/api/users/${id}`)
    .then((res) => res.json())
    .catch((err) => console.error(err));
}

We define a function that takes a user ID and makes an HTTP request to the users endpoint. Then we parse the JSON response and, if anything fails along the way, log the error instead of crashing.

Ranges work too: the request-and-parse part is really one logical step split across two lines.

You can have multiple blocks on the same page and link to any of them:

git checkout main
git pull origin main

To sync your local branch with the remote, you’d check out main and then pull the latest .