Ziex

A full-stack web framework for Zig. Write declarative UI components using familiar JSX patterns, transpiled to efficient Zig code.

Ziex combines the power and performance of Zig with the expressiveness of JSX, enabling you to build fast, type-safe web applications.

Documentation →

Installation

Linux/macOS

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

Windows

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

Installing Zig

brew install zig # macOS
winget install -e --id zig.zig # Windows

See for other platforms →

Quick Example

pub fn QuickExample(allocator: zx.Allocator) zx.Component {
    const is_loading = true;
    const chars = "Hello, Ziex Dev!";
    var i: usize = 0;
    return (
        <main @allocator={allocator}>
            <section>
                {if (is_loading) (<h1>Loading...</h1>) else (<h1>Loaded</h1>)}
            </section>
        
            <section>
                {for (chars) |char| (<span>{char}</span>)}
            </section>
        
            <section>
                {for (users) |user| (
                    <Profile name={user.name} age={user.age} role={user.role} />
                )}
            </section>

            <section>
                {while (i < 10) : (i += 1) (<p>{i}</p>)}
            </section>
        </main>
    );
}

fn Profile(allocator: zx.Allocator, user: User) zx.Component {
    return (
        <div @allocator={allocator}>
            <h1>{user.name}</h1>
            <p>{user.age}</p>
            {switch (user.role) {
                .admin => (<p>Admin</p>),
                .member => (<p>Member</p>),
            }}
        </div>
    );
}

const UserRole = enum { admin, member };
const User = struct { name: []const u8, age: u32, role: UserRole };

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

const zx = @import("zx");

Feature Checklist

• Server Side Rendering (SSR)
  • Streaming
• Static Site Generation (SSG)
  • options.static.params, options.static.getParams
• Client Side Rendering (CSR) via WebAssembly (Alpha)
  • Virtual DOM and diffing
  • Rendering only changed nodes
  • onevent handler
  • State managment
  • Hydration
  • Lifecycle hook
  • Server Actions
  • Rendering performance
• Client Side Rendering (CSR) via React
• MDZX (Markdown + ZX) (MDX eqiuvalent)
• Render page as markdown via .md
• Routing
  • File-system Routing
  • Search Parameters
  • Path Segments
• Components
• Control Flow
  • if
  • if/else
  • for
  • switch
  • while
  • nesting control flows
  • error/optional captures in while and if
• Assets
  • Copying
  • Serving
• Assets Optimization
  • Image
  • CSS (via plugins such as Tailwind)
  • JS/TS (via esbuild)
  • HTML (optimized by default)
• Proxy/Middleware
• Caching (configurable)
  • Component
  • Layout
  • Page
  • Assets
• API Route
  • Websocket Route
• Plugin (Alpha)
  • Builtin TailwindCSS and Esbuild
  • Command based plugin system
  • Source based plugin system
• Context (configurable)
  • App
  • Layout
  • Page
  • Component
• error.zx for default and per-route error page
• notfound.zx for default and per-route error page
• CLI
  • init Project Template
  • transpile Transpile .zx files to Zig source code
  • serve Serve the project
  • dev HMR or Rebuild on Change
  • fmt Format the ZX source code
  • export Generate static site assets
  • bundle Bundle the ZX executable with public/assets and exe
  • version Show the version of the ZX CLI
  • update Update the version of ZX dependency
  • upgrade Upgrade the version of ZX CLI
• Platform
  • Server
  • Browser
  • Edge Runtime (Cloudflare Workers, Vercel Function, etc)
  • iOS
  • Android
  • macOS
  • Windows

Editor Support

• VSCode/VSCode Forks Extension

• Neovim

• Helix

• Zed

Community

• Discord
• Topic on Ziggit
• Project on Zig Discord Community (Join Zig Discord first: https://discord.gg/zig)

Similar Projects

• Ziex VS →

Related Projects

• Codeberg Mirror - ZX repository mirror on Codeberg
• ziex.dev - Official documentation site of ZX made using ZX.
• example-blog - Demo blog web application built with ZX
• zx-numbers-game - ZX numbers game

Contributing

Contributions are welcome! Currently trying out ZX and reporting issues for edge cases and providing feedback are greatly appreciated.