Titles without the extra magic.

Broadcast titles and animated graphics made with web technologies. An open alternative to vMix GT, built on NodeCG. The panel below works: flip a switch, change a name.

Install notGT Source on GitHub

Live demo: the Control panel and an out

Nothing is on air

Main

1920×1080

Data

speaker
match
poll

GT is struck through, so it is replaced.

notGT does the job of a title designer and its player. Three things did not come along.

  • Windows-only editor

    The editor is a browser tab, on any machine on the network.

  • A licence to buy

    MIT, like NodeCG. The source is yours to read and to change.

  • Its own file format

    A title is a web page. Everything the web can do, a title can do.

Draw it. Or write it.

Editor
The Editor: the out as a canvas, with four titles on air outlined in yellow, the layer list on the left and the placement inspector on the right
A visual editor. The canvas is the out itself. Text, shapes, images, GIFs and video with alpha are layers you drag, scale and crop, with magnets to the centre, the edges, the safe area and each other.
lower-third.js
// Data only lays the text out, so a typo fixed
// on air does not replay the entrance.
onData(() => {
  $("name").textContent = vars("speaker.name", "First Last");
  $("role").textContent = vars("speaker.role", "Role");
});

onShow(() => {
  plate.animate(WIPE_IN, { duration: 520, easing: OUT });
});

// The exit takes EXIT ms. notGT reads it here and starts
// the exit that much before the hold runs out.
const EXIT = 480;

onHide(() => {
  plate.animate(WIPE_OUT, { duration: EXIT, fill: "forwards" });
}, EXIT);
Titles in code. An animation can be HTML, CSS and JavaScript with a small runtime (vars, onData, onShow, onHide) and a live preview next to the code. It can also be a file in a folder, if you would rather write it in your own editor.
Alpha video
Drop a ProRes or HEVC clip with transparency onto the editor and it is converted with ffmpeg to something a browser can play.
Eleven titles to start from
Lower thirds, a score bug, a guest from a list, a topic card, a logo bug, a live poll, a ticker, a countdown, a network clock and a weather card, all in one style.
Or ask a model
The repository carries a prompt that already knows the runtime contract. Describe the title, get the html, css and js of a code animation.

Change the value, not the title.

Names, scores and captions live in one data store. Change a value and it changes on air without replaying the entrance. Pick a row of a list and that guest goes on air.

guests list
Excel as data
Drop a workbook on the Data panel, or track one on the server. Each sheet becomes a list, the file is re-read when it is saved, and an edit in the dashboard is written back into it.
Timed or held
A title plays once and leaves by itself, or stays until it is switched off. The timers run on the server, so every out and every dashboard agree.
As many outs as you need
Each out is one transparent page at its own size, and one Browser Source. What is on air on which out is always in sight, in Lemon yellow.

One request away.

Whatever the dashboard does, a script can do: show, hide, toggle and trigger titles, write variables, manage outs and the library.

# show a title
curl -X POST http://localhost:9090/api/titles/lower-third/show

# change what it says, while it is on air
curl -X POST 'http://localhost:9090/api/data?mode=merge' \
     -H 'content-type: application/json' \
     -d '{"speaker": {"name": "Anna Reed", "role": "Expert"}}'

# play it once: it leaves by itself
curl -X POST http://localhost:9090/api/titles/lower-third/trigger

# take it off
curl -X POST http://localhost:9090/api/titles/hide
DashboardControl, Titles & Outs, Editor
replicants
Companion, scripts, curlbuttons and automation
HTTP, WebSocket
notGT extensionthe state, the timers, the API
replicants
Out pageout.html?out=main
Browser Source
OBS, vMixor anything that shows a web page
The extension holds the state, runs the timers and answers the API. The out page only draws what it is told to, which is why the Editor can show what is on air by embedding that very page.

The real dashboard, in 22 seconds.

Sign-in
The dashboard asks for a username and a password, and the API is not open to the whole network. It can be switched off for a closed show LAN.
Team
An administrator adds users and puts them in groups: VJ, streamer 1, streamer 2. A group has its outs and its own WebSocket keys, and every out has one OBS link that opens that out only.
Yours to read
The interface is in English and Russian, in a dark and a light theme.

On air in three steps.

  1. Start the server

    git clone https://github.com/fursyt12/notGT.git
cd notGT
docker compose up --build -d

    Open http://localhost:9090/dashboard/ and sign in as admin / admin. Change the password in the Team tab straight away. No reverse proxy and no .env are needed.

  2. Add the out to OBS or vMix

    A Browser Source in OBS, or a Web Browser input in vMix, at the size of the out.

    http://<host>:9090/bundles/notGT/graphics/out.html?out=main

  3. Show a title

    From the Control panel, from a Companion button, or from anywhere else.

    curl -X POST http://localhost:9090/api/titles/lower-third/show