ZX

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"

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, ZX Dev!";

    return (
        <main @allocator={allocator}>
            <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| (
                    <Profile name={user.name} age={user.age} role={user.role} />
                )}
            </section>
        </main>
    );
}

fn Profile(allocator: zx.Allocator, user: User) zx.Component {
    return (
        <div @allocator={allocator}>
            <h1>{user.name}</h1>
            <p>{[user.age:d]}</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)
Static Site Generation (SSG)
Client Side Rendering (CSR) via WebAssembly (WIP)
Client Side Rendering (CSR) via React
Type Safety
Routing
File-system Routing
Search Parameters
Path Segments
Components
Control Flow
if
if nested
if/else
if/else nested
for
for nested
switch
switch nested
while
while nested
Assets
Copying
Serving
Assets Optimization
Image
CSS
JS
HTML
Middleware
API Endpoints
Server Actions
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 (Alpha)
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

Editor Support

• VSCode/Cursor Extension
  Syntax Highlighting
  LSP Support
  Auto Format

• Neovim
  Syntax Highlighting
  LSP Support (Full for Zig, partial for ZX)
  Auto Format

• Zed
  Syntax Highlighting
  LSP Support (Full for Zig, partial for ZX)
  Auto Format

Similar Projects

Rust

• Leptos - Full-stack, isomorphic Rust web framework with fine-grained reactivity and JSX-like syntax
• Dioxus - Cross-platform GUI framework with React-like API, supporting web, desktop, mobile, and SSR
• Yew - Rust / Wasm framework for creating reliable and efficient web applications with component-based architecture
• Sycamore - Reactive web framework with fine-grained reactivity and minimal bundle sizes
• Perseus - Full-stack framework built on Sycamore with SSR, SSG, and incremental regeneration

Zig

• Jetzig - Zig web framework with MVC architecture, built-in ORM, and powerful templating
• ZTS - Zig Templates made Simple, a templating system for Zig
• zmpl - Mode-based templating language that compiles to Zig functions at build time, used in Jetzig
• mustache-zig - Mustache template engine implementation in Zig
• etch - Compile-time tuned templating engine focusing on speed and simplicity
• Zap - High-performance backend framework in Zig
• http.zig - Low-level HTTP/1.1 server written entirely in Zig (ZX's backend)
• tokamak - Server-side framework for Zig
• zig-router - Straightforward HTTP-like request routing library for Zig
• zig-webui - Zig library that allows using any web browser as a GUI
• Zine - Fast, scalable, flexible static site generator (SSG) written in Zig
• Zinc - Web framework written in pure Zig with focus on high performance, usability, security, and extensibility
• zUI - UI kit for Jetzig framework with reusable components and styles

Related Projects

• Codeberg Mirror - ZX repository mirror on Codeberg
• zx-vscode - Official VSCode/Cursor extension with syntax highlighting, LSP support, and auto-formatting
• ziex.dev - Official documentation site of ZX made using ZX.
• zx-example-portfolio - Demo portfolio web application built with ZX
• thegates.dev - Example clone demonstrating ZX capabilities

Contributing

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