Digital Signage Custom Apps

Examples, a starter template and AI agent skills for building EasySignage custom apps: offline HTML5 apps that play on your digital signage screens.

A custom app is a small website packaged as a .zip. Upload it once and it plays on every screen like any other media. It's stored on the device, so it keeps playing when the internet drops. Each screen can show different content through player tags.

Let AI build it for you. Install the skill in Claude Code, or use Codex, Cursor or Copilot in this repo, then just describe the screen you want. Jump to AI agents ↓

---

Quick start

Just want to try it? Download player-info.zip, upload it under Media in EasySignage, and play it on a screen. It shows everything that screen sends to custom apps. More ready-made apps are in Examples.

Build your own:

git clone https://github.com/easysignage/Digital-Signage-Custom-Apps.git
cd Digital-Signage-Custom-Apps
cp -R templates/starter my-app       # 1. copy the starter
                                     # 2. edit my-app/app.js and style.css
./scripts/package.sh my-app          # 3. check and zip it -> dist/my-app.zip

4. In EasySignage, upload dist/my-app.zip under Media, add it to a playlist, and assign the playlist to a screen.

Step by step: Getting started.

How it works

my-app.zip
├── index.html       ← entry point, must be at the top level
├── easysignage.js   ← reads player attributes (copy unchanged)
├── theme.css        ← signage theme: font, sizes, colours (optional)
├── theme.js         ← applies the theme and accent tags (optional)
├── fonts/           ← bundled Atkinson Hyperlegible font
├── app.js
├── style.css
└── images/          ← bundle every asset, use relative paths

Your code reads the screen it's running on:

<script src="easysignage.js"></script>
<script>
  var panel = EasySignage.read();
  var zone = (panel.tags && panel.tags.zone) || "default";
  // panel.player_id, panel.name, panel.screen_id, panel.resolution,
  // panel.playlist_id, panel.tags ...
</script>

Preview in a browser by passing test values in the URL:

index.html?name=Lobby&resolution=1920x1080&tags.zone=north

Full field list: player attributes.

Examples

Each example is a complete app. Download the zip and upload it to EasySignage as-is, with no coding or zipping needed. Each one's README has setup and preview steps.

Example	What it shows	Tags it reads	Download
player-info	Every attribute the player sends. Use it to debug a screen.	all	⬇ player-info.zip
clock	Full-screen clock and date, fully offline	clock_format, greeting, theme, accent	⬇ clock.zip
countdown	Countdown to an event set per screen	event_name, event_date, done_text, theme, accent	⬇ countdown.zip
menu-board	Menu from a local data file, chosen per screen	menu, special, theme	⬇ menu-board.zip
zone-promo	Different promo and image per store zone	zone, accent	⬇ zone-promo.zip
starter	Minimal template, built on the signage theme	zone, theme, accent	⬇ starter.zip

To use one: download the zip, upload it under Media in EasySignage, add it to a playlist, and assign the playlist to a screen. Then add the tags listed to each player to customise it.

To change an example, edit its folder and repackage it with ./scripts/package.sh examples/<name>.

Build with AI agents

This repo includes agent skills that teach AI agents the rules of EasySignage custom apps: offline, older players, player tags, signage design and accessibility, no secrets. What they build works on real screens.

Skill	Use it to	Download
easysignage-custom-app	Build, fix, review and package a custom app	⬇ skill zip
easysignage-broadsign-migration	Convert a Broadsign HTML5 creative	⬇ skill zip

Claude.ai (web, desktop, mobile): download the skill zip above, then go to Settings → Capabilities → Skills → Upload skill. Code execution must be turned on.

Claude Team / Enterprise: an admin can upload the zip once for everyone under Organization settings → Capabilities → Skills.

Claude Code (install once, use in any project):

/plugin marketplace add easysignage/Digital-Signage-Custom-Apps
/plugin install easysignage-custom-apps@easysignage

Get updates later with /plugin marketplace update easysignage.

Codex, Cursor, GitHub Copilot and others: open this repo in your agent. It reads AGENTS.md automatically.

ChatGPT and other chat assistants: paste SKILL.md into the chat.

Then describe the screen you want:

Build an EasySignage menu board for my cafe with breakfast and lunch menus chosen per screen by a menu tag. Package it as a zip.

Make a lobby welcome screen for our office with the time, the date and a greeting from the greeting tag. Our brand colour is #0057b8.

Create an EasySignage app that shows a different promotion per store zone using the zone tag, with the images in ./promo-images.

Migrate our Broadsign HTML5 creative in ./old-creative to EasySignage.

More setups and prompts: AI agents guide.

Signage theme

Every example is built on a ready-made signage theme (sdk/theme.css) based on signage legibility research and WCAG:

• Font: bundled Atkinson Hyperlegible, designed by the Braille Institute so I l 1 and O 0 are easy to tell apart.
• Size: a text scale that reads from across a room. Body text is about 48px on 1080p, and portrait screens get the same sizes as landscape.
• Colour: dark, light and high-contrast palettes, all above 7:1 text contrast, switchable per screen with the theme tag. The accent tag sets a brand colour.
• Layout and motion: a 5% overscan-safe margin, and gentle motion that switches off for viewers who ask for less.

Rebrand it by overriding a few colour variables. Read the theme guide for the rules: fonts, sizes for viewing distance, words per screen, colours to avoid, and QR code sizes.

Rules that keep apps working

• index.html at the zip root, all assets bundled, relative paths only.
• Plain <script src> tags (no type="module"), ES5 JavaScript, flexbox CSS. Many players run older webviews.
• No fetch() of local files. Put data in a .js file.
• Never put API keys, tokens or passwords in an app. It's copied to every screen.

./scripts/check.sh <folder> checks all of these. Details: Best practices.

Repository layout

docs/          guides: getting started, theme guide, best practices, AI agents
downloads/     ready-to-upload zips of every example and skill
examples/      complete example apps
templates/     starter app to copy
sdk/           easysignage.js (player attributes) and the signage theme
skills/        AI agent skills (also a Claude Code plugin)
scripts/       check.sh, package.sh, build-downloads.sh, sync-shared.sh

Links

• Custom apps documentation
• Upload media
• Website dynamic URL variables

Contributing

Issues and pull requests are welcome: new examples, fixes, and skill improvements. Keep examples small, ES5, dependency-free, and run ./scripts/check.sh on them. After changing an example, run ./scripts/build-downloads.sh and commit the updated zips. Please don't include real player IDs, customer data or credentials.

License

MIT