Quick start

Use Node 22 or later. Any package manager works; the examples use npm. You need a write API key, a browser and a terminal. Set LIGR_API_KEY in your shell. This example uses plain HTML, CSS and JavaScript. Any browser rendering library can use the same protocol and publishing tools.

Scaffold the graphic.
Terminal
```
npx --package=https://github.com/ligrsystems/graphics-packages/releases/download/v0.3.0/ligrsystems-graphics-cli-0.3.0.tgz ligr-graphic init my-graphic
cd my-graphic
npm install
```
Both packages use exact public GitHub release URLs. Package downloads need no npm account or GitHub authentication. Keep the generated lockfile in Git.

The folder holds a scorebug, the manifest graphic.json, and two files for coding agents: AGENTS.md and .claude/skills/ligr-graphic/SKILL.md. Delete them if you do not use an agent. The default template uses one HTML file and a script that copies its files into dist/.

Edit index.html. Its createGraphic callbacks receive match data and handle visibility. The hide callback resolves after the animation; the SDK then sends HIDDEN. The SDK is optional: any implementation of the protocol can run on LIGR.
Run it in the local harness.
Terminal
```
npm run build
npm run dev
```
Open http://localhost:8080. The local viewer needs no dashboard login. It sends the same message order as the overlay. Open Data, choose a scenario, and press Next or Play. Edit declared variables under Controls, inspect Files, then press Hide. The log must show READY and HIDDEN from your graphic, and a PONG after the first PING at 10 seconds. See Test and troubleshoot.

Keep the harness running. Open a second terminal in the same project folder for the remaining commands.
Create a theme. Once per theme. Skip this step if your organization already has one: npx ligr-graphic theme list prints the themes you own.
Terminal
```
npx ligr-graphic theme create --name "My Theme" --sports football
```
The command prints the theme id and writes it into ligr.json, because the folder holds graphic.json. Your organization can own up to five themes.
Create the graphic in the theme.
Terminal
```
npx ligr-graphic create --name "Scorebug" --sports football
```
The command writes the graphic id into ligr.json. Pass --theme <id> to use a theme that is not in ligr.json.
Push the bundle.
Terminal
```
npx ligr-graphic push
```
The command builds, checks the manifest and the files with the API rules, uploads the changed files, and records the bundle. Run npx ligr-graphic validate to check without a push.
Publish the graphic, then the theme.
Terminal
```
npx ligr-graphic publish --theme-version
```
The command prints the published theme version. Inspect and activate that exact version when the broadcast allows it.
Terminal — replace 1 with the published theme version
```
npx ligr-graphic theme inspect --version 1
npx ligr-graphic theme activate --version 1
```
Activation does not publish another version. Existing overlay pages need a reload to load the selected version. See Push and publish.
Prepare the control room through REST.

Follow Set up through REST with the theme and graphic IDs from the publishing steps. Create or reuse the competition, teams, venue, and match through REST. Create the theme profile, room, section, and graphic preset. Create an overlay with that profile and room, autoMode: false, and adType: "noBrands".

The API returns controlRoomUrl. Open that URL when setup is complete. Your browser needs a dashboard session with access to the same organization.
Operate the prepared graphic.

Select GFX In on the preset. Verify the graphic on the preview overlay. After changing its variables, select Update GFX to apply the values while it is shown. Select GFX Out to hide it.

REST commands also require manual mode; they do not enable it. See Presets for preset commands, or address the graphic directly over REST:

Set OVERLAY_ID to your match overlay’s numeric id.
Terminal
```
curl -X POST "https://api.ligr.live/rest/v2/overlays/$OVERLAY_ID/graphics/commands" \
  -H "Authorization: Bearer $LIGR_API_KEY" \
  -H 'Content-Type: application/json' \
  -d '{ "command": "show", "name": "Scorebug" }'
```

What to do next

Add control variables so an operator can change what the graphic shows. See The manifest.
Read the other surfaces: theme variables, images and external data. See Data binding.
Read the rules the bundle must follow. See Bundle rules.
Write your own listener without the package. See The protocol.
Push without the CLI, one REST call at a time. See Push and publish.