HTML Graphics in Broadcast — The Modern Way to Do On-Screen Graphics

Broadcast graphics — also called CG (Character Generator) overlays — are the visual elements layered on top of video during a broadcast:

• Lower-thirds: Name and title banners at the bottom of the screen during interviews
• News tickers: Scrolling text along the bottom of a news channel
• Scoreboards: Live sports scores and statistics
• Logos and bugs: Station branding in the corner of the screen
• Full-screen graphics: Titles, transitions, and interstitials between segments

These elements were historically produced by dedicated hardware character generators — expensive rack-mounted devices running proprietary software. Brands like Chyron, Vizrt, and Ross Video dominated this space with systems costing tens of thousands of pounds.

HTML graphics have changed all of that.

---

HTML graphics use standard web technologies — HTML, CSS, and JavaScript — to render on-screen overlays in real time. Instead of a dedicated hardware CG device, a web browser (or a browser-based rendering engine) draws the graphics and composites them onto the video output.

This approach leverages the entire ecosystem of web development:

• Animations with CSS transitions and keyframes
• Dynamic data with JavaScript and REST APIs
• Real-time updates via WebSockets
• Any font, any colour, any design imaginable

---

Cost

A traditional Chyron or Vizrt CG system costs £10,000–£100,000+. An HTML-based graphics solution can be built and operated for a tiny fraction of that cost.

Flexibility

HTML is the most widely used design and development language in the world. Any graphic you can design for the web, you can use as a broadcast overlay.

Real-Time Data Integration

Because JavaScript can fetch live data from any API, HTML graphics can display live sports scores, stock prices, weather data, social media posts, and election results — traditional CG hardware required expensive middleware for any of this.

Speed of Development

A web developer can build a broadcast-quality lower-third template in hours. Changes reload instantly — no compile times, no hardware resets.

---

| Feature | Traditional Hardware CG | HTML Graphics | |---|---|---| | Cost | £10,000–£100,000+ | Low / free | | Design flexibility | Limited to vendor templates | Unlimited | | Real-time data | Requires expensive middleware | Native (any API) | | Development skills | Proprietary software training | HTML/CSS/JS | | Remote updates | Difficult | Easy | | Animation capability | Good | Excellent (CSS/JS) |

---

InstaPlayout supports HTML-based CG overlays as part of its integrated graphics system. You can:

1. Design your template in standard HTML/CSS/JS
2. Load the template into InstaPlayout's graphics system
3. Populate data fields — name, title, ticker text — from InstaPlayout's control interface
4. Trigger graphics manually or on a schedule as part of your playlist automation
5. Layer multiple graphics simultaneously

The system composites everything onto your video output in real time, with no additional hardware required.

---

HTML graphics represent one of the most significant democratising forces in broadcast production. What once required six-figure hardware investments and specialist operators can now be achieved with web development skills and a modern playout system.

For independent broadcasters, HTML graphics mean professional, dynamic, data-driven overlays are within reach regardless of budget. And with InstaPlayout's integrated HTML graphics support, the entire workflow — from content scheduling to live graphics — runs on a single Windows PC.