CodeRunner

A snippet with a run button, and the output it produced attached below it.

Install it:

npx shadcn add @ambientui/code-runner

Live

typescript

typescript0s
const queue = createMessageQueue(driver);
queue.enqueue("also add a changeset");
console.log(queue.size);

Behavior

  • ·Attachment is the whole idea: output that floats free of the code that made it is a screenshot.
  • ·Re-running replaces the result rather than appending another orphan block.
  • ·Pressing play performs a run: the old output clears, the clock restarts from zero, and the result streams back in — the same arrival every time, because every run took time.
  • ·The run control disables itself while running — the object states its own availability instead of relying on the user to wait.
  • ·Duration sits beside the control, because how long it took is part of the result.

When to use

  • ·Executable snippets the user is meant to try, not just read.

When not to

  • ·For code that changes files or state — that needs a ReviewableDiff and an explicit apply.
  • ·For output with no code behind it; that is a TerminalBlock.