Skip to main content

Hello World

The minimal Lumio extension — a static text overlay. Use this to verify your local dev setup is working before building anything more complex.

Project structure​

my-hello-world/
├── lumio.config.json
├── src/
│   └── layer.tsx
└── package.json

lumio.config.json​

{
  "extensionId": "ext_placeholder",
  "name": "Hello World",
  "version": "1.0.0",
  "targets": ["layer"]
}

src/layer.tsx​

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

function HelloWorld() {
  return (
    <Box
      style={{
        position: "absolute",
        top: 40,
        left: 40,
        background: "rgba(0, 0, 0, 0.7)",
        borderRadius: 8,
        padding: "12px 20px",
      }}
    >
      <Text content="Hello, Lumio!" variant="heading" />
    </Box>
  );
}

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

Running locally​

lumio dev

Open the preview URL shown in the terminal. You should see "Hello, Lumio!" in the top-left corner of the overlay preview.

Next steps​

  • Add "editor" to targets and create src/editor.tsx to let streamers customize the text
  • Use useLumioConfig() to read settings the editor saves
  • Try the Scoreboard example to see a full end-to-end extension