Luxaura Tutorial

Build full-stack apps with `.lux` files

Luxaura is an intent-driven web framework that lets you define frontend UI, backend vault actions, styling, reactivity, and layout using a compact authoring model.

Start learning View commands

What this tutorial covers

How Luxaura works
Frontend structure with canvas, signal, and paint
Backend logic with vault
CLI commands and workflow
Core features and responsive behavior
Why someone might choose Luxaura over other frameworks

1. Getting Started

Install Luxaura globally, create a project, and start the development server.

npm install -g luxaura
luxaura release my-app
cd my-app
luxaura ignite

Luxaura projects usually use:

Project folders

scenes/ for entry pages
craft/ for reusable components
services/ for server-side helpers
media/ for images and assets
depot/public and depot/vault for build output

Main Luxaura blocks

receive: external inputs
signal: reactive state
vault: backend-only actions
paint: styling
canvas: UI tree

2. Frontend with `.lux`

Luxaura frontend code is written with a canvas tree and reactive state.

receive
    title: String = "My Product"

signal
    count: 0
    tab: "overview"

paint
    self
        breathe: 8
    Headline
        size: titan
        weight: heavy
    Trigger
        curve: pill
        glow: soft

canvas
    Scene
        Stack
            Headline "<<title>>"
            Body "Clicked <<count>> times"
            Strip
                Trigger "Increase"
                    when click:
                        count = count + 1
                Trigger "Overview"
                    when click:
                        tab = "overview"
                Trigger "Details"
                    when click:
                        tab = "details"
            if tab == "overview":
                Body "Overview content"
            else:
                Body "Details content"

Useful frontend nodes

Scene, Stack, Strip, Mosaic
Ribbon for responsive navigation
Plate for cards
Headline, Body, Mark
Picture, Field, Trigger, Toggle

Responsive behavior

Mosaic auto-fits cards into responsive columns
Strip wraps and collapses better on small screens
Ribbon can collapse to a hamburger menu on phones
Generated HTML ships static-first for faster rendering

3. Backend with `vault`

Vault actions run on the server. They are compiled into backend code and are not shipped to the browser.

signal
    status: "Ready"
    name: ""
    email: ""
    message: ""

vault
    action sendContact(name, email, message):
        if (!name || !email || !message) {
            return "Please complete every field."
        }
        return `Saved message from ${name}`

canvas
    Scene
        Stack
            Field placeholder:"Your Name" bind:"name"
            Field placeholder:"Your Email" kind:"email" bind:"email"
            Field placeholder:"Your Message" kind:"textarea" bind:"message"
            Trigger "Send"
                when click:
                    status = await vault.sendContact(name, email, message)
            Body "<<status>>"

Use vault whenever you need database access, secure logic, private tokens, or server-side validation.

4. Luxaura Commands

`luxaura release <name>`

Create a new Luxaura project.

`luxaura ignite`

Start the dev server with live reload.

`luxaura forge`

Build the app into static public output and vault output.

`luxaura benchmark`

Measure parser, compiler, and forge performance.

`luxaura component <name>`

Scaffold a new reusable craft component.

`luxaura service <name>`

Create a server-side service file.

`luxaura module <name>`

Create a shared module.

`luxaura polish`

Format all .lux files.

`luxaura shield`

Run security checks for risky patterns and vault leaks.

`luxaura help_me`

Open the built-in command guide.

5. Key Features

Static-first output

Luxaura generates meaningful HTML instead of waiting for a blank client-side shell to render everything.

Full-stack authoring

Frontend and backend stay close together conceptually, while vault code still stays server-only.

Responsive defaults

Core layout nodes ship with responsive behavior so apps do less repetitive CSS work.

Compact mental model

You work with a small set of blocks and nodes rather than many disconnected layers.

CLI workflow

Scaffold, run, build, benchmark, polish, and scan with a single toolchain.

Security separation

Vault logic helps prevent sensitive backend logic from leaking into browser bundles.

6. Why people may prefer Luxaura

Compared with heavy frontend-only frameworks

Luxaura aims to reduce boilerplate, ship static-first output, and keep full-stack concerns in one workflow.

Compared with plain templating

Luxaura adds reactive signals, structured components, responsive primitives, and CLI tooling on top of templating-style simplicity.

Compared with fragmented stacks

It can be easier to reason about a feature when UI, state, style, and server actions all live in one intentional model.

No framework is objectively better for every project. Luxaura is strongest when you want full-stack simplicity, readable authoring, fast composition, and a static-first rendering model.

7. Search and Discoverability

Luxaura is now easier to publish and search for using terms such as:

luxaura web framework full-stack framework frontend framework backend framework responsive framework lux files nodejs framework component framework server rendered