https://github.com/screenly/playground
Various examples of how developers can use Screenly and Screenly's API
https://github.com/screenly/playground
api digital-signage digital-signage-api
Last synced: about 7 hours ago
JSON representation
Various examples of how developers can use Screenly and Screenly's API
- Host: GitHub
- URL: https://github.com/screenly/playground
- Owner: Screenly
- License: mit
- Created: 2017-11-01T20:53:30.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2025-04-10T09:31:58.000Z (6 months ago)
- Last Synced: 2025-04-10T09:36:37.597Z (6 months ago)
- Topics: api, digital-signage, digital-signage-api
- Language: CSS
- Homepage: https://www.screenly.io
- Size: 38.8 MB
- Stars: 26
- Watchers: 11
- Forks: 11
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Screenly Playground
This repository holds various examples that showcases Screenly's features and API.
## Edge Apps
If you are not familiar with Edge Apps, we suggest you review our [developer documentation](https://developer.screenly.io/edge-apps/#getting-started).
- [3D Text](https://github.com/Screenly/Playground/tree/master/edge-apps/3d-text) - A 3D text display app that renders text with depth and shadow effects.
- [Asset Metadata](https://github.com/Screenly/Playground/tree/master/edge-apps/asset-metadata) - An example implementation of Screenly's metadata.
- [Clock App](https://github.com/Screenly/Playground/tree/master/edge-apps/clock) - A simple clock app.
- [Countdown Timer](https://github.com/Screenly/Playground/tree/master/edge-apps/countdown-timer) - A simple countdown timer app.
- [Charlie HR App](https://github.com/Screenly/Playground/tree/master/edge-apps/charlie-hr-app) - Displays employee birthdays, work anniversaries and other HR events from Charlie HR.
- [Flying Toasters App](https://github.com/Screenly/Playground/tree/master/edge-apps/flying-toasters) - A simple toaster app that flies around the screen.
- [iFrame App](https://github.com/Screenly/Playground/tree/master/edge-apps/iframe) - A simple iFrame app.
- [Power BI](https://github.com/Screenly/Playground/tree/master/edge-apps/powerbi-legacy) - A Power BI Edge App for securely accessing dashboards and reports.
- [QR Code Generator](https://github.com/Screenly/Playground/tree/master/edge-apps/qr-code) - An example of how to build unique QR Codes that embeds the screen metadata as UTM parameters.
- [RSS Reader](https://github.com/Screenly/Playground/tree/master/edge-apps/rss-reader) - A simple RSS reader.
- [Sonar Dashboard](https://github.com/Screenly/Playground/tree/master/edge-apps/sonar-dashboard) - A dashboard that displays the status of the [Sonar - BLE Device Counter](https://github.com/Viktopia/sonar).
- [Strava Club Leaderboard](https://github.com/Screenly/Playground/tree/master/edge-apps/strava-club-leaderboard) - A leaderboard of Strava club activities.
- [Simple Message App](https://github.com/Screenly/Playground/tree/master/edge-apps/simple-message-app) - A simple message app.
- [TFL Bus Status App](https://github.com/Screenly/Playground/tree/master/edge-apps/tfl-bus-status) - An app to display TFL Bus Status for a given bus stop. A list of all bus stops can be found here - [Bus Stop Lookup Tool](https://playground.srly.io/edge-apps/helpers/tfl/bus-stop-lookup/)
- [Weather App](https://github.com/Screenly/Playground/tree/master/edge-apps/weather) - A simple weather app.
- [Welcome App](https://github.com/Screenly/Playground/tree/master/edge-apps/welcome-app) - A customizable welcome screen app.
### Creating a new Edge App from the template
> [!IMPORTANT]
> Make sure that you have the following installed before proceeding:
>
> - [Bun (1.2.2+)](https://bun.sh/docs/installation)
> - [Screenly Edge App CLI (v1.0.3+)](https://github.com/Screenly/cli?tab=readme-ov-file#installation)
After installing `bun` and the Screenly CLI, run the following command to create a new Edge App:
```bash
cd edge-apps/
bun create --no-git edge-app-template
```
```plaintext
Created project successfully
# To get started, run:
cd
bun run dev
```
This will create a new Edge App with the name `` in the `edge-apps` directory.
> [!NOTE]
> Don't forget to update `README.md` and `screenly.yml` as needed.
You can now run the local development server with a single command:
```bash
cd
bun run dev
```
Follow the instructions in the `README.md` file of the new Edge App for more details.
### TypeScript Library
The Playground also offers an Edge Apps library that contains utilities for building Edge Apps including helper functions and reusable Vue components.
The source code is located inside the `edge-apps/blueprint` directory.
To install the library, run the following command:
```bash
bun add github:Screenly/Playground
```
This will install the latest version of the library in the default branch.
You can also specify a specific version or branch:
```bash
bun add github:Screenly/Playground#vX.Y.Z
bun add github:Screenly/Playground#[branch-name]
```
Details on how to use the library can be found in [this guide](/docs/edge-apps-library.md).
## Other
- [Bootstrap](https://github.com/Screenly/playground/tree/master/bootstrap/): A digital signage optimized Bootstrap theme for our Playground apps.
- [Dynamic Playlists](https://github.com/Screenly/playground/tree/master/dynamic-playlists/): An example of how to use Screenly's API to enable/disable a playlist based on weather conditions.
- [Instagram App](https://github.com/Screenly/playground/tree/master/instagram/): A basic Instagram app for Screenly.
- [JavaScript Injectors](https://github.com/Screenly/playground/tree/master/javascript-injectors/): Examples showing Screenly's JavaScript Injector.