I built a full-stack web framework where everything lives in one file

Hey 👋

Over the past weeks, I’ve been working on something a bit unusual.

I built a framework called Luxaura that lets you create full-stack web apps using a single file format: .lux.

👉 UI, state, backend logic, and styling — all in one place.

---

Why I built this

While working with tools like React and other modern frameworks, I kept feeling the same friction:

• One feature = multiple files
• UI here, state there, API somewhere else
• Constant context switching

It works, but it can feel… fragmented.

So I started wondering:

What if everything related to a feature lived in one place?

---

The idea

A .lux file combines:

• canvas → UI
• signal → state
• receive → inputs
• vault → backend logic (server-only)
• paint → styling

So instead of jumping between layers, you stay in one readable structure.

---

Example

Here’s a simple counter:

receive
    title: String = "My Luxaura App"

signal
    count: 0

canvas
    Scene
        Stack
            Headline "<<title>>"
            Body "Clicked <<count>> times"

            Trigger "Click me"
                when click:
                    count = count + 1

---

Backend… inside the same file

This is the part I found most interesting.

signal
    status: "Send a message"

vault
    action contact(name, email, message):
        if (!name || !email || !message) {
            return "Please fill every field."
        }
        return `Message received from ${name}`

canvas
    Scene
        Stack
            Trigger "Send"
                when click:
                    status = await vault.contact(name, email, message)

👉 Code inside vault runs only on the server.

No separate API routes. No accidental leaks to the client.

---

What it tries to improve

• Reduce file fragmentation
• Make full-stack development feel more “local”
• Keep backend logic clearly separated and safe
• Generate static-first HTML for better performance

---

CLI & Commands

Luxaura comes with a built-in CLI to make scaffolding and development easy:

luxaura release → create a new project

luxaura ignite → start dev server with live reload

luxaura forge → build production output

luxaura component → scaffold a new component

luxaura service → scaffold server-side service

luxaura module → scaffold shared module

luxaura polish → auto-format .lux files

luxaura shield → run security checks

What it tries to improve

Reduce file fragmentation

Make full-stack development feel more “local”

Keep backend logic clearly separated and safe

Generate static-first HTML for better performance

Provide reusable components and easy scaffolding

---

What it’s NOT (yet)

I want to be honest:

• It doesn’t have the ecosystem of React
• It’s still early and experimental
• Probably not ready for large production apps

---

Where I think it could fit

Luxaura might make sense for:

• Small-to-medium apps
• Dashboards
• Internal tools
• Rapid prototyping

---

What I’m testing now

I’m currently comparing it against frameworks like React and Next.js by building the same app in each.

Also working on:

• Supporting external libraries (like Bootstrap, Anime.js)
• Improving developer experience
• Making the syntax clearer

---

I’d really like your feedback

I’m not trying to “replace React”.

I’m just exploring a different way of building apps.

If you’re curious, you can check it out here:
https://www.npmjs.com/package/luxaura

I’d love to know:

• Does this make sense to you?
• What feels confusing?
• Would you ever try something like this?

---

Thanks for reading 🙌