opencanviz-json is an agent skill that teaches an AI coding agent, such as Claude Code, to write an openCanviz project as one JSON file. You ask the agent for a video on a topic. It plans the scenes and steps, writes the file, checks it against the schema and hands it to you. You paste the file into Import on the Create page, and openCanviz plays it as an animated explainer that you can voice, edit and export. The skill is free and open source on GitHub at opencanviz/opencanviz-skills-repo, under the MIT license.

This post covers what the skill can put on screen, two videos made with it, and how to install it.

Two videos made with the skill

Both videos were written as short Python scripts with the skill's helper, imported into openCanviz and exported from it. They show the captions and have no audio track yet. After import, one click in the Narration panel voices every caption.

The first explains consistent hashing in five scenes: a table that shows why hash mod N moves most keys when a server is added, then a ring where keys walk clockwise to their server, and a new server that takes over just one arc.

The second works out the derivative of x squared: the slope question on a plot, a derivation from the limit definition, a tangent that rides the curve, and a table that checks the answer.

The scripts and JSON files behind both are linked from JSON examples in the docs.

What is in the skill

The skill is one folder, opencanviz-json:

Agents that can run Python build the project with the helper. It lays out the nodes, fits the text, keeps captions and arrows readable, and refuses to save a file that breaks a rule. Agents that cannot run code write the JSON by hand from the rules in SKILL.md.

What it can put on screen

SKILL.md opens with a table that matches the topic to a visual, so the agent does not draw boxes and arrows for everything. Boxes and arrows are for flows and systems. A trend becomes a line chart, parts of a whole become a pie, a sort becomes an array with pointers, and history becomes a timeline. Beyond those, the skill covers:

• Text entrances: a title written on by a hand, typed text with or without a caret, a word that pops in, lines that rise in one after another, and numbers that count up.
• Scene transitions: 22 kinds, including crossfades, color wipes, scribble wipes, pushes, slides and a morph that carries matching nodes into the next scene, plus a hard cut.
• Motion presets: entrances (fade, slide, rise, drop, zoom, wipe, draw, pop), emphasis (pulse, shake, wiggle, flash, nudge, tint) and exits (fade, slide, shrink, absorb, scatter).
• Math: LaTeX equations, one term per node on a shared baseline, and derivations written one line per step, where the term that changed lights up.
• Plots: a curve that draws itself on, the area under it, a point with a tangent that rides the curve, a legend, and number lines.
• Data and structure: tables revealed column by column, comparison bars with big numbers, a ring with dots and arcs, dots streaming down an arrow, matrices, Venn diagrams, triangles with angle marks, trees, linked lists, graphs, code panels and sequence diagrams.
• Sound effects: a project-wide sound pack, soft, playful, retro, mech or off.

A validator that catches timing problems

A file can be valid JSON and still play wrongly, because Import does not check every field. The helper checks the rules in SKILL.md before it saves. Some of the problems it catches are about timing:

• A captioned step that leaves the screen blank for more than a second, for example an exit early in the step. An exit with offset="end" runs at the very end of its step instead, so the screen is never empty while the caption plays.
• A color or position change with no short tween of its own, which would drag across the whole step and lag the narration.
• An arrow that draws before the node it points to has appeared.
• An easing name spelled the wrong way, such as easeOut for ease-out, which would quietly play as linear.
• Decimals in captions, which the narration voice reads unreliably.

When a rule is broken, p.save() raises with a hint about the fix and writes nothing. To check any file, including one written by hand:

python3 plugins/opencanviz/skills/opencanviz-json/scripts/opencanviz.py check file.json

How the consistent hashing video was written

Each scene is a few lines of Python. The ring scene places three servers and a key on the ring, then gives one step per caption:

ring = s3.ring(center=(area.cx, area.cy - 30), r=345, color="#334155", width=6)
srv = {n: ring.dot(a, size=60, color=c, label=n) for n, a, c in (("A", 30, A_C), ("B", 150, B_C), ("C", 260, C_C))}
k1 = ring.dot(80, size=30, color=KEY, label="k1", id="k1")
s3.step("Instead, bend the hash space into a ring.").reveal(ring.node, style="zoom")
s3.step("Each server is hashed onto the ring too.").pop(list(srv.values()), stagger=160, from_="edges")
s3.step("A key hashes to a spot on the same ring.").pop([k1])
s3.step("It walks clockwise to the first server it meets.").walk(k1, ring, 150, absorb_into=srv["B"])

The caption of each step is also its narration line. walk moves the key along the ring and lets the server absorb it. The project was made with stage="steady", which keeps the camera still and joins the scenes with short crossfades, so the video reads as one stage whose content changes. The top-level settings of the saved file, with the scenes left out:

{
  "$schema": "https://opencanviz.com/schema/v1.json",
  "title": "Consistent hashing",
  "artboard": { "x": -960, "y": -540, "width": 1920, "height": 1080, "background": "#0f172a" },
  "sceneNames": ["Title", "Modulo", "Ring", "Add a server", "Results"],
  "sfxPack": "soft"
}

How the derivative video was written

The derivation is one call. Each line is a left side and a right side, so align="eq" can line up the equals signs. \part{a}{...} marks a single term inside a formula, so the flash lands on exactly the two x squared terms the caption says cancel:

lines = s2.derivation([[r"f'(x) =", r"\lim_{h \to 0} \frac{(x+h)^2 - x^2}{h}"],
                       [r"=", r"\lim_{h \to 0} \frac{\part{a}{x^2} + 2xh + h^2 - \part{b}{x^2}}{h}"],
                       [r"=", r"\lim_{h \to 0} (2x + h)"],
                       [r"=", r"2x"]], at=body.inset(60, 0), size=76, gap=30, align="eq")
s2.step("Expand the square. The x squared terms cancel.").stagger(lines[1], style="fade", gap=300) \
    .emphasize(lines[1][1], style="flash", part=["a", "b"], color=AMBER, offset=1000)

The slide along the curve is a single step: ride moves the point from x = -2 to x = 2 and turns the tangent with it, while the caption says "On the left it falls. At zero it is flat. On the right it climbs."

s3.step("On the left it falls. At zero it is flat. On the right it climbs.") \
    .ride(dot3, pl3, sq, -2, 2, duration=3600, tangent=tan3)

The formulas are compiled to images by tex2svg.js, so they play in every export. That step needs node and mathjax-full on the machine that runs the script.

Install the skill

Claude Code

Add the repository as a plugin marketplace, then install the plugin:

/plugin marketplace add opencanviz/opencanviz-skills-repo
/plugin install opencanviz@opencanviz-skills

Or from your shell:

claude plugin marketplace add opencanviz/opencanviz-skills-repo
claude plugin install opencanviz@opencanviz-skills

Then ask Claude for an openCanviz video as JSON, or run the skill directly with /opencanviz:opencanviz-json.

To use the skill without the plugin system, copy plugins/opencanviz/skills/opencanviz-json/ to ~/.claude/skills/opencanviz-json/ for all your projects, or to .claude/skills/opencanviz-json/ for one project.

Claude apps (claude.ai, desktop)

Download opencanviz-json.zip, then in Claude open Customize > Skills, click +, choose Create skill, then Upload a skill and pick the zip.

Other agents and chatbots

Paste the contents of SKILL.md into the chat or your agent's system prompt, and attach schema.json and one of the examples if the tool allows files. Agents that read a skills folder can use the opencanviz-json folder as is.

Turn the file into a video

1. 1

   Ask for a video

   Ask the agent for an openCanviz video as JSON on your topic, for example: make a 60-second openCanviz video as JSON that explains how DNS works.

2. 2

   Copy the JSON

   Copy the file the agent writes.

3. 3

   Import it

   Open opencanviz.com/create, choose Import, paste the JSON and click Import project.

4. 4

   Voice it

   In the editor, open the Narration panel and click Generate All Scenes to voice the narration.

From there it is an ordinary openCanviz project. You can change any text, color or position in the editor, and each step stretches to fit its recorded narration.

Who it is for

• Teachers and tutors who want a worked example, a derivation or a graph to build up step by step, in the order they would explain it on a board.
• Developers and technical writers who explain systems: request flows, caches, sorting, data structures and code walkthroughs.
• Creators who want a script turned into a first cut they can edit scene by scene.

Get the skill

Install the plugin in Claude Code from opencanviz/opencanviz-skills-repo, or download opencanviz-json.zip for the Claude apps and other agents. Then import the file your agent writes at opencanviz.com/create. The docs cover the JSON format, the schema reference, JSON examples and the rules for AI agents.