Sports Scoreboard

This example renders a scoreboard from values stored in the extension's editor configuration. It demonstrates how a layer reads configuration through useLumioConfig().

Handler-based server functions cannot fetch live scores from ESPN or another external API: ctx.fetch() refuses every host in that runtime. See External APIs for the current network boundary.

Project structure

sports-scoreboard/
├── lumio.config.json
├── src/
│   └── layer.tsx
└── package.json

lumio.config.json

{
  "extensionId": "88b2478a-39c7-468e-bebd-14e52fd97ac0",
  "name": "Sports Scoreboard",
  "category": "widget",
  "version": "1.0.0",
  "targets": ["layer"],
  "config_schema": {
    "awayTeam": { "type": "string", "label": "Away team", "default": "AWAY" },
    "awayScore": { "type": "string", "label": "Away score", "default": "0" },
    "homeTeam": { "type": "string", "label": "Home team", "default": "HOME" },
    "homeScore": { "type": "string", "label": "Home score", "default": "0" }
  }
}

src/layer.tsx

import { Lumio, Box, Text, useLumioConfig } from "@zaflun/lumio-sdk";

function Scoreboard() {
  const [config] = useLumioConfig();
  const settings = config.settings ?? {};

  return (
    <Box style={{ display: "flex", gap: 16, padding: 12, background: "#111827" }}>
      <Text content={`${settings.awayTeam ?? "AWAY"} ${settings.awayScore ?? "0"}`} />
      <Text content="—" />
      <Text content={`${settings.homeScore ?? "0"} ${settings.homeTeam ?? "HOME"}`} />
    </Box>
  );
}

Lumio.render(<Scoreboard />, { target: "layer" });

The editor's configuration controls save values under config.settings. The layer receives the saved values through useLumioConfig() and renders them without making a network request. See Editor Panel for more on editor configuration.