← Interactive Code Note

Essay

Interactive Code Note

An executable notebook for learning data structures and algorithms without leaving the article.

1 min read
  • Projects
  • Go
  • Algorithms

I built Interactive Code Note while learning data structures and algorithms. The idea is simple: the explanation and the code runner should live in the same place.

Instead of copying a snippet into another tab, a reader can edit it, run it, compare the output, and continue reading.

Try the runner

The editor below loads a Go snippet from this site and sends it to the Go Playground when you press Run.

Embedding a note

Each executable block is just an iframe with a noteId. The runner loads the matching file from /assets/go-snippets/.

<iframe
  src="/assets/go-editors.html?noteId=yourcodeid"
  title="Interactive Go example"
></iframe>

The format keeps writing portable: the article stays normal Markdown/MDX, while the editor is isolated and can evolve independently.

Why this shape works

  • Immediate feedback: code and output stay close to the explanation.
  • Versioned examples: every snippet lives beside the site source.
  • Progressive enhancement: the article remains readable even if the runner is unavailable.
  • One reusable tool: the same editor can power algorithm notes, tutorials, and small experiments.