JsonCut
CUSTOM BLOCKS

Use standard layers first.
Extend the rare scene that needs more.

Add controlled HTML, CSS, canvas and JavaScript visuals while keeping timing, geometry, inputs and validation explicit.

Notes, As They Happen — editable JsonCut video example
Editable Video · 1080 × 1920 · 9:16Notes, As They Happen
01HTML + CSS022D + 3D canvas03Declared inputs
WHAT IT IS

Custom blocks are visible expert layers for specialized visuals, not a second hidden project format.

SEE THE WORKFLOW

HTML + CSS
2D + 3D canvas

Custom blocks are visible expert layers for specialized visuals, not a second hidden project format.

HTML + CSS
Expose normal controls to non-coders
Declared inputs
Procedural backgrounds
Declared inputs
MOTION, EXPLAINED VISUALLY

Keep code visible.
Declare what can change.

HOW IT WORKS IN STUDIO

Enough control for real work.
Only when you need it.

Add controlled HTML, CSS, canvas and JavaScript visuals while keeping timing, geometry, inputs and validation explicit.

01 · SOURCE

Separate HTML, CSS and JavaScript

A focused editor keeps each concern readable with syntax highlighting, validation and a live element preview.

02 · INPUTS

Expose normal controls to non-coders

Declared colors and numbers appear as familiar inspector inputs instead of requiring repeated source edits.

03 · TIME

Follow project time

Controlled time, progress and frame values keep procedural visuals aligned with seeking and headless rendering.

04 · BOUNDARY

Extend only the layer that needs it

Geometry, opacity, hierarchy and entrance or exit motion remain ordinary project properties around the specialized visual.

THE CAPABILITIES

What makes custom blocks useful in real work.

Each capability remains connected to the same editable JsonCut project.

01

Keep code visible

Experts can inspect and edit the block source with syntax highlighting, validation and a focused preview.

02

Declare what can change

Typed inputs expose colors and parameters without asking every user to edit source code.

03

Render deterministically

The runtime supplies project time and controlled capabilities for consistent browser and headless output.

FROM FIRST DRAFT TO OUTPUT

Separate HTML, CSS and JavaScript.
Extend only the layer that needs it.

1

Separate HTML, CSS and JavaScript

A focused editor keeps each concern readable with syntax highlighting, validation and a live element preview.

2

Expose normal controls to non-coders

Declared colors and numbers appear as familiar inspector inputs instead of requiring repeated source edits.

3

Extend only the layer that needs it

Geometry, opacity, hierarchy and entrance or exit motion remain ordinary project properties around the specialized visual.

USE IT FOR

Procedural backgrounds.
And the work after it.

01Procedural backgrounds
02Specialized data graphics
03Custom branded motion
QUESTIONS

Know what the feature changes.

01Is this available in both image and video projects?

The page states where a capability applies. Shared controls use the same visual language in both editors.

02Does it remain editable after using AI?

Yes. The assistant changes ordinary project layers and versions, so you can inspect and refine the result.

03Can the same result be automated?

Yes. Projects can become typed templates or be rendered through the focused V2 API and MCP surface.

KEEP EXPLORING

Connect the capability to real work.

Motion graphicsVideo StudioExamples
TRY IT IN THE REAL STUDIO

See the control.
Keep the result editable.

Start a free project and use the same feature in the image or video workflow it belongs to.

Start creating free