Visual Designer
Your on-screen graphics get built in the browser, with live data already in them. There is no export step, so what goes on air is the design itself and not a file somebody rendered this morning.
Browser-based graphics with live station data
Bind
The data is live. So is the graphic.
What is playing, which show is on air and who is presenting come straight from the platform, not from a file someone exported. Pick the value you want in the data selector, drop it into a layer, and it keeps itself current for as long as the graphic is up.
Your own variables sit alongside the platform's, and an RSS, JSON, XML or CSV feed loops straight into a layer. Every binding carries a fallback, so a quiet moment never shows an empty box.
Extend
Nothing here is a black box.
Every Visual takes its own CSS and its own JavaScript, and a documented interface tells your code when a layer comes in and when it goes out. If the editor does not cover what you want, you can write it.
Layers announce themselves as events, so a script hooks the show and hide lifecycle instead of polling for it.
Start
Start from what you already have.
Point the Designer at your station's website and it comes back with your colours, a full palette, your heading and body fonts and your logos, landing in Media Hub ready to use. Or drop in a picture of the graphic you have in mind and get an editable, layered Visual back.
Both are labelled as starting points, because you review them before they go anywhere near air. What you get is real layers you keep editing, not a flat render you throw away.
Technical specifications.
- Layer types
- Text Shape Image Video Album cover Lottie Scheduling mediaEighteen in the Add Layer picker. Each carries a fallback for when live data is absent.
- Canvas and aspect
- A virtual coordinate space, not a raster. Landscape is width-locked to 1280 and portrait is 720x1280, scaled by the root font size. Two aspect ratios, 16:9 and 9:16, with portrait behind a flag. One graphic has exactly one aspect ratio.
- Data bindings
- Now playing Scheduling PresentersHandlebars rooted at vra, live over a socket, with conditionals and a loop helper for feeds.
- Data sources
- RSS JSON CSV XML Raw textGET, POST, PUT or DELETE, fetched either direct from the browser or proxied through the cloud.
- Animation
- GSAP 3.12.5 with CustomEase, preloaded and registered on every Visual. Nine layer transition presets and four visual-level transition modes. Custom CSS must use em, never px or rem, because scaling runs off the root font size.
- Fonts and type
- Google Fonts, or upload ttf, otf, woff and woff2. Seven text style tags, H1 to H6 and P, shared across every Visual on the station.
Other platform surfaces.
Make your station look like you sound.
Book a demo and we will rebuild one of your existing graphics in your own branding, bound to your live data.