WinnerTVBEurope Best of Show, IBC 2026Standard outputEBU OGraf HTML5 packages
FreeOpen source under AGPL-3.0
One fileWindows and Linux, nothing to install
Your turn
Take the controls
Each of these was exported from Studio and it's running in your browser. Pick one, take it in and out like an operator, then change its data and watch it update on air.
Lower third. A name strap with one Style field that restyles it for news, breaking or sport.
Scoreboard. Goal buttons, a match clock and a leader highlight that all run inside the graphic.
Ticker. A native crawl with speed, direction, right-to-left text and update timing on the form.
Countdown. Start, Pause, Reset and Restart buttons, overtime, and an alarm the graphic fires itself.
Clock. A live clock an operator or feed can switch between UTC and any time zone, on air.
Bug / DOG. A channel identifier with a channel list and a pulsing live indicator.
Rankings. A standings table: press Next and every row slides to its new place.
Shader background. Animated GLSL light streaks with speed, tint and glow controls for the operator.
Running order
Everything a package needs
From a single strap to a full channel package, with the data model, reuse and checks that playout depends on.
- 01
Visual authoring
Compose text, images, shapes, editable vector paths and Lottie animations in a dockable workspace with multi-monitor support.
- 02
Animation and effects
Independent property tracks, easing, seamless loops, gradients, masks and composable effects, including GPU shaders.
- 03
Live data
Bind text, images and colours to operator fields, with structured GDD objects, arrays and runtime collections.
- 04
AI with operator control
The built-in assistant and external MCP agents use revision-checked operations. You review each proposal, and the result stays editable.
- 05
Reusable designs
Brand Kits, style packs, components and procedural patterns keep every graphic in a package consistent.
- 06
Template sets
Save one template or a whole package as .ogs, with shared controls and assets, inherited canvas defaults and a scene explorer.
- 07
Cropping
Trim layers, image and video sources, and output canvases while keeping assets and animation editable.
- 08
Portable OGraf output
Export HTML5 packages with realtime playback and deterministic non-realtime seeking, checked before every save and export.
Timeline
From design to playout
- Start
Design
Start from a recipe or a blank canvas. Lay out text, shapes, images and shaders, and animate them on the timeline.
Make a lower third → - Step
Connect data
Add the fields operators fill in at playout, and bind them to text, images and colours.
Connect operator data → - End
Play out
Export a checked .ograf.zip and play it in any OGraf-compatible renderer, in realtime or frame by frame.
Export a package →
Make your first graphic in minutes
Download one file, run it, and open Studio in your browser.