Create images and videos
Learn the complete V2 authoring model through real, editable JsonCut projects and rendered outputs.
V2 uses one HTML-first source for still images and timed video. The JSON object describes the canvas and template inputs; ordinary HTML defines editable layers; CSS defines their appearance; explicit data-jc-* attributes add timing, media behavior, motion and Studio controls.
SaaS feature window
A three-scene product story using real media, nested layers, keyframes, transitions and template variables.
The model in one view
HtmlVideoProject
├── canvas: compositionKind, width, height, fps, duration
├── source: html + css
├── layers: elements carrying data-jc-clip and data-jc-kind
│ ├── hierarchy: scenes, groups and ordinary layers
│ ├── time: start, duration and track
│ ├── media: image, video and audio references
│ ├── motion: property keyframe tracks and transitions
│ └── bindings: text, media, visibility and editable properties
├── variables + values
└── customBlocks: isolated DOM, SVG, Canvas 2D or WebGLChoose the next page by task
| You want to… | Read |
|---|---|
| Create a valid canvas and source envelope | Project source |
| Position and style editable layers | Layout and styling |
| Add text, images, footage, SVG and audio | Layers and media |
| Organize a longer story | Scenes and groups |
| Animate properties and connect scenes | Motion and transitions |
| Mix audio and add timed captions | Audio and captions |
| Turn a project into a reusable contract | Variables and templates |
| Cut, mask and build editable vector shapes | Vectors and compositing |
| Draw something outside the built-in layer model | Custom blocks |
| Give people and Agents one production contract | Design and production spec |
| Validate and submit a complete source | Validation and complete source |
Author ordinary layers first
Prefer text, shapes, media, groups, keyframes and transitions. They remain fully understandable in Studio and are easier for an Agent to patch. Use a custom block only for visuals that cannot be expressed with those ordinary layers.
The full source linked above is not a separate demo format. It is the same V2 project object accepted by the API and importable into Studio.