Code walkthroughs

Show a function being written, a change in a pull request, or an algorithm running with its code beside it. The listing is highlighted, the focus moves with the story, and edits slide instead of retyping.

How it is built

• Code highlights Rust, JavaScript, Python, JSON, TOML and shell; focus_lines dims everything but the lines that matter (all nodes).
• .code().to(next, s) diffs the tokens: unchanged ones slide, new ones appear; insert, replace and .flash() show one edit.
• CodeExplainer steps through a listing with a caption for each step (components).
• Bars, tables and text bound to signals move in step with the code.

With an agent

Install the skills, then give your agent a first prompt. The code-walkthrough skill tells it how videos of this kind are made, and oxframe check shows it what is wrong before anything is rendered.

npx skills add oxygenframe/oxframe-sdk

Make a 30-second walkthrough of the parse function in src/parser.rs: show it, then step through it with the focus on the lines that matter and a caption for each step.

Start from an example

• A function written in steps
• Quicksort, step by step
• Word morphs, rich text and code focus