Layers, media and SVG

Add editable text, shapes, images, footage, audio, HTML snippets and SVG without flattening the project.

Every editable element carries data-jc-clip and a stable id. Its data-jc-kind selects the focused Studio controls and validation rules.

Rendered output

Headphones product cinema

Real footage, product images, text and graphic layers stay independently editable across three scenes.

Video1920 × 108012 secondsEditable V2 source

Layer kinds

Kind	Best for
`text`	Headings, body copy, labels and editable text effects
`shape`	Rectangles, ellipses, paths, gradients and accents
`image`	Photos, screenshots, generated images and editable SVG
`video`	Footage with crop, trim, speed, volume and loop controls
`audio`	Music, narration and sound effects
`html`	Safe static markup that behaves like an ordinary layer
`caption`	Word-timed transcript segments
`scene`, `group`	Hierarchy and local compositions
`custom`	Isolated DOM, SVG, Canvas 2D or WebGL code

Media references

<video id="product-demo" data-jc-clip data-jc-kind="video"
  data-jc-name="Product demo" data-jc-start="0" data-jc-duration="4.63"
  data-jc-track="1" data-jc-media-start="1.2" data-jc-media-end="5.83"
  data-jc-playback-rate="1" data-jc-volume="0.85"
  src="jsoncut-media://media_product_demo"></video>

Upload substantial media with POST /api/v2/media and store the returned jsoncut-media://... reference. Small Base64 data URLs remain available within request-size limits.

Editable SVG

<div id="mark" data-jc-clip data-jc-kind="image" data-jc-name="Vector mark"
  data-jc-start="0" data-jc-duration="5" data-jc-track="3">
  <svg viewBox="0 0 100 100" aria-hidden="true">
    <path data-jc-vector-path d="M50 4 96 50 50 96 4 50Z" fill="#ff9418" />
  </svg>
</div>

SVG layers retain their source. Declared colors can be changed through ordinary Studio color controls without converting the vector to a bitmap.

Required clip identity and timing

Every editable tag needs a unique stable id, data-jc-clip, a valid data-jc-kind, numeric data-jc-start, positive data-jc-duration and a non-negative integer data-jc-track.

<h2 id="feature-title" data-jc-clip data-jc-kind="text"
  data-jc-name="Feature title" data-jc-start="1.2"
  data-jc-duration="3.4" data-jc-track="4">One source.</h2>

data-jc-name is strongly recommended for people and Agents even though the stable id is the machine identity.

Media controls

Attribute	Applies to	Meaning
`src`	image, video, audio	Owned media reference, HTTPS URL allowed by policy, or bounded matching data URL
`data-jc-media-start`	video, audio	Source in-point in seconds
`data-jc-playback-rate`	video, audio	Source playback multiplier
`data-jc-volume`	video, audio	Base volume before volume keyframes
`data-jc-fade-in`, `data-jc-fade-out`	video, audio	Audio fade duration in seconds
`data-jc-muted`, `data-jc-loop`	video, audio	Boolean playback behavior

Image projects reject video, audio, caption and scene kinds. Every image layer must use start 0 and duration 1.