Rive for broadcast
Build scorebugs, lower thirds, and stream overlays with your coding agent and the Rive CLI, and refine them in the Rive Editor as often as you like. One file holds the design, the animation, and the logic. Your software sets the score, the clock, and the names through Data Binding while you’re on air.
A full match package in real 3D, in one Rive file. Live Rive artboards texture the screens, LED boards and score cube, all driven by data. Click a score to add a goal, or a team for stats.
Games Done Quick
GDQ’s omnibar runs through 140+ hours of live charity streams. Staff take it over in real time, and many updates are now just a new Rive file.
LIGR
The sports broadcast platform LIGR runs Rive graphics on live matches, bound to match data, with custom animations when a goal is scored.
Rive Editor
Designers and animators build every graphic by hand in the Rive Editor: lay out scorebugs and lower thirds, animate them on the timeline, wire up in and out states with the State Machine, and bind every field to data.
Data Binding
Bind scores, clocks, names, and team colors to data. Your software changes a value, and the graphic updates on air.
Text
Names, scores, and totals stay aligned as their values change, in any language.
Layouts
One responsive design that reflows for widescreen, vertical video, and every size between.
State Machine
Design in, out, and urgent states, and take them over live, without code.
Components
Build a lower third or a schedule card once, and reuse it across the whole show.
Scripting
Add logic inside the file, like a running clock or a rotation of sponsor spots.
How to get started
Your agent builds it. You test it in the CLI preview window and keep directing it until it’s right.
01 Paste the prompt
Paste it into Claude Code, Codex, Cursor, or any coding agent. The agent installs the Rive CLI for you.
02 Describe the graphic
Ask for a scorebug, a lower third, or a full match package. Your agent writes the Rive file and shows it in the CLI preview window.
03 Connect live data
Your agent binds the score, the clock, and the names to data and adds the Rive runtime to your web overlay or app.
04 Keep designing in the Editor
Push the file to your Rive account and open it in the Rive Editor. Refine layout, motion, and states with professional design and animation tools. Needs a free Rive account.
Why Rive
The design, the animation, and the logic live in one Rive file. Your software only sends data, so changing a graphic means uploading a new file.
Update without a rebuild
Change a graphic in the Rive Editor and upload the new file. GDQ now ships many fixes this way, with no developer time.
Agent speed, artist control
Your agent builds the package from a prompt, and designers shape every frame by hand in the same file.
Lower cost
No revenue share and no runtime fees. The runtimes are open source under the MIT license, and GDQ cut its custom animation code by up to 50%.
Sharp at any resolution
Vector, raster, and 3D in one scene, drawn on the GPU by the Rive Renderer, sharp at 720p and 4K.
FAQ
Common questions about building live graphics in Rive.
How does live data get into a graphic?
Through Data Binding. Your software sets values like the score or a player’s name, and the graphic updates right away.
Can I use Rive in my playout or streaming software?
Yes, in any app that can show a web page or embed a Rive runtime.
Can a graphic react to a goal or a donation?
Yes. Your software fires a trigger, and the State Machine plays the animation, like the goal banner in the demo above.
Can operators take over during the show?
Yes. Build overrides into the State Machine, like GDQ’s urgent mode for donation goals, and fire them from your control app.
Will graphics look sharp in 4K?
Yes. Rive graphics are vectors drawn by the Rive Renderer, so they stay crisp at any resolution.
Does Rive run in Unreal Engine?
Yes. The Rive runtime for Unreal Engine plays the same file, with State Machines and Data Binding.
Join our newsletter
Get all the latest Rive news delivered to your inbox.