Build Broadcast Graphics
with Code.
LIGR's Code Graphics protocol lets developers create interactive broadcast overlays using standard web technologies. Write once, broadcast everywhere.
Web Graphics. Live Data. Simple Protocol.
No proprietary tools. No vendor lock-in.
LIGR overlays are standard HTML, CSS, and JavaScript running in sandboxed iframes. The ligr.gfx.v1 protocol uses the browser s postMessage API to bind live match data to your graphics. Your code listens for structured match events and updates the DOM in real time. Broadcast-quality graphics with zero complexity.
Key Capabilities
- Standard HTML, CSS, JavaScript — no custom syntax
- Use any web framework (React, Vue, Svelte, etc.)
- Sandboxed execution — your code runs safely in isolation
- postMessage protocol for live data binding
- Real-time updates from match event feeds
- Full browser APIs (Canvas, WebGL, WASM, animations)
- Responsive design support for any broadcast resolution
- Preview and test before going live
How Code Graphics Works
Eight simple steps from code to broadcast.
Create Your Graphic
Write standard HTML, CSS, and JavaScript — use any web framework you prefer.
Upload to LIGR
Package your graphic and upload it via the dashboard or CLI.
Configure in Fuse
Map match data fields to your graphic s inputs using Fuse's visual editor.
Bind Live Data
Match data (scores, clock, players, stats) automatically flows to your graphic.
Preview with Simulated Data
Test with realistic match data before going live.
Publish to a Theme
Save your configured graphic into a reusable broadcast theme.
Theme Applied to Match
Select your theme when setting up a live broadcast.
Overlay Renders Live
Your graphic renders in real time with live match data on the broadcast stream.
Use Any Web Technology
LIGR graphics run on the web. If it runs in a browser, it runs in LIGR.
React
Vue
Svelte
Three.js
WebGL
WASM
Canvas
CSS Animations
Rive
Lottie
Babylon.js
D3.js
And any other library or framework that compiles to JavaScript.
The postMessage Protocol
Your graphic receives structured match data via the browser s postMessage API.
When a broadcast match is live, LIGR's control room sends match events to your graphic s iframe using postMessage. Your code listens for these messages and updates the DOM accordingly. It's the same API developers use for cross-frame communication in any web application.
Each message contains structured data: score updates, clock ticks, player substitutions, match events, and stat changes. Your graphic decides how to visualise that data.
Two Paths for Developers
Manual: Code → Upload
Build your graphic locally in your favourite editor, test with mock data, then upload to LIGR via the dashboard or CLI.
- Full control over your code
- Use your own development workflow
- CLI tools for scripting and automation
- Version control your graphics
AI-Assisted: Natural Language → Code
Describe your graphic in plain language, let Claude AI generate HTML/CSS/JS, then review, customise, and upload.
- Describe what you want, not how to build it
- AI understands broadcast conventions
- Start with production-ready code
- Iterate and refine with Claude
Ready to build broadcast graphics?
Check out our developer documentation, API reference, and code examples to get started.
Frequently Asked Questions
LIGR graphics are standard web applications. Use any framework or library you prefer — React, Vue, Svelte, Three.js, WebGL, WASM, Canvas animations, Rive, Lottie, D3.js, or plain HTML/CSS/JavaScript. As long as it runs in a modern browser, it runs in LIGR.
LIGR graphics run in sandboxed iframes and receive match data via the postMessage API. Your graphic listens for messages containing structured match data (scores, clock, player stats, etc.) and updates the DOM in real time. No proprietary API needed — it's just standard browser messaging.
Yes. If you've built animations with Rive, Lottie, or CSS, they work directly in LIGR. You just need to integrate the data-binding layer so your animations respond to live match events. LIGR makes the integration seamless.
No. Code Graphics uses the standard ligr.gfx.v1 protocol, but you write in whatever language compiles to JavaScript. TypeScript, JSX, Vue single files — whatever you're comfortable with. LIGR doesn't require a custom dialect.
LIGR's Fuse dashboard includes a live preview mode. You can simulate match data in real time, trigger events, and watch your graphic respond without broadcasting. You can also test locally before uploading by emulating the postMessage protocol with your own test data.
Yes. You can use Claude or any AI coding assistant to draft graphics for LIGR. Describe what you want (e.g. an animated scoreboard for rugby with home/away scores and a countdown clock), generate the HTML/CSS/JavaScript, then review, customise, and upload it to LIGR. It is a workflow accelerator — you keep full control of the final output.