Developer docs

Build what your LED display shows.

Write an app in TypeScript and JSX, see every pixel on your machine as you work, and publish it to every LEDABLE display. The same command line runs your own display from the terminal.

npm install -g @ledable/cli

Get started

Run your display from the terminal

Pair it over Bluetooth, put it on Wi‑Fi, install apps and change its settings. Every command can print JSON.

$ ledable ble link --first

Build an app

Write it in TypeScript, draw it in JSX, pixel for pixel. A local preview runs every save as the platform will.

$ ledable developer dev

Publish to every display

Upload a version, let the store check it, share it with testers, and submit it for the store.

$ ledable developer upload

How an app works

Settings in, frames out.

Declare settings in code, draw with JSX on an integer grid, and the platform runs each version in its own isolate. The clock below is drawn by this code.

How apps work

clock/index.tsx

import { boolean, defineApp } from "@ledable/sdk/app";
import { Frame, Text, renderFrame } from "@ledable/sdk/graphics";
import { HOMEVIDEO, loadFont } from "@ledable/sdk/fonts";
import {
  clockText, compensateMinute, zonedDate,
} from "@ledable/sdk/time";

export default defineApp({
  settings: () => ({
    hours24: boolean({
      name: "24-hour clock",
      description: "Show 13:00 rather than 01:00",
      default: true,
    }),
  }),

  async render(ctx, params) {
    const font = await loadFont(ctx.assets, HOMEVIDEO);
    // The display's own time zone, on the platform's clock.
    const local = zonedDate(ctx.now, ctx.timezone) ?? ctx.now;
    // Near the end of a minute, draw the next one.
    const { date, ttlMs } = compensateMinute(local);
    const time = clockText(date, params.hours24);
    return {
      image: [
        renderFrame(
          <Frame width={64} height={32} background="#000000">
            <Text x={32} y={16} anchor="mm" text={time}
              font={font} color="#f6cd6d" />
          </Frame>,
        ),
      ],
      // Ask again when the minute on the panel ends.
      softTtlMs: ttlMs,
      hardTtlMs: ttlMs + 60_000,
    };
  },