Skip to main content

Developer Guide

DigitalSignage.com is a hosted cloud digital signage platform, built in-house by MediaSignage Inc., with an open REST API and SDK for developers. It is not open source: you do not fork or self-build the CMS. Instead you automate and extend the hosted platform through its API, SDK, custom components and the player's local SignService API. This guide covers that development ecosystem.

Development Ecosystem Overview​

What Developers Can Use​

ToolWhat it isUse it for
REST APIHTTP and JSON interface to the hosted platformPlayers, content, campaigns, schedules and webhooks from your own software
SDKClient libraries and code examples for the REST APIAuthentication, player and content management, campaigns, webhook verification
Custom componentsHTML5, CSS and JavaScript widgetsCustom data displays and interactive elements inside SignStudio scenes
SignServiceLocal API running on SignPlayerIoT sensor events, kiosk triggers, event-driven scene switching
mediaSERVEROn-premise edition of the platformRunning the platform inside your own network (one-time $895 plus per-player licenses)

Development Stack​

┌─────────────────────────────────────────────────────────────────────────────┐
│                    Digital Signage Development Stack                         │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│  Hosted platform (DigitalSignage.com)                                       │
│  ├── SignStudio (web editor)                                                │
│  ├── REST API (players, content, campaigns, schedules, webhooks)            │
│  └── SDK (client libraries for the REST API)                                │
│                                                                              │
│  Player Runtime (SignPlayer)                                                │
│  ├── HTML5 / CSS3                                                           │
│  ├── JavaScript (ES6+)                                                      │
│  ├── Custom HTML components                                                 │
│  └── SignService (local player API for events)                              │
│                                                                              │
│  Your systems                                                               │
│  ├── Back-office, POS or provisioning scripts calling the REST API          │
│  ├── Webhook receivers                                                      │
│  └── Sensors or gateways posting events to SignService                      │
│                                                                              │
└─────────────────────────────────────────────────────────────────────────────┘
StudioLite is discontinued

StudioLite, a former open-source Angular studio for this platform, is discontinued and no longer maintained. Its GitHub repository remains only for reference, and there is nothing to fork or build today. Use SignStudio for editing and the REST API and SDK for integration. Accounts and screens created with StudioLite continue to work in SignStudio.

Component SDK​

Overview​

The Component SDK enables creation of custom widgets and components for both SignStudio (configuration UI) and SignPlayer (runtime display).

Component Architecture​

custom-component/
├── player/                    # SignPlayer runtime
│   ├── index.html            # Component HTML
│   ├── styles.css            # Component styles
│   └── script.js             # Component logic
├── studio/                    # SignStudio configuration
│   ├── properties.html       # Properties panel
│   └── properties.js         # Properties logic
├── icon.png                   # Component icon (64x64)
├── manifest.json             # Component metadata
└── README.md

Creating a Custom Component​

Step 1: Create manifest.json

{
  "name": "Weather Widget",
  "id": "com.yourcompany.weather",
  "version": "1.0.0",
  "description": "Displays current weather conditions",
  "author": "Your Company",
  "website": "https://yourcompany.com",
  "icon": "icon.png",
  "category": "data",
  "tags": ["weather", "data", "api"],
  "properties": {
    "apiKey": {
      "type": "string",
      "label": "API Key",
      "required": true
    },
    "location": {
      "type": "string",
      "label": "Location",
      "default": "New York, US"
    },
    "units": {
      "type": "select",
      "label": "Units",
      "options": ["imperial", "metric"],
      "default": "imperial"
    },
    "refreshInterval": {
      "type": "number",
      "label": "Refresh (minutes)",
      "default": 15,
      "min": 5,
      "max": 60
    }
  }
}

Step 2: Create Player Runtime (player/index.html)

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="weather-widget">
        <div class="weather-icon">
            <img id="condition-icon" src="" alt="">
        </div>
        <div class="weather-info">
            <div id="temperature" class="temp"></div>
            <div id="condition" class="condition"></div>
            <div id="location" class="location"></div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 3: Create Player Logic (player/script.js)

(function() {
    // Get component properties from SignPlayer
    const props = window.componentProperties || {};

    const API_KEY = props.apiKey;
    const LOCATION = props.location || 'New York, US';
    const UNITS = props.units || 'imperial';
    const REFRESH_INTERVAL = (props.refreshInterval || 15) * 60 * 1000;

    async function fetchWeather() {
        try {
            const response = await fetch(
                `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(LOCATION)}&appid=${API_KEY}&units=${UNITS}`
            );

            if (!response.ok) throw new Error('Weather API error');

            const data = await response.json();
            updateDisplay(data);
        } catch (error) {
            console.error('Weather fetch failed:', error);
            showError();
        }
    }

    function updateDisplay(data) {
        const tempUnit = UNITS === 'imperial' ? '°F' : '°C';

        document.getElementById('temperature').textContent =
            Math.round(data.main.temp) + tempUnit;

        document.getElementById('condition').textContent =
            data.weather[0].description;

        document.getElementById('location').textContent =
            data.name;

        document.getElementById('condition-icon').src =
            `https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`;
    }

    function showError() {
        document.getElementById('temperature').textContent = '--';
        document.getElementById('condition').textContent = 'Unable to load';
    }

    // Initial fetch
    fetchWeather();

    // Refresh on interval
    setInterval(fetchWeather, REFRESH_INTERVAL);

    // Listen for SignPlayer events
    window.addEventListener('signplayer:refresh', fetchWeather);
    window.addEventListener('signplayer:pause', () => {
        // Handle pause if needed
    });
})();

Step 4: Create Properties Panel (studio/properties.html)

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css">
    <style>
        body { padding: 15px; }
        .form-group { margin-bottom: 15px; }
    </style>
</head>
<body>
    <form id="properties-form">
        <div class="form-group">
            <label for="apiKey">OpenWeatherMap API Key</label>
            <input type="text" class="form-control" id="apiKey" required>
            <small class="text-muted">Get free API key at openweathermap.org</small>
        </div>

        <div class="form-group">
            <label for="location">Location</label>
            <input type="text" class="form-control" id="location" value="New York, US">
        </div>

        <div class="form-group">
            <label for="units">Temperature Units</label>
            <select class="form-control" id="units">
                <option value="imperial">Fahrenheit (°F)</option>
                <option value="metric">Celsius (°C)</option>
            </select>
        </div>

        <div class="form-group">
            <label for="refreshInterval">Refresh Interval (minutes)</label>
            <input type="number" class="form-control" id="refreshInterval"
                   value="15" min="5" max="60">
        </div>
    </form>

    <script src="properties.js"></script>
</body>
</html>

Step 5: Create Properties Logic (studio/properties.js)

(function() {
    // Communication with SignStudio
    const StudioBridge = {
        // Get current property values
        getProperties: function() {
            return window.parent.postMessage({
                type: 'getProperties'
            }, '*');
        },

        // Save property values
        setProperties: function(props) {
            window.parent.postMessage({
                type: 'setProperties',
                properties: props
            }, '*');
        }
    };

    // Listen for property updates from SignStudio
    window.addEventListener('message', function(event) {
        if (event.data.type === 'propertiesLoaded') {
            loadProperties(event.data.properties);
        }
    });

    // Load properties into form
    function loadProperties(props) {
        if (props.apiKey) document.getElementById('apiKey').value = props.apiKey;
        if (props.location) document.getElementById('location').value = props.location;
        if (props.units) document.getElementById('units').value = props.units;
        if (props.refreshInterval) document.getElementById('refreshInterval').value = props.refreshInterval;
    }

    // Save on input change
    document.getElementById('properties-form').addEventListener('change', function() {
        StudioBridge.setProperties({
            apiKey: document.getElementById('apiKey').value,
            location: document.getElementById('location').value,
            units: document.getElementById('units').value,
            refreshInterval: parseInt(document.getElementById('refreshInterval').value)
        });
    });

    // Request initial properties
    StudioBridge.getProperties();
})();

Testing Components Locally​

# Start local development server
npx http-server ./custom-component -p 8080

# Access component directly
open http://localhost:8080/player/index.html

# Simulate SignPlayer properties
# In browser console:
window.componentProperties = {
    apiKey: 'your_test_api_key',
    location: 'London, UK',
    units: 'metric',
    refreshInterval: 5
};
location.reload();

Packaging and Distribution​

# Create component package
cd custom-component
zip -r weather-widget-1.0.0.zip *

# Package structure:
# weather-widget-1.0.0.zip
# ├── manifest.json
# ├── icon.png
# ├── player/
# │   ├── index.html
# │   ├── styles.css
# │   └── script.js
# └── studio/
#     ├── properties.html
#     └── properties.js

REST API and SDK​

The REST API is the supported way to automate the hosted platform and connect it to other systems: pushing content or data from a back-office, POS or reporting system, and provisioning many locations or accounts in a repeatable way. The SDK is the developer toolkit that goes with it. Neither is published as a public package; access, the current specification and credentials are arranged with the DigitalSignage.com team (support@digitalsignage.com, toll-free +1-877-344-7446), and white-label and multi-account projects run on the Enterprise plan. Keep credentials on your server and never embed them in a web page. See the API overview and the SDK overview.

SignService - Local Player API​

SignService is a local API that runs on SignPlayer. A sensor, script or gateway on the same network sends an HTTP POST with an event name and JSON data to the player, and SignStudio scenes bound to that event update text or switch scenes immediately. The player can also call a URL you register when it fires an event. Endpoints and examples are in the IoT integration guide.

White-Label and Multi-Account Management​

White-label branding and SignDashboard multi-account management are part of the Enterprise plan on the hosted platform, priced through the public price calculator. There is no source code to fork: branding is configured on the platform. Organizations that need the platform inside their own network use the on-premise mediaSERVER.

Frequently Asked Questions​

Is DigitalSignage.com open source?​

No. DigitalSignage.com is a hosted cloud platform built in-house by MediaSignage Inc., with an open REST API and SDK for developers. StudioLite, a former open-source studio, is discontinued and no longer maintained. If you specifically need a self-hosted open-source CMS, Xibo and Anthias are the usual options; DigitalSignage.com's self-hosted choice is the on-premise mediaSERVER.

How do I create custom components for digital signage?​

Use the Component SDK to create custom widgets. Each component has two parts: player runtime (HTML/CSS/JS that runs on the display) and studio configuration (HTML/JS for the properties panel). Create a manifest.json defining your component's properties, then implement the player display logic and studio configuration UI. Package everything in a ZIP file for distribution.

Can I white-label the digital signage platform?​

Yes, on the Enterprise plan. White-label branding and SignDashboard multi-account management are Enterprise features of the hosted platform, priced through the public price calculator. Branding is configured on the platform; there is no source code to fork.

What can developers build with the DigitalSignage.com API and SDK?​

The REST API and SDK are used to automate the hosted platform and connect it to other systems, for example publishing prices from a back-office system or provisioning new locations from a script. Access and documentation are arranged with the DigitalSignage.com team. Custom HTML components and the player's local SignService API cover on-screen widgets and IoT or kiosk events.

How do I integrate external APIs with digital signage?​

Create a custom component that fetches data from your external API. In the component's player script, use fetch() or XMLHttpRequest to retrieve data, then update the DOM with the results. Configure API credentials and settings through the studio properties panel. Handle errors gracefully and implement appropriate refresh intervals.

For enterprise development support, contact MediaSignage or see the API reference and SDK documentation.

Try it on your own screens, free​

DigitalSignage.com, which publishes this guide, runs a permanent free plan: the first 3 screens are free forever (no credit card, no ads, no time limit), then from $3 per screen per month with volume pricing via a public calculator. The free SignPlayer runs on Windows, Mac, Android and Android TV, Chrome OS, Raspberry Pi, iPad or any modern web browser. Start free · 2026 pricing

Last updated on
Try it on your own screens
First 3 screens free forever, no credit card, no ads. Works on the TV you already own with a $30 player, Raspberry Pi, Chrome OS, Windows or iPad. About two minutes to your first screen.
Create free accountSee 2026 pricing