Skip to main content
Glama

Kodecz is an open-source video rendering engine that turns a web page into an MP4. You write the video in HTML, CSS and JavaScript (React, WebGL, GSAP, Lottie or nothing at all), and Kodecz renders it frame by frame on an NVIDIA GPU with NVENC or on any CPU with x264, without taking a screenshot of every frame. It is an alternative to Remotion and HyperFrames, made to be driven by AI agents.

If Chromium can draw it, Kodecz can render it:

How it works

Two paths, one folder. Other tools take a screenshot of every frame and turn it into a PNG before encoding it; Kodecz never does, with or without a GPU.

Page is your index.html. Chromium draws frame N. On a GPU, that frame stays on the card as a texture; on the CPU, it is the raw frame Chromium just painted. Either way it goes straight to the encoder, NVENC on the card or x264 on the processor, and comes out as an MP4 with the audio mixed in. Frame N is always the same frame, in order, out of order or starting from the middle: same content, same timing.

Related MCP server: Agent Demo Studio

Numbers

Each square is one second. Rendering the same video, Kodecz keeps the processor busy for 10× less time (43.7 s → 4.4 s of CPU) and hands you the MP4 3× sooner (13.6 s → 4.6 s on the clock).

1080p · 150 frames · H.264 · RTX 5090 · how we measured

Against HyperFrames, measured on the same video and the same day: 11× less CPU (22.0 s → 2.0 s) and 2.4× sooner (6.4 s → 2.7 s) on the GPU. On a machine without a GPU, HyperFrames is slightly ahead on this video, which embeds a 1080p clip (26.3 s against 28.1 s of CPU); on a 27-second audiogram, Kodecz uses 2.4× less CPU (24.6 s against 59.9 s). All the numbers, and a script to reproduce them, are in docs/medidas.md.

Kodecz, Remotion and HyperFrames

Kodecz

Remotion

HyperFrames

You write the video in

any web page: HTML, CSS, JS, React, WebGL

React components

HTML

How each frame leaves the browser

GPU texture or the raw painted frame, no screenshot

screenshot (Page.captureScreenshot)

screenshot (HeadlessExperimental.beginFrame)

Encoding

NVENC on the GPU, or x264 on the CPU

ffmpeg, x264 on the CPU by default

ffmpeg, x264 on the CPU by default (NVENC with --gpu)

CPU time for the same 1080p video

4.4 s

43.7 s

22.0 s (measured 2026-11-02, next row)

Same video, all three on the same day (2026-11-02)

2.0 s CPU, 2.7 s wall

37.7 s CPU, 9.9 s wall

22.0 s CPU, 6.4 s wall

Same video on the CPU only, no GPU

28.1 s CPU, 7.1 s wall

—

26.3 s CPU, 6.8 s wall

1080×1080 audiogram, 814 frames, CPU only

24.6 s CPU, 9.3 s wall

—

59.9 s CPU, 12.2 s wall

License

Apache-2.0

Remotion License (paid for companies above 3 people)

Apache-2.0

Remotion and HyperFrames are good tools, and Kodecz learned from both. The capture methods come from their source code; the CPU numbers are ours, in docs/medidas.md.

Quick start

Status: early (0.1), Linux only, installed from a clone (not on npm yet). It is the engine we render our own videos with. Parts of the code, the internal docs and some media attributes (data-inicio…) are still in Portuguese.

Requirements: Linux, Node 24, ffmpeg, weston, bubblewrap, and Rust 1.85+ with a C/C++ toolchain (cmake, ninja): the Chromium host is compiled on your machine, with or without a GPU. For the GPU path, an NVIDIA GPU with NVENC (tested on an RTX 5090, driver 570+). Without one, the installer sets up the CPU path; HEVC and the transparent layer need the GPU.

git clone https://github.com/konecz/kodecz && cd kodecz
./instalar.sh                              # checks the system, installs and renders a test video
npm link                                   # puts `kodecz` on your PATH (or use: node cli/kodecz.ts)
kodecz render my-video/ MyVideo out.mp4    # GPU when there is one, CPU when not

./instalar.sh --verificar only says what is missing; ./instalar.sh --sistema also installs the missing apt packages (with sudo). Details in instalar/LEIAME.md.

Option

What it does

--hevc

HEVC instead of H.264 (GPU only)

--alpha

transparent layer: raw HEVC with alpha (.hevc, GPU only, no audio)

--from N --frames M

render M frames starting at frame N (the same frames as a full render)

--cpu

render on the CPU even when there is a GPU

--gpu

GPU only: fails (exit code 3) when there is none

--no-audio

skip the audio

kodecz preview my-video/ MyVideo --frame 90

one frame as PNG, in one to two seconds

kodecz preview my-video/ MyVideo --watch

re-renders the frames you are looking at on every save

kodecz check my-video/ MyVideo

automatic checks of every frame, without rendering (JSON)

kodecz render --help lists every option. The render prints one JSON line with the result on stdout. The original Portuguese names (--placa, --alfa, --de, --quadros, id="motor-video", qps…) still work for now.

Write a video

A video is a folder. index.html declares the size, frame rate and length; everything else is a normal web page.

<script type="application/json" id="kodecz">
{ "id": "MyVideo", "width": 1920, "height": 1080, "fps": 30, "frames": 150 }
</script>

<style>
  :root { --fps: 30 }
  h1 {
    font: 800 120px/1 "Schibsted Grotesk", sans-serif;
    animation: in 0.6s cubic-bezier(.3, 0, .2, 1) both;
    animation-delay: calc(15 * 1s / var(--fps));    /* enters on frame 15 */
  }
  @keyframes in { from { opacity: 0; transform: translateY(40px) } }
</style>

<h1>Hello, frame 15.</h1>
<video src="presenter.mp4" data-inicio="0" data-quadros="150"></video>
<audio src="music.wav" data-inicio="30" data-volume="0.6"></audio>
  • The block: width and height are the size in pixels (even numbers, width at least 800, up to 8192), fps the frames per second and frames the length in frames. The id is the name you pass to the commands. The full format is in docs/formatos/linha-do-tempo.md.

  • Animation: CSS @keyframes, element.animate(), GSAP and Lottie (bring your own copy). Kodecz pauses the page's timeline and puts every animation at N / fps seconds before drawing frame N.

  • Canvas and WebGL: define window.kodecz_frame(n, ms); it runs before each frame and must depend only on n.

  • Video and audio: <video> and <audio> with data-inicio (first frame), data-quadros (length in frames), data-recorte (frames cut from the start of the file), data-volume and data-velocidade (speed). Kodecz decodes them itself and mixes the audio in a single pass. On the GPU path, H.264 and HEVC video is decoded with NVDEC and composited under the page on the card, never inside the browser.

  • Not allowed: requestAnimationFrame, timers and the wall clock. They do not follow frame N. The render's JSON line counts the animations that do not follow the page timeline (animacoesSoltas) and the CSS transitions it sent straight to their end (transicoesAoFim).

For AI agents

Kodecz is made for any agent to write video with: a coding agent in a terminal, an agent in your own pipeline, or a script calling a model. Nothing in it is tied to one vendor. The agent needs only what it already handles: files, shell commands, HTML and CSS, and JSON.

  • The format is plain web. A video is an index.html and its files. Any model that writes web pages can write a video, and any tool that edits files can change one.

  • Kodecz blocks (blocos/): each editing technique (one-line captions, zoom to the end of a sentence, text that avoids the face...) is a folder with a KODECZ.md in plain Markdown (what, when, parameters, where it came from), the CSS, a snippet to paste and a right and a wrong example. An index lists them all, so an agent can find the right one without reading everything.

  • Automatic checks: kodecz check my-video/ MyVideo looks at every frame of the page without rendering the video (text over a face, captions on one line, the safe area of a declared destination, contrast over the real background, a zoom that ends with the sentence) and answers with one JSON line plus a picture of each problem, so the agent can fix it before a human looks. It needs a one-time node conferencia/preparar.ts.

  • Previews in one to two seconds (kodecz preview), so the agent sees what it wrote instead of guessing.

Install the Kodecz skills

Three skills teach an agent the method: kodecz (make a video: write, preview, check, fix, render), remotion-to-kodecz and hyperframes-to-kodecz (port a project, with the API mapped one to one). They need Kodecz installed on the machine (quick start above).

Agent

Install

Claude Code

/plugin install kodecz --marketplace konecz/kodecz (skills and the MCP server; before 2.1.275: /plugin marketplace add konecz/kodecz, then /plugin install kodecz@kodecz)

Codex, Cursor, Gemini CLI, Copilot and others

npx skills add konecz/kodecz

Any MCP client

the kodecz-mcp server: render, preview (frames come back as images) and check

The skills are plain Markdown in skills/, in the open Agent Skills format.

FAQ

Does Kodecz work without a GPU?

Yes. Without an NVIDIA GPU, Kodecz renders on the CPU: Chromium paints in software and the raw frame goes straight to x264. The same folder renders on both, frame for frame.

Is Kodecz an alternative to Remotion?

Yes. Both turn code into video. Remotion asks you to write React components; Kodecz takes any web page. On the same 1080p video with a presenter, Kodecz used 10 times less CPU and finished 3 times sooner on the GPU path.

Which AI agents can use Kodecz?

Any agent that can write files and run commands: Claude Code, Codex, Cursor, Gemini CLI or your own. The format is plain HTML, the editing blocks are Markdown and the checks answer in JSON. See AGENTS.md.

Is the output deterministic?

Frame N depends only on the page and on N: rendering in order, out of order or from the middle gives the same content at the same moment. In our test compositions the pixels are identical too. In real videos, Chromium can rasterize animated text slightly differently from one run to the next, by up to 2 color levels out of 255, which you cannot see. Timers and the wall clock are not allowed in a composition.

Which formats does it export?

MP4 with H.264 (default) or HEVC (GPU only), a transparent layer as raw HEVC with alpha (--alpha, GPU only, no audio), and AAC audio mixed from every <audio> and <video> on the page.

Patents

Kodecz contains no video codec. It asks the NVENC encoder in your GPU (or the ffmpeg installed on your system) to encode H.264 or HEVC. Those formats are covered by patent pools; using them in a product you sell or distribute may need a license from those pools, as with any software that writes H.264 or HEVC. See docs/patentes.md.

License

Apache-2.0. Third-party notices in NOTICE and docs/licencas/. The Schibsted Grotesk and IBM Plex Mono fonts in marca/fontes/ are under the SIL Open Font License.

The Kodecz name and logo are brand assets of Konecz; see docs/marca.md.

Authors

Kodecz was created by Pedro Henrique Lahr and Vanessa Cristine at Konecz. See AUTHORS.

Available Tools

3 tools
checkCheck a videoA
Read-only

Run Kodecz's automatic checks on every frame without rendering: text over the presenter's face, captions on one line, the safe area of a declared social destination, contrast over the real background, zoom timing. Returns the JSON result, each problem with its frame, and pictures of the worst frames. ok: false means a rule was broken: fix and check again.

NameRequiredDescriptionDefault
idYesThe id in the page's <script type="application/json" id="kodecz"> block
folderYesVideo folder (the one with index.html), absolute or relative to the working directory

TDQS

A3.9/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already declare readOnlyHint and closed-world, and the description adds meaningful context beyond them: it is non-rendering (cheap), it reports per-problem frames, and `ok: false` is the failure contract. It stops short of saying whether the 'pictures of the worst frames' are written to disk, which matters for a tool marked read-only.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Front-loaded with the core action and the 'without rendering' qualifier, then the rule list, then the return/failure contract. The rule enumeration is long but each item is a distinct check, so it earns its space; only the run-on list construction costs a point.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

With no output schema, the description correctly takes on the return-value burden by naming the JSON result, per-problem frames, and worst-frame images. It is nearly complete for a two-param read-only check, with only the on-disk side effects of the images left unstated.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100% and both parameters carry their own descriptions (folder with index.html, id from the JSON script block), so the schema does the work. The description adds no additional parameter semantics, making the baseline 3 correct.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb and resource ('run automatic checks on every frame') and enumerates the exact rule set being validated. The phrase 'without rendering' cleanly separates it from the sibling `render`, so an agent can pick it without opening a schema.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

'fix and check again' implies an iterate-until-ok workflow, which is real guidance. However, it never says when to prefer this over `preview` or when to skip it and go straight to `render`, leaving the sibling routing to inference.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

previewPreview framesA
Read-only

Draw some frames of a Kodecz video as lossless PNGs (the same pixels as the render, one to two seconds) and return them as images. Use it to look at what you wrote instead of guessing.

NameRequiredDescriptionDefault
idYesThe id in the page's <script type="application/json" id="kodecz"> block
folderYesVideo folder (the one with index.html), absolute or relative to the working directory
framesYesFrame numbers, e.g. [0, 45, 149]

TDQS

A4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already cover the safety profile (readOnlyHint=true, openWorldHint=false). The description adds genuinely useful behavior the annotations cannot convey: lossless PNGs, pixel-identical to the render, limited to one to two seconds of footage, and returned as images rather than paths.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences, front-loaded with the core action and return format. Every clause earns its place, including the closing rationale for using the tool.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

With all three required parameters fully described in the schema and no output schema, the description fills the main remaining gap by explaining that images are returned directly. Minor omissions: no note on cost, latency, or behavior with out-of-range frame numbers.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, with all three parameters documented including frame-number examples, so the schema carries the load. The description adds nothing about parameters, though it does note the 1-2 second scope, which loosely constrains the frame count. Baseline 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb and resource ("Draw some frames of a Kodecz video as lossless PNGs") and the return type ("return them as images"). It implies the relationship to `render` by saying the pixels match the render, but never names `render` or `check` to explicitly draw the boundary.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

"Use it to look at what you wrote instead of guessing" gives a concrete motivation and context for choosing this tool over blind edits. It stops short of stating when to prefer `render` or `check` instead.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

renderRender a Kodecz videoA
Idempotent

Render a Kodecz video folder to MP4 (GPU with NVENC when there is one, CPU with x264 when not). Returns the render's JSON result line. Run check first.

NameRequiredDescriptionDefault
idYesThe id in the page's <script type="application/json" id="kodecz"> block
cpuNoRender on the CPU even when there is a GPU
fromNoFirst frame to render
hevcNoHEVC instead of H.264 (GPU only)
alphaNoTransparent layer as raw HEVC with alpha (GPU only, no audio)
folderYesVideo folder (the one with index.html), absolute or relative to the working directory
framesNoHow many frames to render from `from`
outputYesOutput file (.mp4; .hevc with alpha)

TDQS

A3.8/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already declare it is not read-only, is idempotent and non-destructive, and the description usefully adds the GPU/NVENC-vs-CPU/x264 selection rule and the return shape ('JSON result line'). However, it never says what happens to an existing `output` file, whether the render is long-running, or what the result line contains — notable gaps for a file-writing mutation.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two tight sentences: the action and encoding rule come first, the return value and prerequisite follow. Zero filler, and the prerequisite is placed where it will be read before invocation.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

With 8 parameters, a mutation profile, and no output schema, the description supplies the key missing pieces: encoding fallback behavior, the return format, and the `check`-first requirement. Overwrite semantics and expected runtime remain unstated, which keeps it from being complete.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so all 8 parameters are already documented in the schema, including the GPU-only constraint on `hevc` and `alpha`. The description's GPU-vs-CPU sentence largely restates the `cpu` parameter's own text, adding little beyond what the structured field already provides.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb (render) and resource (a Kodecz video folder) plus the output format (MP4) and encoder selection logic, so the agent knows exactly what happens. It does not distinguish itself from the `preview` sibling, so it falls just short of a 5.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Gives an explicit prerequisite sequence ('Run `check` first'), which is actionable context an agent would otherwise miss. It offers no guidance about when to choose `preview` instead, so it is clear but not fully discriminating.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 3 tool updatesv0.1.0
    • First observedcheck
    • First observedpreview
    • First observedrender

TDQS

A4.1/5.0

Scored across 3 tools

Disambiguation5/5

Each tool has a clearly separate role: check validates rules, preview samples frames as images, render produces the final MP4. The descriptions explicitly encode the workflow order (`check` first), so an agent can't mistake one for another.

Naming Consistency5/5

All three are single, lowercase verbs (render, preview, check) with no casing or style deviation. The pattern is predictable and readable.

Tool Count4/5

Three tools is a tight, well-scoped surface for a render-and-verify pipeline, with no redundancy. It sits at the low end, with no tool for inspecting or listing video folders, which leaves the set slightly thin.

Completeness4/5

The validate → preview → render lifecycle is covered, including failure reporting with offending frames, so the core loop has no dead ends. Minor gaps exist: nothing to discover or initialize a Kodecz folder and nothing to clean up output artifacts.

Maintenance

ActivityMaintained
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers