ziex

<p align="center">
    <img src="https://raw.githubusercontent.com/ziex-dev/branding/main/banner-animated.svg" alt="Ziex banner" width="100%" />
</p>

A full-stack web framework for Zig. Declarative UI components using familiar patterns, with full access to Zig's control flow.

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


<p align="center">
  <a href="https://ziex.dev">Website</a> ·
  <a href="https://ziex.dev/learn">Docs</a> ·
  <a href="https://ziex.dev/playground">Playground</a> ·
  <a href="https://ziex.dev/r/discord">Discord</a>
</p>

## Getting Started

### 1. Installing CLI (optional)

```bash
# macOS/Linux
curl -fsSL https://ziex.dev/install | bash

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


### 2. Initializing Project

```powershell
zx init
# or
npm create ziex
# or
git clone https://github.com/ziex-dev/template-starter my-app
cd my-app && zig build dev
```

You will need [compatible](#versions) Zig version when using the Ziex CLI (`zx`), or you can use the `Node` template from `npm create ziex`

Read [Getting Started →](https://ziex.dev/learn) for more details.

## At a Glance

```tsx site/pages/examples/playground.zx
pub fn Playground(allocator: zx.Allocator) zx.Component {
    const is_loading = true;
    var i: usize = 0;

    return (
        <main @allocator={allocator}>
            <h1>Hello, Ziex!</h1>

            {for (users) |user| (
                <Profile name={user.name} age={user.age} role={user.role} />
            )}

            {if (is_loading) (<p>Loading...</p>) else (<p>Loaded</p>)}

            {while (i < 5) : (i += 1) (<i>{i}</i>)}
        </main>
    );
}

fn Profile(ctx: *zx.ComponentCtx(User)) zx.Component {
    return (
        <div @allocator={ctx.allocator}>
            <h3>{ctx.props.name}</h3>
            <div>{ctx.props.age}</div>
            <strong>
                {switch (ctx.props.role) {
                    .admin => "Admin",
                    .member => "Member",
                }}
            </strong>
        </div>
    );
}

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

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

const zx = @import("zx");
```

Try this in [Playground →](https://ziex.dev/playground#data=eF59U01vnDAQ_StTTtAiyGZVqSKAEuVSVa2USy8NUUTAu2sJbGQgoUv83ztjlo-y2_rCfLx5zMyze-uhSH_vlWxF7h07K7Cq9gV2AuawnRaFzNJGqgCOnXc3eg5597KspGCigT4RgCeTom6A18-FTHMu9hBBo1p2M2RfUwU8gLbmR4aZKwwPCcWaVgmwB49OWKZcwO3086ifTB3PMAM9bOKvDLMu_OKs-xD6GBiZx9PvpAK7rZmqHXin7_vydxPXg5I7XjAQacminnAemRrS_eijpUHJYvTJ1OCvunL0WQt8B_a8GgfssIq_D47neaFfxQ6womZTguUmeM70dqAebQ4hfHYgIOtTBBui5HHPdehzUzYWhD6t89Shg2s3lKTzMK6dNV0AH5eK3jed_RPHcy4LfUGxnL_-JRhyev8RbRsbRKVkVQ87RuG2axiSLnG0-9Cn4ApXN0qK_SpKp6_feJMdwJ5JSDBnHGR9vDQv8eZFMSTWHZmJ5f4DWbLyhakB-sPYF7Far3r1z5pdjjTJM7wl0gDfC