Docs

@vidova packages

Custom elements import @vidova/2d for nodes and JSX, @vidova/core for signals and tweens, and @vidova/components for built-in scene nodes.

View as Markdown

Custom element source imports three packages. JSX is compiled with @vidova/2d as the JSX source. Do not import React.

`@vidova/2d`

Nodes, JSX, and property decorators.

Export	Use
`Node`, `NodeProps`	Base class and props for a custom element
`Rect`, `Circle`, `Txt`, `Layout`	Shapes, text, flex containers
`Code`	Syntax-highlighted code. Set `letterSpacing` to `0` and `fontFamily` to `Fira Code Variable`
`Line`, `Path`, `QuadBezier`	Vector drawing
`Img`, `Video`	Bitmap and video. Call `videoRef().play()` directly. Do not `spawn(videoRef().play())`
`Gradient`	Fills
`@signal`, `@initial`, `@colorSignal`	Class property decorators

import { Node, NodeProps, Txt, Rect, signal, initial } from '@vidova/2d';

`@vidova/core`

Signals, math helpers, easing, and generator types for the animate() fallback.

Export	Use
`SignalValue`, `SimpleSignal`, `ColorSignal`, `PossibleColor`	Prop and field types
`clamp`, `map`	Step progress and value mapping in `atTime`
`ThreadGenerator`	Return type of `animate()` and `animateIn()`
`waitFor`, `tween`, `all`	Timing and parallel tweens in `animate()`
`createRef`	Hold a child node for later animation
`easeOutCubic`, `easeInOutCubic`	Timing functions
`withCommonShader`	Prepend the standard SkSL prelude to a fragment body

import {
  SignalValue,
  SimpleSignal,
  all,
  easeOutCubic,
  withCommonShader,
  type ThreadGenerator,
} from '@vidova/core';

createSignal exists for local values inside a method. Do not use it for class props. Declare those with @initial and @signal. See Signals.

`@vidova/components`

Built-in scene nodes. Use these when an element needs recording footage, the camera overlay, or the same cursor and caption chrome as the editor.

Export	Use
`ScreenRecording`	Screen-recording surface
`FaceCamera`	Camera overlay
`AnimatedCursor`	Cursor overlay
`AnimatedCaptions`	Caption renderer
`AnimatedKeybindings`	Keystroke overlay
`ClickEffect`	Click burst
`MouseIndicator`	Mouse highlight
`BackgroundImage`	Still background
`ThreeViewport`	3D viewport
`VidovaClipData`	Type for a `vidova` asset input

import { ScreenRecording, FaceCamera } from '@vidova/components';

Asset inputs of type vidova resolve to a VidovaClipData object (screen, camera, cursor, click, keyboard). Image, video, audio, and model3d asset inputs resolve to playback URLs. The clip still stores asset IDs. Use @initial('') on URL signals. Details: Inputs. SkSL on a cached node: Shaders.

Most catalog templates import only @vidova/2d and @vidova/core. Reach for @vidova/components when the element wraps editor footage, not when it is a title or chip.