Packages

VideoML NPM Modules

Reference implementations published as composable packages.

@videoml/player

NPM: @videoml/player · GitHub: VideoML/player · Source: web-component.ts · runtime.ts

Browser runtime + web component. Drop <vml-player>into any page to preview VideoML.

import { defineVmlPlayer } from "@videoml/player";

defineVmlPlayer();

// HTML
// <vml-player src="/videos/intro.babulus.xml" auto-play></vml-player>

@videoml/stdlib

NPM: @videoml/stdlib · GitHub: VideoML/stdlib · Source: dom/components.ts · tokens/index.ts

Standard library of layouts, typography, colors, and components with DOM + React parity.

import { registerVideoMLComponents } from "@videoml/stdlib/dom";
import { TitleSlideLayout } from "@videoml/stdlib/react";

@videoml/toolchain

NPM: @videoml/toolchain · GitHub: VideoML/toolchain · Source: generate.ts · index.ts

Core library for loading VML, generating timing/audio artifacts, and rendering outputs. The @videoml/cli wraps this.

import { generateComposition } from "@videoml/toolchain";

const artifacts = await generateComposition("content/intro.babulus.xml");

@videoml/cli

NPM: @videoml/cli · GitHub: VideoML/cli · Source: cli.ts

Render VideoML to MP4 with the vml CLI.

vml generate content/intro.babulus.xml
vml render --script src/videos/intro/intro.script.json --frames .videoml/out/intro/frames --out intro.mp4