Skip to main content

Introducing Wunderframe

· 6 min read
Senol Tas
Senol Tas
Founder & Principal Engineer, Wunderframe

Today, we're excited to introduce Wunderframe - a full-stack web development framework that brings the battle-tested performance of Lua to modern web development. This isn't just another framework; it's our vision for web development that's as reliable as the games you love.

The Story Behind Wunderframe​

In a world dominated by complex JavaScript frameworks and endless configuration files, we asked ourselves: What if we could build something as reliable as World of Warcraft, as simple as Vue, and as fast as the games we love? The answer came from our deep appreciation for Lua - the language that powers some of the most complex interactive experiences ever created.

Wunderframe was born from the frustration of dealing with build tool nightmares and the complexity that has crept into modern web development. We wanted to create something that brings back the joy of building for the web while providing game-level performance.

Inspired by Svelte and Vue: Single-File Components Done Right​

We absolutely love Svelte and Vue for their single-file component approach. The beauty of having template, logic, and styles in one cohesive file is unmatched. Wunderframe takes this philosophy and supercharges it with Lua's elegance.

At the heart of Wunderframe lies LUAT templating - our single-file component system that feels familiar if you've used Svelte or Vue. Here's what a real Wunderframe component looks like:

<!-- UserCard.luat -->
<script>
    local user = props.user
    local showActions = props.showActions or false
    local cardClasses = "bg-white rounded-lg shadow-md p-6 max-w-sm mx-auto"
end

<div class={cardClasses}>
    {#if user.avatar}
        <img class="w-24 h-24 rounded-full mx-auto mb-4" 
             src={user.avatar} 
             alt={user.name}>
    {/if}
    
    <h2 class="text-xl font-semibold text-center text-gray-800">
        {user.name}
    </h2>
    
    {#if user.role}
        <p class="text-gray-600 text-center mt-2">
            {user.role}
        </p>
    {/if}
    
    {#if showActions}
        <button hx-post="/api/follow/{user.id}" 
                hx-target="#follow-status"
                class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition-colors">
            Follow
        </button>
    {/if}
</div>

Zero Configuration, Maximum Creativity​

We believe in zero configuration magic - starting with sensible defaults that just work. Wunderframe comes pre-configured with everything you need:

  • TailwindCSS: Auto-configured with sensible defaults and typography plugin
  • TypeScript: Optional support with pre-configured types for Alpine.js and HTMX
  • esbuild: Fast JavaScript bundling with hot reloading
  • Alpine.js: Reactive frontend framework for interactive components
  • HTMX: Server interactions without complex JavaScript

Here's how simple a Wunderframe application structure is:

my-wunderframe-app/
├── app.lua              # Main application entry point  
├── app.js               # Frontend JavaScript entry
├── app.css              # Global styles with TailwindCSS
├── wunder.toml          # Minimal project configuration
├── lib/components/      # LUAT components
└── src/                 # Frontend source files

Server-Side Rendering with Modern Frontend Stack​

Wunderframe renders LUAT templates on the server with optional client-side hydration. This means perfect Lighthouse scores and SEO-friendly pages by default. But here's where it gets exciting: seamless integration with HTMX and Alpine.js gives you the interactivity you need.

<!-- Interactive components with Alpine.js -->
<div x-data="{ open: false }" class="dropdown">
    <button @click="open = !open" class="btn btn-primary">
        Menu
    </button>
    <div x-show="open" class="dropdown-menu">
        <!-- Menu items -->
    </div>
</div>

<!-- Server interactions with HTMX -->
<button hx-post="/api/action" 
        hx-target="#result"
        class="btn btn-secondary">
    Update Content
</button>

The Power of Game-Proven Technology​

Lua isn't just simple - it's battle-tested. The same language that powers complex systems in World of Warcraft, Roblox, and Angry Birds now powers your web applications. LUAT templates compile to blazing-fast Lua bytecode, giving you game-level performance from day one.

-- app.lua - Your application entry point
local function render(pageContext, runtime)
    local helpers = createContextHelpers(runtime)
    helpers.createContext()
    
    local currentNode = pageContext.current_node
    
    -- Set up context for templates
    helpers.setContext("currentNode", currentNode)
    helpers.setContext("pageContext", pageContext)
    
    -- Route to appropriate component
    local renderComponent = getMatchingContentType(currentNode.content_type)
    return renderComponent(currentNode, runtime)
end

return { render = render }

Built-in Content Management System​

Wunderframe comes with a powerful, integrated content management system that goes far beyond traditional databases. At its core is a flexible backend that supports:

  • Content Trees and Typed Nodes: Organize your data in hierarchical structures with strong typing
  • Fine-grained Permissions: Control access at every level of your content hierarchy
  • Multi-tenant Workspaces: Built-in workspace isolation for scalable, multi-client applications
  • Built-in Versioning: Content versioning and publishing workflows out of the box
  • Flexible Integration: Optional integration with workflows, AI agents, and digital experience tooling

This isn't just a database - it's a complete content platform that understands modern application needs.

Modern Frontend Stack That Just Works​

No webpack configs. No build tool nightmares. Wunderframe includes everything you need:

  • Phosphor Icons: Beautiful icon library included by default
  • Live Development: Hot reloading and real-time updates
  • Component System: Reusable LUAT components with props and children
  • Domain-agnostic Backend: Flexible foundation for building content and data-driven platforms

Join Our Journey​

Wunderframe is more than a framework - it's a community of developers who believe in simplicity, performance, and joy in coding. We're building something special, and we want you to be part of it.

How You Can Get Involved​

  • Try the Beta: Sign up for early access at wunderframe.dev
  • Contribute: Check out our GitHub repository and contribute to the project
  • Share Feedback: Join our Discord community and share your thoughts
  • Spread the Word: Help us grow by sharing Wunderframe with fellow developers

What's Next?​

We're working hard on:

  • Completing the native mobile deployment tooling
  • Expanding the content management system with advanced workflow capabilities
  • Building a rich ecosystem of components and plugins
  • Creating comprehensive documentation and tutorials
  • Open-sourcing our backend platform for the broader community

The Philosophy​

At its core, Wunderframe embodies a simple philosophy:

Complexity is not a feature - it's a bug.

We believe that powerful tools should be simple to use, that performance shouldn't come at the cost of developer experience, and that the web should be accessible to everyone.

Ready to experience the future of full-stack development? Join us on this journey and help shape the future of Wunderframe. Together, we're building something extraordinary.

Get Started with Wunderframe →

Have thoughts, questions, or feedback? We'd love to hear from you! Reach out to us on X, or connect directly with me @thelabertasch.