Skip to main content

Getting Started

Welcome to Wunderframe! This guide will help you build your first web application using LUAT templating and modern development tools.

What is Wunderframe?​

Wunderframe is a modern web development platform that combines:

  • 🎨 LUAT Templating - Server-side rendering with Svelte-inspired syntax
  • ⚡ Zero Configuration - Pre-configured TailwindCSS, esbuild, and TypeScript
  • 🧩 Component Architecture - Reusable templates and modular design
  • 🚀 Modern Stack - Alpine.js, HTMX, and built-in development tools

Quick Start​

1. Install the CLI​

npm install -g @solutas/wunder-cli

2. Create Your First Project​

wunder init my-first-app
cd my-first-app

This creates a project with this structure:

my-first-app/
├── app.lua          # Application entry point
├── app.js           # Frontend JavaScript
├── app.css          # Global styles with TailwindCSS
├── lib/             # LUAT components and utilities
└── src/             # Frontend source files

3. Create Your First Component​

Create lib/components/Hello.luat:

<script>
    local name = props.name or "World"
    local greeting = "Hello, " .. name .. "!"
</script>

<div class="p-6 bg-blue-50 rounded-lg">
    <h1 class="text-2xl font-bold text-blue-900">{greeting}</h1>
    <p class="text-blue-700 mt-2">Welcome to Wunderframe!</p>
</div>

4. Use the Component​

Update lib/pages/Home.luat:

<script>
    local Hello = require("lib/components/Hello")
</script>

<html>
<head>
    <title>My First Wunderframe App</title>
</head>
<body>
    <Hello name="Developer" />
</body>
</html>

5. Start Development​

wunder dev

Your app is now running with hot reloading! 🎉

Key Concepts​

LUAT Templates​

LUAT uses familiar Svelte-like syntax for building dynamic templates:

<!-- Expressions -->
<h1>{props.title}</h1>

<!-- Conditionals -->
{#if user.isLoggedIn}
    <p>Welcome back, {user.name}!</p>
{:else}
    <p>Please log in</p>
{/if}

<!-- Loops -->
<ul>
{#each items as item}
    <li>{item.name}</li>
{/each}
</ul>

<!-- Components -->
<Card title="Example">
    <p>Card content goes here</p>
</Card>

Script Blocks​

Use script blocks to import components and prepare data:

<script>
    local Card = require("components/Card")
    local Button = require("components/Button")
    
    local title = props.title or "Default Title"
    local isActive = props.status == "active"
</script>

<Card title={title}>
    <Button variant={isActive and "primary" or "secondary"}>
        Click me
    </Button>
</Card>

Zero Configuration​

Wunderframe comes pre-configured with:

  • TailwindCSS for styling
  • TypeScript for type safety
  • esbuild for fast bundling
  • Alpine.js for reactivity
  • HTMX for server interactions

No configuration files needed!

Built-in Functions​

Access content and make HTTP requests with built-in functions:

-- Get content nodes
local node = get_node("stories/example")
local children = get_children("stories/blog")

-- Make HTTP requests
local response = http.get("https://api.example.com/data")

-- Logging
log("info", "User action completed")

-- JSON handling
local json = require("json")
local data = json.encode({ message = "Hello" })

Next Steps​

Now that you have a basic understanding, explore these topics:

Core Concepts​

Building Applications​

Community & Support​

Ready to build something amazing? Try the playground or continue with the LUAT Templating guide.