CodeRunner
A snippet with a run button, and the output it produced attached below it.
Install it:
npx shadcn add @ambientui/code-runnerLive
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.