Engineering

Codeboard / Drawing and Animation Toolkit

Self-initiated project

A JavaScript and TypeScript toolkit for drawing, storyboarding, and 2D animation through code. Scripts and .cboard projects keep layers, poses, and timing editable. The Clawd demo shows one way to use it.

Year: 2026
Disciplines: Software engineeringCreative codingProcedural animation

Live project Source on GitHub

Context

Drawings and animation need to be reopened and revised, rather than ending as a render. Codeboard preserves artwork structure and lets code control changes to drawings, poses, cameras, and audio.

Architecture

One package provides a JavaScript/TypeScript library and CLI. Scripts compose projects with layers, masks, brushes, and a timeline; .cboard files store editable projects. Rendering produces images, storyboards, or films. The agent plugin supplies API and review guidance, while the engine executes the artwork.

Technical stack

TypeScript
JavaScript
Node.js
FFmpeg

Implementation

A library and CLI for composing procedural artwork and running scene scripts.
Layers, masks, brushes, and .cboard projects that can be reopened for revision.
Poses, drawing holds, keyframes, cameras, and audio cues for controlling movement.
Frame and onion-skin inspection, followed by PNG, storyboard PDF, or movie export.

Resources for this project

Codeboard
Draw through code, keep your layers editable, then render a film. A free JavaScript and TypeScript toolkit for illustration, storyboards, and 2D animation.
Codeboard Agent Plugin
Ten free skills for drawing and animating with Codeboard. Your agent gets API manuals, runnable examples, and guidance for revising and inspecting the result.

Eight Clawd poses from walking through landing and settling — Each pose carries an action: walking, noticing, anticipating, jumping, and landing.

Clawd turnaround study with front, side, and back views — The turnaround keeps the body and four feet readable from every angle.

Controls for Clawd's width, height, lean, and foot placement — Pose controls reshape the body and foot contours while preserving the character of the drawing.

Overlaid Clawd poses in an onion-skin view for checking the jump — Onion skin reveals changes in shape and spacing through the jump.

Architecture

Implementation

A library and CLI for composing procedural artwork and running scene scripts.

Layers, masks, brushes, and .cboard projects that can be reopened for revision.

Poses, drawing holds, keyframes, cameras, and audio cues for controlling movement.

Frame and onion-skin inspection, followed by PNG, storyboard PDF, or movie export.

Resources for this project

Codeboard

Draw through code, keep your layers editable, then render a film. A free JavaScript and TypeScript toolkit for illustration, storyboards, and 2D animation.

Codeboard Agent Plugin

Ten free skills for drawing and animating with Codeboard. Your agent gets API manuals, runnable examples, and guidance for revising and inspecting the result.