> ## Documentation Index
> Fetch the complete documentation index at: https://docs.heyniblet.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Create your first app

> Build a small clock-like app and preview it in the browser.

Create a project:

```sh theme={null}
niblet apps init desk-message --name "Desk Message" --author "Your name"
cd desk-message
```

Replace `main.star` with:

```starlark theme={null}
load("render.star", "render")

def main(config):
    message = config.get("message") or "hello niblet"
    return render.Root(
        child = render.Box(
            width = 64,
            height = 32,
            color = "#0d1117",
            child = render.Text(
                content = message,
                color = "#ff745b",
            ),
        ),
    )
```

Run the live preview:

```sh theme={null}
niblet serve .
```

Open `http://localhost:8080`. You can pass configuration through the preview URL, for example `http://localhost:8080?message=good%20morning`.

## What the code does

1. `load` imports the runtime's render module.
2. `main(config)` is the app entry point.
3. `render.Box` creates a 64×32 background and centers its child.
4. `render.Text` draws one line using a bundled pixel font.
5. `render.Root` supplies the final widget tree to the encoder.

## Validate the result

```sh theme={null}
niblet apps validate .
niblet apps preview . -o preview.webp
```

Inspect the WebP at its native 64×32 size and magnified. A browser preview is a development check, not a substitute for viewing the app on a physical panel.