Chorono: create editable 2D animations with Claude Code or Codex

I'm building Chorono, a free, open-source 2D animation editor that runs locally in your browser. Claude Code or Codex can work on a scene through MCP, and you can refine the same layers and keyframes in the visual editor.

The workflow combines agent-driven scene creation with direct control over text, shapes, motion paths, particles and timing. Projects can be saved and reopened for the next revision.

Start with the local editor

You need Node.js 20+, npm, Git and a modern browser. The source-checkout workflow is:

git clone https://github.com/codie1982/chorono-editor.git
cd chorono-editor
npm ci
npm run cli:build
npm run chorono -- setup
npm run chorono -- start --background --open

In the editor, choose MCP → Connect this editor. Reload the MCP connections in your agent client if necessary, then check:

npm run chorono -- doctor

A running local server and a connected editor tab are separate parts of the setup. The browser tab must be explicitly connected; reconnect it after a browser reload. Setup installs the bundled Chorono skills for the selected supported agent clients.

The editor is free. Access to Claude Code or Codex is configured separately in the agent client.

Create a small scene

For a first animation, keep the brief small enough to inspect:

Create a 4-second animation with the title “Make ideas move.” and three colorful circles. Keep every layer and keyframe editable. Inspect preview frames and save a portable Chorono project.

The agent can create named objects, set animation tracks, inspect frames and save the scene through MCP. The visual editor gives you access to those same objects and their timing.

Keep the authoring loop inspectable

The MCP workflow exposes scene reads, revision checks and rendered previews. When editing an existing scene, an agent reads its current revision and passes that revision with the mutation. Procedural scripts can be dry-run, inspected and committed as a plan.

Preview images are part of the process: the agent can inspect representative times before saving. You can then play the animation yourself and continue with manual revisions.

Make a manual revision and reopen the project

Select the headline and change its text. Select a circle and change its fill, then move a keyframe to adjust the timing.

Save the editable scene as a portable project. Reopen it and check that the headline, color and timing changes are still there. This is the first-run task I would most like people to try.

The repository includes a self-contained four-second example with eight named layers and 51 editable keyframes:

https://github.com/codie1982/chorono-editor/tree/main/examples/first-animation

The local save-and-reopen workflow has been exercised on macOS. Feedback from other environments would be useful; this is not a claim of completed testing on every operating system.

Watch and try it

Workflow demo: https://www.youtube.com/watch?v=viJ98nH36yk

The longer demo includes a sped-up recording of the initial creation process and a later refined clock animation. The two parts show different stages of the work.

Project: https://chorono.com
Source and setup: https://github.com/codie1982/chorono-editor
Installation guide: https://github.com/codie1982/chorono-editor/blob/main/docs/en/installation.md

Which part of the first-run workflow needs the most improvement: setup, connecting the editor, refining the scene, or saving and reopening it? A report of the exact step that became unclear would help me prioritize the next changes.

Disclosure: This article was drafted with AI assistance.