Docs
Custom elements
A custom element is a TSX class that extends Node. It compiles into a component asset and plays on a type=component clip.
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. animate() is the method the timeline calls. animateIn() is the intro. Keep them separate. 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: generators,
animatevsanimateIn