Amazing HTML Graphics

A curated resource list primarily for broadcast engineers, software developers, and systems integrators who build and maintain graphics systems. It also serves motion designers, graphics operators, and post-production professionals who create and deliver graphics.

Centered on EBU OGraf, the list covers HTML-based graphics across live broadcast, streaming, post-production, film, and documentary workflows.

Coverage follows the graphics workflow—from authoring, animation, and data visualisation through template packaging, validation, control, rendering, compositing, playout, and delivery—and extends to post-production and offline rendering. The list also brings together relevant standards, tools and products, research, case studies, documentation, and training.

Contributions are welcome. Suggest a resource by opening an issue—no Git experience is required. To contribute directly, read the contribution guide and submit one focused pull request per resource entry.

Amazing HTML Graphics follows the model of Amazing Digital Cinema and draws inspiration from Awesome Broadcasting and the wider Awesome project. Some Awesome lists focus exclusively on open-source projects.

Professional HTML graphics spans a broader ecosystem: open standards, open-source software, commercial and hosted products, marketplaces, research, education, communities, and production knowledge. To reflect this scope while respecting open-source-only Awesome lists, this project is called “Amazing” rather than “Awesome.”

How to read the entries. Inclusion means that a resource is relevant to professional HTML graphics; it does not imply OGraf support. When an OGraf relationship is documented, the description identifies its role, such as authoring, export, import, validation, control, rendering, or demonstration. Loading an OGraf renderer URL through a browser source is treated as integration, not direct OGraf support.

Software and product entries use bold labels to describe availability, delivery, and maturity. Open source includes a verified licence where practical; Source available does not imply an open-source licence. Commercial, Hosted/SaaS, Open core, and Freeware describe availability or delivery, while Experimental, Beta, Archived, and Deprecated describe maturity.

Contents

• OGraf
  • Official Specification & Governance
  • Graphics, Schemas & APIs
  • Editors & Exporters
  • Development & Validation
  • Renderers, Servers & Controllers
  • Examples & Templates
• Organizations & Communities
• Resources
  • Articles & Case Studies
  • Scientific Literature & Theses
  • Books
  • Documentation & Knowledge Sources
  • Education & Tutorials
  • Forums & Community
  • Lists & Landscapes
  • Videos & Talks
  • Standards, Specifications & Protocols
    • Graphics & Template Interchange
    • Newsroom, Automation & Control
    • Web Platform
    • Media Transport, Colour & Safety
• Tools & Products
  • Authoring, Animation & Conversion
  • Web Components & Graphics Libraries
  • Data Visualization & Maps
  • Typography & Font Handling
  • Testing, Performance & Security
  • Open-source Graphics Systems
  • Commercial & Cloud Graphics Platforms
  • Browser-capable Production Hosts
  • Rendering, Key-Fill & Video Output
  • Newsroom, Rundown & Automation
  • Sports, Data & Audience Graphics
  • Post-production & NLE Integration
  • HTML-to-Video & Offline Rendering
  • Interactive & Player-side Graphics
  • Templates & Marketplaces

OGraf

Official Specification & Governance

• EBU HTML Graphics Working Group – The EBU group coordinating the open, interoperable HTML graphics work that includes OGraf.
• EBU OGraf repository – The canonical specification repository, including versioned documents, schemas, examples, changelogs, and public issue tracking.

Graphics, Schemas & APIs

• Graphics Data Definition – Deprecated. The predecessor data-description project incorporated into OGraf; useful for historical GDD templates and tools.
• OGraf Graphics specification – The normative v1 package, manifest, Web Component, lifecycle, action, and non-real-time rendering requirements.
• OGraf JSON Schemas – Normative JSON Schemas for validating OGraf manifests and Graphics data definitions.
• OGraf npm package – Open source (MIT). Informative TypeScript definitions for the OGraf Graphics and Server APIs.
• OGraf Server API – The REST/OpenAPI contract between Controllers and rendering systems.
• OGraf TypeScript definitions – Open source (MIT). Informative lifecycle, action, manifest, and Server API types maintained with the specification.

Editors & Exporters

• AI Atelier – Open source (MIT). Experimental OGraf support. A local-first, agent-assisted HTML/JSX/CSS design environment with an OGraf export service.
• DJ HTML Creator – Commercial. Visual HTML and Lottie graphics authoring with OGraf package export.
• Eyevinn OGraf Template Editor – Open source (MIT). Browser-based visual editor with animation, data binding, preview, validation, and OGraf import/export.
• Keyframe Character Studio – Open source (MIT). Experimental. Browser motion-design sequencer and live director with an emerging OGraf export path.
• Loopic – Commercial; hosted/SaaS. No-code HTML graphics editor with OGraf export and integrations for live graphics workflows.
• NoaCG Studio – Open source (AGPL-3.0). Visual, code, and AI-assisted motion graphics authoring with multi-target export including OGraf.
• OGraf Studio – Open source (AGPL-3.0). Visual OGraf editor with runtime, validation, export, and optional AI/MCP-assisted authoring packages.
• Rive OGraf Wrapper – Source available; no licence asserted. Experimental. Web application that converts Rive files into OGraf Graphics with documented runtime limitations.
• StreamShapers Ferryman – Open source (AGPL-3.0). Converts Lottie JSON and After Effects exports into HTML templates and OGraf packages.
• StreamShapers OGraf Export – Commercial; announced. After Effects extension combining Lottie preflight, rendering, embedded Ferryman configuration, and OGraf export; the vendor says availability is planned for summer 2026.

Development & Validation

• OGraf Devtool – Open source (MIT). Local and hosted harness for loading Graphics, exercising lifecycle methods, updating data, and checking behavior.
• OGraf Form – Open source (MIT). Web Component and npm package that generates operator forms from OGraf/GDD schemas.
• OGraf Graphics Skill – Open source (MIT). Agent skill for scaffolding, packaging, and validating OGraf v1 Graphics.
• OGraf Validator – Open source (MIT). Web validator and reusable core package for checking OGraf package structure and manifests.
• ograf.dev Tools – Independent browser-based package checker, runtime harness, and schema explorer for OGraf development.

Renderers, Servers & Controllers

• DaVinci Resolve and Fusion Studio – Commercial; free edition available. Version 21 introduced OGraf and Lottie support for editorial and compositing; verify version-specific requirements before deployment.
• Erizos – Commercial; hosted/SaaS. Cloud production system with changelog-documented OGraf support alongside its HTML Composer workflow.
• H2R Graphics – Commercial; free edition available. Live graphics application that directly imports OGraf Graphics and generates operator fields from their data schema.
• NetOn.Live LiveOS – Commercial. Software-defined production platform with a vendor-documented OGraf-compliant HTML graphics engine.
• nxt-graphics – Source available; no licence asserted. An OGraf host Graphic used in nxtedition editing and timeline workflows.
• ofxOGraf – Open source (MIT). Experimental. openFrameworks authoring and runtime addon with native/Emscripten rendering, deterministic seeking, and an OGraf v1 Web Component.
• OGraf image-sequence renderer – Open source (MIT). Experimental. Small non-real-time renderer that saves an OGraf Graphic as a sequence of images.
• OGraf Simple Rendering System – Open source (MIT). Reference-oriented browser renderer, graphics manager, Server API implementation, and controller interface.
• SPX Graphics – Open source (MIT); commercial editions available. SPX-GC and associated products provide documented OGraf rendering and control for live and production workflows.

Examples & Templates

• CBC/Radio-Canada MXL Hands-on – Open source (Apache-2.0). Workshop material containing an HTML5 keyer and OGraf teleprompter transported over MXL.
• EBU OGraf examples – Reference Graphics and test material maintained with the official specification.
• Johan Nyman's OGraf Graphics – Open source (MIT). A community collection of OGraf example Graphics and experiments.
• Lotties for Broadcast – Source available; no licence asserted. Example Lottie animations and templates for Ferryman, SPX, and CasparCG workflows.
• OGraf over dash.js – Source available; no licence asserted. Proof of concept. Demonstrates an OGraf overlay rendered over a dash.js video player.
• Resolve OGraf Developer Documentation – Source available; no licence asserted. Community documentation. Unofficial Resolve OGraf integration notes, starter templates, and examples.
• Resolve OGraf Examples – Source available; licence unclear. Experimental. Learning examples for Resolve OGraf Titles whose author explicitly advises against production use.

Organizations & Communities

• Advanced Media Workflow Association – Develops the open NMOS specifications used to discover, connect, and control professional IP-media systems.
• European Broadcasting Union – Public-service media alliance responsible for OGraf and many broadcast technology recommendations.
• Society of Motion Picture and Television Engineers – Professional association and standards body for motion-imaging technology.
• World Wide Web Consortium – Develops web standards and community material underlying interoperable browser graphics.

Resources

Articles & Case Studies

• AWS HTML5 Motion Overlay Walkthrough – Shows how AWS Elemental Live burns a continuously published HTML5 motion overlay into encoded outputs.
• EBU's Open Spec for Cross-Platform Graphics Integration – Introduces OGraf goals, architecture, and multi-platform live and post-production use cases.
• NEP Finland LiveOS and SPX Case Study – Vendor case study describing integrated HTML5 graphics for Lotto and Eurojackpot productions.
• OGraf Webinar Slide Deck – EBU presentation explaining the HTML graphics specification, packaging, APIs, and intended workflows.
• SPX: How to Create HTML Graphics – Compares custom HTML, Lottie/After Effects, Loopic, and Rive authoring approaches for broadcast graphics.
• Using Singular in Post Production – Vendor workflow for recording browser-rendered graphics with transparency for Premiere Pro or After Effects.
• Vizrt's Guide to HTML5 Graphics – Vendor guide to browser-rendered graphics in live production; treat performance and business claims as vendor-authored.

Scientific Literature & Theses

• A Cross-Device and Cross-OS Benchmark of Modern Web Animation Systems – Peer-reviewed benchmark of modern web animation approaches across devices and operating systems.
• A Survey of Digital Television Interactivity Technologies – Peer-reviewed survey providing technical context for interactive television delivery and standards.
• Broadcast Media Creation as a Service – SMPTE paper on cloud-hosted, GPU-enabled media creation architecture.
• Henri Johansson's HTML5 Broadcast Graphics Thesis – 2025 thesis examining Yle workflows built around SPX, CasparCG, HTML, CSS, and JavaScript.
• Ismo Vaittinen's CasparCG Thesis – 2016 thesis on an open-source graphics and video playout system for live production.
• Presentation Accuracy of the Web Revisited – Peer-reviewed study of timing accuracy among HTML5-era browser animation methods.
• Television Infographics as Orienting Response – Peer-reviewed eye-tracking study of attention and recall around television infographics.
• Titling for Live Streaming and File-Based Broadcast Workflows – SMPTE conference paper on reusable, data-driven titling across live and file-based outputs.
• TV Graphics Personalization Using In-Band Events – Research on event-driven HTML overlays synchronized with MPEG-DASH playback; no paper-specific DOI is asserted here.

Books

• Broadcast Graphics on the Spot – Practical broadcast and post-production graphics techniques using Photoshop and After Effects.
• Core HTML5 Canvas – General Canvas graphics and animation reference applicable to custom browser graphics.
• Foundation HTML5 Animation with JavaScript – General JavaScript animation fundamentals for Canvas and browser-based motion.
• Motion Graphics: Graphic Design for Broadcast and Film – Design and historical context for motion graphics across broadcast and film.

Documentation & Knowledge Sources

• CasparCG HTML Producer – Technical notes for the Chromium-based CasparCG HTML producer.
• CasparCG HTML Template Guide – Community guide to the CasparCG HTML template lifecycle, data updates, and authoring patterns.
• Chrome DevTools Performance Reference – Reference for recording and interpreting browser rendering, scripting, layout, paint, and frame performance.
• MDN Animation Performance – Explains the browser rendering waterfall and why transform/opacity animations often avoid layout and paint.
• MDN Canvas API – Reference for scriptable 2D and WebGL drawing used by many HTML graphics runtimes.
• MDN CSS Font Loading API – Reference for explicitly loading and checking fonts before playout or offline capture.
• MDN Custom Elements – Guide to defining the custom elements used as the packaging boundary for OGraf Graphics.
• SPX HTML Template Format – Documents SPX HTML/CSS/JavaScript templates, template definitions, and operator fields.
• StreamShapers Documentation – Documentation and tutorials covering Ferryman, After Effects, OGraf, CasparCG, SPX, and HTML templates.

Education & Tutorials

• H2R OGraf Import Guide – Explains importing an OGraf Graphic and mapping its data schema to H2R operator controls.
• ograf.dev Tutorials – Independent step-by-step OGraf examples with interactive previews.
• SPX Knowledge Base – Documentation for installing, authoring, controlling, and deploying SPX HTML graphics.

Forums & Community

• CasparCG Forum – Community support forum for CasparCG playout, HTML templates, clients, and integrations.
• CasparCG GitHub Discussions – Development and usage discussions attached to the CasparCG Server repository.
• D3 Community – Official routes to D3 help, examples, discussions, and the Observable community.
• EBU OGraf Issues – Public specification questions, proposals, bug reports, and implementation discussions.
• GSAP Community – Official support forums and community resources for GSAP animation.
• LottieFiles Forum – Community support for Lottie authoring, rendering, formats, and integrations.
• MapLibre Community – Official community page linking project meetings, Slack, and contributor channels.
• Motion Canvas Discussions – Official discussion board for Motion Canvas code-driven animation.
• NodeCG Community – Official repository linking the NodeCG Discord and support channels.
• PixiJS Discussions – Official discussion board for PixiJS rendering and development questions.
• Remotion Discord – Official community chat for React-based video generation.
• Rive Community – Official discussion and support community for Rive authoring, runtimes, and integrations.
• SPX Graphics Support – Support page linking SPX documentation, GitHub, and its public Discord community.
• Three.js Discourse – Official forum for Three.js rendering, shaders, animation, and tooling.

Lists & Landscapes

• Awesome Broadcasting – Curated open-source broadcasting resources, including Animation, Graphics & Video Playout.
• Awesome NodeCG – Archived. Community list of NodeCG bundles, utilities, examples, and resources.
• CasparCG Related Projects – Community-maintained index of clients, templates, libraries, and tools around CasparCG.
• ograf.dev Ecosystem – Independent directory of OGraf specifications, editors, controllers, renderers, post-production integrations, tools, templates, and services.

Videos & Talks

• CasparCG HTML Templates: Basic Animated Lower Third – Geert Verhoeff, 11:00 — builds a basic animated lower third for CasparCG.
• HTML Graphics with Rive and CasparCG – Aiden Wilson, 31:27 — tutorial for controlling a Rive animation in a CasparCG HTML template.
• HTML-Based Graphics for Multi-Platform Production – IBCShow, 5:33 — Kickstart pitch that provides historical context for interoperable HTML graphics work.
• Loopic CasparCG Lower Third – Geert Verhoeff, 17:29 — creates a simple CasparCG lower third with Loopic.
• OGraf – OGraf EBU, 4:54 — concise overview of the specification and workflow.
• OGraf Maps in Erizos Studio – everviz, 0:13 — short demonstration of an OGraf map in Erizos Studio.
• OGraf with SPX and Loopic – SPX Graphics, 1:43 — demonstrates moving a Loopic-authored OGraf Graphic into SPX.
• OGraf: An Open Specification for HTML-Based Graphics – smpteconnect, 42:47 — detailed technical presentation of OGraf.
• SPX-GC HTML Templates – Tuomo Kulomaa, 5:03 — introduces the structure and use of SPX HTML templates.
• SPX-GC Overview – Tuomo Kulomaa, 6:53 — overview of the open-source SPX Graphics Controller.
• Using an After Effects OGraf with Ferryman – StreamShapers, 1:17 — demonstrates an After Effects-to-OGraf workflow with Ferryman.

Standards, Specifications & Protocols

Graphics & Template Interchange

• CasparCG HTML Template Interface – The JavaScript host commands and callbacks used to control CasparCG HTML templates; it is not an OGraf package format.
• dotLottie Specification – Defines an archive format for bundling one or more Lottie animations with metadata and assets.
• Lottie Animation Format – Community specification for portable vector animation data rendered by Lottie runtimes.
• SPX Template Definition – Product-specific metadata and data-field contract for SPX templates; it is distinct from OGraf.

Newsroom, Automation & Control

• Advanced Media Control Protocol – CasparCG command protocol used by many graphics controllers and automation systems.
• Ember+ – Open control protocol and implementation resources used in broadcast systems; it does not define graphics templates.
• MOS Protocol – Newsroom object, rundown, status, and control protocol; MOS does not itself define a portable HTML Graphic.
• NMOS IS-04 – Discovery and registration for networked media nodes, devices, sources, flows, senders, and receivers.
• NMOS IS-05 – Connection management for establishing media flows between NMOS senders and receivers.
• NMOS IS-07 – Event and tally transport for production applications.
• NMOS IS-12 – Control protocol for discovering and manipulating device capabilities.
• Open Sound Control – Network control message format used by some graphics and show-control tools.

Web Platform

• Canvas 2D – WHATWG definition of the immediate-mode 2D drawing surface used by browser graphics.
• Content Security Policy – Browser policy for restricting executable and fetched content in graphics that consume remote or untrusted data.
• CSS – W3C specifications and working-group material for layout, styling, transforms, masking, and animation.
• CSS Font Loading – API specification for controlling and observing font loading.
• Custom Elements – WHATWG lifecycle and registration model underlying the Web Components exported by OGraf Graphics.
• ECMAScript Modules – JavaScript module semantics used by OGraf entry points and modern graphics applications.
• HbbTV – Open specifications for interactive television applications and synchronized web experiences on broadcast and broadband services.
• JSON Schema 2020-12 – Schema vocabulary on which OGraf Graphic data definitions are based.
• OpenAPI Specification – HTTP API description format used by the OGraf Server API definition.
• Scalable Vector Graphics – Vector graphics format widely used for resolution-independent broadcast artwork and animation.
• Trusted Types – DOM injection-sink controls that complement sanitisation and Content Security Policy.
• Web Animations – Timing and animation model exposed through CSS animations/transitions and the Web Animations API.
• WebGL – Browser API for GPU-accelerated 2D and 3D rendering.

Media Transport, Colour & Safety

• EBU R 103 – Video signal tolerance recommendations relevant to legal broadcast graphics output.
• EBU R 143 – Cybersecurity recommendations for media vendors and systems, relevant to networked graphics deployments.
• EBU R 95 – Safe-area recommendations for 16:9 television production across SD, HD, and UHD.
• ITU-R BT.2020 – UHDTV picture parameters and wide-colour-gamut primaries.
• ITU-R BT.2100 – HDR television image parameters for PQ and HLG workflows.
• ITU-R BT.709 – HDTV picture characteristics and colourimetry commonly targeted by broadcast graphics.
• NDI – Commercial IP video ecosystem commonly used to carry rendered graphics and alpha-capable workflows.
• SMPTE Public Standards – Free canonical access portal for published SMPTE standards and engineering documents.
• SMPTE ST 2110 – Professional Media over Managed IP suite used for uncompressed video and fill/key transport; it does not define graphics templates.

Tools & Products

Authoring, Animation & Conversion

• Adobe After Effects – Commercial; subscription. Authoring, export, integration. Motion-design and compositing application used with Bodymovin/Lottie export and third-party OGraf conversion workflows.
• Adobe Animate – Commercial; subscription. Authoring, export. Motion-graphics application that creates and publishes HTML5 Canvas documents driven by CreateJS.
• Anime.js – Open source (MIT). Authoring, rendering. JavaScript animation engine for DOM, SVG, and JavaScript objects.
• Cavalry – Commercial; free edition available. Authoring, export. Procedural 2D motion-design application with documented Lottie JSON export and compatibility limits.
• dotLottie – Open source ecosystem. Import, export, rendering, integration. Format, tools, and runtimes for packaged Lottie animations, themes, state machines, and web playback.
• GSAP – Source available; free to use under the Standard No Charge License. Authoring, rendering, integration. Timeline animation toolkit for DOM, SVG, Canvas, and PixiJS graphics.
• Lottie-web – Open source (MIT). Import, export, rendering. Web renderer and After Effects Bodymovin exporter for JSON vector animations.
• Lottielab – Commercial; hosted/SaaS with free tier. Authoring, export, rendering. Browser-based motion-design tool with Lottie JSON export, hosted playback, and interactive animation features.
• Motion – Open source (MIT). Authoring, rendering, integration. Web animation library for JavaScript, React, Vue, and browser-native animation APIs.
• Rive – Commercial authoring; open-source runtimes. Authoring, export, rendering, integration. Interactive vector-animation editor, state-machine format, and web runtimes.
• SVGator – Commercial; hosted/SaaS. Authoring, export. Browser-based SVG animation editor with SVG export and a documented beta Lottie export path.
• Theatre.js – Open source (Apache-2.0). Authoring, control, rendering, integration. Visual animation and sequencing environment for JavaScript, Three.js, and React projects.

Web Components & Graphics Libraries

• Babylon.js – Open source (Apache-2.0). Rendering, integration. WebGL/WebGPU 3D engine for browser-rendered virtual sets, explainers, and motion graphics.
• Fabric.js – Open source (MIT). Authoring, rendering, integration. Interactive Canvas object model for building browser graphics editors and compositors.
• FAST – Open source (MIT). Authoring, integration. Standards-based Web Component libraries and tooling applicable to OGraf component authoring.
• Konva – Open source (MIT). Authoring, rendering, integration. Canvas framework for interactive 2D scene graphs and graphics-editor interfaces.
• Lit – Open source (BSD-3-Clause). Authoring, integration. Lightweight library for standards-based Web Components, directly applicable to OGraf Graphic entry components.
• PixiJS – Open source (MIT). Rendering, integration. GPU-accelerated 2D engine for performant, data-driven browser graphics, with GSAP integration through PixiPlugin.
• Stencil – Open source (MIT). Authoring, integration. Compiler and toolchain for reusable standards-based Web Components.
• Three.js – Open source (MIT). Rendering, integration. WebGL/WebGPU 3D library for real-time browser graphics and data visualisation.

Data Visualization & Maps

• Apache ECharts – Open source (Apache-2.0). Authoring, rendering, integration. Canvas/SVG charting library for explainers, elections, weather, and sports data.
• Chart.js – Open source (MIT). Authoring, rendering, integration. Canvas charting library for animated, responsive data graphics.
• D3 – Open source (ISC). Authoring, rendering, integration. Low-level toolkit for binding data to DOM, SVG, and Canvas visualisations.
• Datawrapper – Commercial; hosted/SaaS with free tier. Authoring, export, integration. No-code charts, maps, and tables with responsive embeds and static image, PDF, and SVG export options.
• everviz – Commercial; hosted/SaaS. Authoring, export, integration. No-code charts and maps platform with broadcast integrations including documented OGraf output.
• Flourish – Commercial; hosted/SaaS with free public tier. Authoring, export, rendering, integration. Animated data-visualisation and storytelling platform with web embeds and plan-dependent video export.
• Highcharts – Commercial; free non-commercial use. Authoring, rendering, integration. JavaScript charting and mapping libraries for interactive and animated data graphics.
• Leaflet – Open source (BSD-2-Clause). Authoring, rendering, integration. Lightweight interactive mapping library for location-based graphics.
• Mapbox GL JS – Commercial; source available. Authoring, rendering, integration. WebGL vector-map library for animated and data-driven geographic graphics using Mapbox services.
• MapLibre GL JS – Open source (BSD-3-Clause). Authoring, rendering, integration. GPU-accelerated vector maps for animated geographic and data-driven graphics.
• Observable Plot – Open source (ISC). Authoring, rendering, integration. Concise JavaScript grammar for layered, exploratory SVG and HTML data visualisations.
• Plotly.js – Open source (MIT). Authoring, rendering, integration. Declarative JavaScript library for interactive statistical, scientific, and geographic charts.
• Turf – Open source (MIT). Authoring, integration. Geospatial analysis functions for preparing and transforming map data in JavaScript.
• Vega-Lite – Open source (BSD-3-Clause). Authoring, rendering, integration. Declarative grammar for repeatable, data-driven statistical graphics.

Typography & Font Handling

• Fitty – Open source (MIT). Rendering, integration. Fits dynamic text into its container for unpredictable names, headlines, and scores.
• Font Face Observer – Open source (BSD-3-Clause). Validation, integration. Promise-based library for detecting when web fonts have loaded before graphics are played or captured.
• opentype.js – Open source (MIT). Authoring, rendering, integration. Parses and manipulates OpenType fonts and glyph paths in the browser.

Testing, Performance & Security

• Ajv – Open source (MIT). Validation, integration. JSON Schema validator suitable for OGraf manifests, graphics data, and generated operator forms.
• BackstopJS – Open source (MIT). Validation, rendering. Browser screenshot regression testing for graphics at controlled viewports and states.
• DOMPurify – Open source (Apache-2.0 OR MPL-2.0). Integration. DOM sanitizer for untrusted operator, newsroom, and remote HTML data.
• JSON Forms – Open source (MIT). Authoring, control, integration. Schema-driven form framework for graphics data-entry and operator interfaces.
• pixelmatch – Open source (ISC). Validation, integration. Pixel-level image comparison library for screenshot and rendered-frame regression tests.
• Playwright – Open source (Apache-2.0). Validation, rendering, integration. Browser automation for lifecycle tests, screenshots, data extremes, and repeatable render checks.
• Puppeteer – Open source (Apache-2.0). Validation, rendering, integration. Chrome automation API for tests, screenshots, and HTML-to-video capture workflows.

Open-source Graphics Systems

• CasparCG – Open source (GPL-3.0). Import, control, rendering, integration. Graphics and video playout server with a Chromium HTML producer controlled through AMCP.
• DenoCG – Open source (MIT). Experimental proof of concept. Authoring, control, rendering, integration. Deno and browser framework for broadcast graphics, positioned as a typed NodeCG alternative.
• NodeCG – Open source (MIT). Authoring, control, rendering, integration. Node.js framework for browser-rendered broadcast graphics, dashboards, and shared data.
• WebLinked – Open source (MIT). Control, rendering, integration. CEF URL renderer with DeckLink/AJA SDI, NDI, OMT, fullscreen, HTTP, and OSC outputs.

Commercial & Cloud Graphics Platforms

• Dizplai – Commercial; hosted/SaaS. Authoring, control, rendering, integration. Cloud HTML5 graphics, audience engagement, and live-data platform.
• Grabyo Producer – Commercial; hosted/SaaS. Control, rendering, integration. Browser-based live production platform with HTML graphics and third-party graphics integrations.
• Grass Valley AMPP Playout X – Commercial; hosted and deployable services. Control, rendering, integration. Cloud-native channel playout application with HTML5 graphics rendering and overlays.
• Overlays.uno – Commercial; hosted/SaaS. Authoring, control, rendering, integration. Browser-source overlay creation and control for streaming and live events.
• Poltergeist – Commercial; hosted/SaaS. Control, integration. Collaborative browser dashboard for remotely controlling OBS Browser Source overlays.
• Singular.live – Commercial; hosted/SaaS. Authoring, control, rendering, integration. Cloud platform for data-driven HTML graphics rendered on client devices or production outputs.
• SmartPanel – Commercial; hosted/SaaS. Authoring, control, rendering, integration. Browser-based HTML5 graphics platform with templates, rundowns, live data, and browser-source output.
• Viz Flowics – Commercial; hosted/SaaS. Authoring, control, rendering, integration. Cloud-native HTML5 graphics with data connectors, APIs, MOS, and broadcast output integrations.

Browser-capable Production Hosts

• Ecamm Live – Commercial. Integration, rendering. macOS live-production application whose Widget Overlays load web URLs or local HTML and JavaScript files.
• LiveU Studio – Commercial; hosted/SaaS. Integration, rendering. Cloud production switcher that accepts webpages as transparent HTML overlay sources.
• mimoLive Browser Capture – Commercial. Integration, rendering. macOS live-production source that renders webpages and browser overlays.
• OBS Studio Browser Source – Open source (GPL-2.0). Integration, rendering. CEF source for local or remote HTML graphics; it can load an OGraf server renderer URL but does not import OGraf packages.
• TriCaster – Commercial. Integration, rendering. Live-production systems with webpage graphics workflows through HTML Buffer and Live Link integrations.
• vMix Web Browser Input – Commercial. Integration, rendering. Chromium webpage input for HTML overlays; loading a renderer URL is not direct OGraf package support.
• Wirecast – Commercial. Integration, rendering. Live-production application with web page and web display sources for browser graphics.
• XSplit Broadcaster – Commercial; free edition available. Integration, rendering. Windows live-production application with an interactive webpage source and custom CSS and JavaScript settings.

Rendering, Key-Fill & Video Output

• Aveco CGManager – Commercial. Authoring, control, integration. Graphics management software with documented HTML template packaging and playout-server integration.
• AWS Elemental Live – Commercial. Control, rendering, integration. On-premises live encoder that can burn a continuously published HTML5 motion overlay into encoded outputs.
• AWS Elemental MediaLive – Commercial; hosted/SaaS. Control, rendering, integration. Managed live encoding service with scheduled HTML5 motion-graphics overlays.
• ClassX LiveBoard – Commercial. Authoring, control, rendering, integration. HTML5-oriented broadcast graphics platform with data-driven templates, MOS, and SDI/NDI fill-and-key output.
• Crystal Vision M-WEBKEY – Commercial. Control, rendering, integration. Hardware web-page keyer providing SDI fill/key and composited output.
• Etere ETX – Commercial. Authoring, control, rendering, integration. Channel-in-a-box and graphics engine with documented HTML5, WebGL, webpage-capture, and JavaScript control capabilities.
• gstcefsrc – Open source (LGPL-2.1). Rendering, integration. GStreamer source element wrapping CEF to turn HTML and JavaScript pages into video and audio streams; it is not an OGraf server.
• keyfillwebview – Source available; no licence asserted. Experimental. Rendering, integration. Small browser renderer targeting separate key and fill output.
• Lawo HOME Graphic Inserter – Commercial. Control, rendering, integration. HTML5 graphics insertion application for HOME-based IP production workflows.
• Macadam – Open source (Apache-2.0). Rendering, integration. Node.js bindings for Blackmagic devices, with Electron and SVG paths for HTML/CSS/SVG graphics output.
• Medialooks HTML5 Graphics – Commercial. Control, rendering, integration. Chromium-based HTML graphics plugin for the MPlatform and MFormats SDKs.
• RT Software Swift Engine – Commercial. Control, rendering, integration. HTML5 broadcast graphics renderer for live, newsroom, and channel-branding workflows.
• SDI-Ware – Commercial. Control, rendering, integration. Software for rendering HTML graphics to professional video outputs.
• Sienna GraphicArtist – Commercial. Authoring, control, rendering, integration. macOS HTML5 graphics system with NDI-oriented fill-and-key output.
• Softron OnTheAir WebLink – Commercial. Control, rendering, integration. Renders transparent webpages to broadcast video with external fill-and-key options.
• ToolsOnAir HTML-based Graphic Templates – Commercial. Import, control, rendering, integration. just:live and just:play workflow for external HTML graphics URLs with SDI fill/key and IP output paths.
• Videon LiveEdge Graphix – Commercial. Control, rendering, integration. Edge HTML graphics insertion for live streams; verify edition and frame-rate limits for the intended deployment.
• Vindral Composer – Commercial; hosted/SaaS. Authoring, rendering, integration. Browser-based graphics compositor for low-latency live-stream overlays.
• Viz Connect Tetra – Commercial. Import, rendering, integration. Appliance that converts supported Viz Flowics HTML5 sources to NDI or SDI, including fill-and-key.

Newsroom, Rundown & Automation

• Bitfocus Companion – Open source (MIT). Control, integration. Button-surface control and automation system with modules for graphics, streaming, and playout products.
• Bridge – Open source (MIT). Authoring, control, integration. Extensible SVT client for real-time graphics systems, including templates, timelines, triggers, and OSC.
• caspar-obs-client – Open source (MIT). Control, integration. Python GUI coordinating CasparCG playback and OBS Studio scene transitions.
• Cuez Automator – Commercial; hosted/SaaS. Control, integration. Rundown-driven automation with graphics and MOS connector workflows.
• Open Playout Automation – Open source (GPL-2.0). Control, rendering, integration. CasparCG-based master-control-room playout and automation system.
• Ross XPression MOS HTML5 Plugin – Commercial. Authoring, control, integration. Browser-based NRCS interface for selecting, editing, previewing, and adding XPression graphics to rundowns.
• Sofie MOS Connection – Open source (MIT). Control, integration. TypeScript implementation of MOS communications for newsroom and automation systems.
• Sofie TV Automation – Open source (MIT). Control, integration. Rundown and device automation system with MOS and graphics integrations.
• SuperConductor – Open source (AGPL-3.0-or-later). Control, integration. Desktop playout client for CasparCG, OBS, vMix, ATEM, OSC, and HTTP devices.
• Yle Caspartool – Open source (MIT). Control, integration. Browser controller for CasparCG HTML-template graphics playout.

Sports, Data & Audience Graphics

• KeepTheScore – Commercial; hosted/SaaS with free tier. Control, rendering, integration. Browser scoreboard overlays with remote control, Stream Deck support, and a documented REST API.
• LIGR – Commercial; hosted/SaaS. Authoring, control, rendering, integration. Automated, data-driven sports graphics platform for live streams and broadcast feeds.
• OBScoreboard – Commercial; hosted/SaaS. Authoring, control, rendering, integration. Browser-based scoreboards and sports overlays with branding, remote operation, and API workflows.
• Opta Graphics – Commercial. Authoring, rendering, integration. Template-driven sports graphics powered by live Opta data for broadcast and digital outputs.
• Tagboard – Commercial; hosted/SaaS. Authoring, control, rendering, integration. Cloud graphics and audience-engagement platform with social, interactive, and sports-data integrations.
• Viz Flowics Data Connectors – Commercial; hosted/SaaS. Control, integration. Connectors for sports, weather, finance, elections, and social data used in HTML5 graphics.

Post-production & NLE Integration

• MXMZ – Commercial. Authoring, import, control, rendering, integration. HTML graphics workflow with a Premiere Pro panel and media-asset-management integration.
• Singular Recast – Commercial; free utility. Import, export, rendering, integration. Windows application for rendering Singular graphics to NDI and recording transparent files for NLE and compositing use.
• SPX NLE Integration – Commercial; Production or Broadcast edition. Import, control, rendering, integration. Connects SPX-rendered HTML or OGraf graphics with Adobe Premiere Pro and file-based finishing workflows.

HTML-to-Video & Offline Rendering

• BeamToIX – Open source (MIT). Authoring, export, rendering. Frame-by-frame web animation framework with deterministic rendering and video-generation tooling.
• HTML5 Animation Video Renderer – Source available; no licence asserted. Experimental. Import, export, rendering. Captures HTML5 animation frame by frame for video encoding.
• HyperFrames – Open source (Apache-2.0). Authoring, export, rendering. Deterministic HTML/CSS video renderer using explicit frame seeking, Chromium compositor capture, and FFmpeg.
• Kamishibai – Open source (MIT). Import, export, rendering, integration. Renders seekable DOM, Canvas, WebGL, and React pages frame by frame to video or GIF.
• Motion Canvas – Open source (MIT). Authoring, export, rendering. TypeScript and Canvas system for programmatic, timeline-controlled motion graphics and video.
• OrkasVideoStudio – Open source (MIT). Early development; install from source. Authoring, export, rendering, integration. Lets coding agents compose HTML motion graphics, edit media, and render editable plan.json timelines locally.
• Puppeteer Capture – Open source (MIT). Import, export, rendering, integration. Puppeteer plugin for capturing browser pages to video.
• Remotion – Source available; free for qualifying use. Authoring, export, rendering, integration. React-based framework and rendering stack for programmatic video generation.
• render-d3-video – Open source (MIT). Experimental. Import, export, rendering. Utility for rendering D3 browser animations to video.
• Revideo – Open source (MIT). Authoring, export, rendering, integration. TypeScript framework and headless-browser renderer for programmatic, data-driven video.
• Shotstack HTML5 – Commercial; hosted/SaaS. Import, export, rendering, integration. Cloud rendering API for deterministic HTML, CSS, JavaScript, GSAP, D3, and Lottie compositions.

Interactive & Player-side Graphics

• Ease Live – Commercial; hosted/SaaS. Control, rendering, integration. Interactive, player-side sports and broadcast overlays delivered across viewing devices.
• PANDA Interactive – Commercial; hosted/SaaS. Control, rendering, integration. Timed and targeted clickable overlays for live and on-demand video players.
• Sport Buff – Commercial; hosted/SaaS. Authoring, control, rendering, integration. Viewer-side polls, predictions, quizzes, commerce, and sponsor graphics across live and on-demand video.
• StreamLayer – Commercial; hosted/SaaS. Control, rendering, integration. SDK-delivered interactive overlays and nonlinear live-moment graphics for web, mobile, and connected-TV video.

Templates & Marketplaces

• LottieFiles – Commercial; hosted/SaaS with free tier. Import, export, integration. Marketplace and toolset for Lottie assets, editing, optimization, testing, and hosted delivery.
• Motion Array – Commercial marketplace; subscription. Import, integration. Stock motion-graphics library with After Effects broadcast packages, lower thirds, titles, and channel-branding assets.
• Rive Marketplace – Commercial marketplace. Import, integration. Community marketplace for reusable interactive Rive animations and components.
• SPX Graphics Store – Commercial marketplace. Import, integration. Ready-made SPX HTML and OGraf templates for broadcast and streaming workflows.
• VideoHive Broadcast Packages – Commercial marketplace. Import, integration. After Effects broadcast packages that can supply source artwork for supported HTML and OGraf conversion workflows.