Custom elements

A custom element is a TSX class that extends Node, or a closer built-in such as Txt or Layout. The class compiles into a component asset. The timeline plays it on a clip with type component.

JSX creates real nodes immediately. It is not React.

Prefer a catalog template when one already covers the design. Call component with action createFromTemplate, then place the returned assetId with timeline_edit addClip. Write a class from scratch only when no template fits.

Packages

Import from these three packages only:

Package	Role
@vidova/2d	Nodes, JSX, @signal / @initial / @colorSignal
@vidova/core	Signals, generators, tweens, refs, easing
@vidova/components	Built-in scene nodes such as ScreenRecording and FaceCamera

Details: Packages.

Timeline contract

The exported class name is componentName. atTime(time, duration) is the method the timeline calls for each frame. animate() is the fallback. Layout and naming rules that fail at render: Layout.

The editor must be open. A create or edit that reports FAILED TO RENDER is a broken element. Fix it before you place the clip.

Asset inputs (type: asset) let a component take an image, video, audio, 3D model, or screen recording. The clip stores the asset ID. At preview the class receives a playback URL or a VidovaClipData object. Inputs.

Shaders are SkSL on a cached node, not GLSL. Shaders.

Next

• Quickstart: smallest working class, then place it
• Packages: @vidova/2d, @vidova/core, @vidova/components
• Authoring: props, constructor, methods
• Inputs: inputDefs, asset inputs, componentInputs
• Signals: reactive props
• Layout: flex, layout={false}, naming
• Shaders: SkSL, cache, withCommonShader
• Animation: atTime, schedules, and the animate fallback