A Zig library for building web applications with JSX-like syntax. Write declarative UI components using familiar JSX patterns, transpiled to efficient Zig code.

ZX combines the power and performance of Zig with the expressiveness of JSX, enabling you to build fast, type-safe web applications. ZX is significantly faster than frameworks like Next.js at SSR.

📚 Full Documentation →

Installation

Linux/MacOS

curl -fsSL https://ziex.dev/install | bash

Windows

powershell -c "irm ziex.dev/install.ps1 | iex"

Quick Example

pub fn Page(allocator: zx.Allocator) zx.Component {
    const is_loading = true;
    const chars = "Hello, World!";

    return (
        <body>
            <section>
                {if (is_loading) (<h1>Loading...</h1>) else (<h1>Loaded</h1>)}
            </section>

            <section>
                {for (chars) |char| (<span>{[char:c]}</span>)}
            </section>

            <section>
                {for (users) |user| {
                    (<p>{user.name} - {[user.age:d]} - {switch (user.user_type) {
                        .admin => ("Admin"),
                        .member => ("Member"),
                    }}
                    </p>)
                }}
            </section>

        </body>
    );
}

const zx = @import("zx");

const User = struct {
    const UserType = enum { admin, member };

    name: []const u8,
    age: u32,
    user_type: UserType,
};

const users = [_]User{
    .{ .name = "John", .age = 20, .user_type = .admin },
    .{ .name = "Jane", .age = 21, .user_type = .member },
};

Feature Checklist

Core

JSX-like syntax
Server-Side Rendering (SSR)
Static Site Generation (SSG) (in progress)
High performance
Currently 120X faster than Next.js at SSR
Asset Copying
Asset Serving
Image Optimization
Server Actions
Route Handlers / Path Segments
Type Safety
File-system Routing
Middleware support
API Endpoints
CSS-in-ZX / Styling Solution
Incremental Static Regeneration (ISR)
Client-Side Rendering (CSR) via WebAssembly
Importing React Components

Tooling

CLI
Dev Server (HMR or Rebuild on Change)

Editor Support

VSCode/Cursor Extension
- Syntax Highlighting
- LSP Support
- Auto Format
Neovim
- Syntax Highlighting
- LSP Support
- Auto Format

Similar Projects

Documentation

For complete documentation, examples, and guides, visit https://ziex.dev

License

MIT

Description

Full-stack web framework for Zig. HTML syntax within Zig code, just like JSX but for Zig!

client-side-rendering frontend full-stack full-stack-web-framework html jsx server server-side-rendering web web-assembly web-framework zig zig-package

Readme MIT 23 MiB

Languages

Zig 83.9%

TypeScript 6.2%

CSS 4%

JavaScript 2.1%

Shell 1.7%

Other 1.9%