Onmark is a screenplay-first video compiler for people and agents. Write one HTML document with semantic film elements, ordinary CSS, and optional seekable motion. Onmark compiles the authored intent into an exact timeline, renders it through Chromium, mixes media with FFmpeg, and writes a delivery-ready video.

screenplay → Timeline IR → Render Units → browser frames + audio → video

One timeline. Three visual languages.

Each film is one authored HTML document rendered by the same deterministic CLI.

Quick start

Install the desktop CLI on macOS arm64, Linux x64, or Windows x64:

npm install --global @onmark/cli

Create film.html:

<om-film>
  <om-scene>
    <om-shot duration="3s">
      <om-title>Hello, motion.</om-title>
    </om-shot>
  </om-scene>
</om-film>

Render it:

onmark render film.html

The command writes renders/film.mp4 without overwriting an existing file. Validate or inspect the same production plan without launching Chromium:

onmark check film.html
onmark inspect film.html --json
onmark snapshot film.html --frame 42
onmark review film.html
onmark doctor
onmark benchmark film.html --runs 3 --json

snapshot writes a lossless production frame to renders/film-frame-42.png. It uses the same render region, browser/native path, and verified pixel contract as the complete film; it is not a preview approximation.

review reuses the production region cache and writes lossless checkpoints, objective empty-or-clipped semantic-layout findings, manifest.json, and a static contact sheet under a content-addressed reviews/film-*/ directory. Pass --against <prior-manifest> to compare exact region identities after an edit.

Declare typed presentation fields when one film needs many data variants:

<om-film>
  <om-fields>
    <om-field name="headline" type="text" default="Summer edit"></om-field>
    <om-field name="accent" type="color" default="#ff4d36"></om-field>
  </om-fields>
  <om-scene>
    <om-shot duration="3s">
      <om-title data-om-text="headline">Summer edit</om-title>
      <div data-om-css="accent" style="--accent:#ff4d36"></div>
    </om-shot>
  </om-scene>
</om-film>

Override only the values you need:

{ "headline": "Autumn edit", "accent": "#c56cff" }

onmark check film.html --variant autumn.json
onmark render film.html --variant autumn.json --output autumn.mp4

For a bounded campaign, onmark batch batch.json resolves the screenplay, freezes its assets, and bundles its presentation once. Paths are relative to the manifest:

{
  "version": 1,
  "screenplay": "film.html",
  "renders": [
    { "variant": "variants/summer.json", "output": "renders/summer.mp4" },
    { "variant": "variants/autumn.json", "output": "renders/autumn.mp4" }
  ]
}

Unchanged render regions are reused across items and later managed-browser invocations; each run reports aggregate region and frame reuse. Variant values cannot change timing, media sources, dimensions, or output profiles. Caption tracks declared by the screenplay are shared by the complete batch.

Use the default opaque H.264/AAC MP4 for delivery, or select the alpha-preserving ProRes 4444/PCM MOV profile by filename:

onmark render film.html --output film.mov

Declare one or more external caption tracks in the film. Onmark burns every declared track by default; --captions selects an ordered subset:

<om-captions id="en" src="captions/en.vtt" lang="en"></om-captions>
<om-captions id="zh" src="captions/zh.srt" lang="zh-CN"></om-captions>

onmark render film.html \
  --output launch.mp4 \
  --width 1920 \
  --height 1080 \
  --fps 30000/1001 \
  --captions zh

Install the optional agent skill for a product-owned create/check/inspect/render loop:

npx skills add varo-yang/onmark --skill onmark-video

Why screenplay-first

• Intent before coordinates. Source describes scenes, shots, content, cues, and relationships. Rust owns absolute frame placement and timing provenance.
• The browser remains the canvas. Use HTML, CSS, Canvas, WebGL, Three.js, GSAP, media, fonts, and SVG without introducing a second layout engine.
• One execution model. Whole-film, partitioned, local, Lambda, and incremental renders consume the same verified Render Units and assembler.
• Failures stay explainable. Authored mistakes are diagnostics with source spans; browser, media, and infrastructure faults remain typed errors.

Authoring

An Onmark film is one self-contained HTML document. Custom elements carry screenplay meaning; ordinary HTML and inline CSS carry presentation. Optional data-om-motion code exports seekable animation through adapters such as onmark/motion/gsap.

The compiler supports authored video, audio, voice-over, music, sound effects, titles, calls to action, cues, and imported SRT, WebVTT, or ASS captions. Unknown browser components remain sequential until conformance proves that they are safe to seek or partition.

Browse showcases/ for complete films using native media, CSS 3D, GSAP, Canvas 2D, raw WebGL, Three.js, captions, and audio.

Architecture

Rust owns compilation, planning, media normalization, browser control, encoding, and artifact verification. TypeScript owns authoring bindings and browser presentation. The compiler core has no filesystem, network, clock, Chromium, FFmpeg, or cloud dependency.

The repository contains four Rust crates:

• onmark-core — model, parser, diagnostics, compiler, IR, and wire contracts;
• onmark-media — bounded media and subtitle normalization;
• onmark-render — Chromium, FFmpeg, Render Units, and verified artifacts;
• onmark-cli — the desktop command and composition root.

Browser packages live under packages/. Rust wire types generate the checked-in schemas and TypeScript codecs; CI rejects generated drift.

Development

Rust 1.97.0, Node.js 26.4.0, and pnpm 11.9.0 are pinned.

cargo test --workspace
cargo clippy --workspace --all-targets --all-features
cargo fmt --all -- --check
pnpm install --frozen-lockfile
pnpm format:check
pnpm lint
pnpm typecheck
pnpm test
cargo xtask schema --check

Design contracts:

• Architecture
• Language specification
• Presentation contract
• Competitive pipeline review
• 中文文档

Onmark is available under the MIT License.