Ziex - Full-stack Web Framework for Zig! Like Next.js/React but for Zig

Showcase
, ,
22

Here is Server-Action Demo! But looking for feedback on the most reasonable signature.

https://youtu.be/rLaKDNwl2FI

Client/Server Event Handler Signature
  • fn(*zx.Event.Server) void | fn(*zx.Event.Client) void
  • fn(*zx.client.Event) | fn(*zx.server.Event)
  • fn(*zx.ClientEvent) | fn(*zx.ServerEvent)
  • fn(*zx.Event) | fn(*zx.ServerEvent)
  • fn(*zx.Event.Client) | fn(*zx.Event.Server)
0 voters

Code Sample:


pub fn ProfileForm(ctx: *zx.ComponentContext) zx.Component {
    const count = ctx.state(i32, 0);

    return (
        <div @allocator={ctx.allocator} style="display: inline-flex; flex-direction: column">
            <button onclick={clientEvent} value="I'm on the client">Client Event</button>
            <button onclick={serverEvent} value="I'm on the server">Server Event</button>
            <h1>{count.get()}</h1>
            <button onclick={ctx.bind(serverIncrement)} value="I'm on the server">Increment: Server</button>
            <button onclick={ctx.bind(clientIncrement)} value="I'm on the server">Increment: Client</button>
        </div>
    );
}

fn clientEvent(ctx: zx.EventContext) void {
    const val = ctx.value() orelse "";
    std.log.info("onclick: {s}\n", .{val});
}

fn serverEvent(ctx: zx.ServerEventContext) void {
    const val = ctx.value() orelse "";
    std.log.info("onclick: {s}\n", .{val});
}

fn clientIncrement(ctx: *zx.EventContext) void {
    const val = ctx.state(i32);
    val.set(val.get() + 1);
    std.log.info("increment: {d}\n\n", .{val.get()});
}

fn serverIncrement(_: zx.ServerEventContext, sc: *zx.StateContext) void {
    const val = sc.state(i32);
    val.set(val.get() + 1);
    std.log.info("increment: {d}\n\n", .{val.get()});
}
4 Likes
23

Just saw this and looks very interesting, it would be cool if you can swap the renderer and use it as TUI framework like is common with react, or even gui using raylib or similar

24

Hey, thank you for taking a look! This was already in the future scope (though TUI is the last in the priority unless someone contributes) and things are designed in a way to easily and new renderer, currently there are renderer for browser (HTML Document) and renderer for server (HTML String). And there is an impressive Zig library that renders markdown on the terminal and it’s pretty good. GitHub - JacobCrabill/zigdown: Markdown toolset in Zig ⚡ · GitHub

1 Like
25

Thanks all for voting! I got the API laid out and is pretty happy about how it ended up!

2 Likes
26

Rebuilt zx dev command along with DevServer, Error Overlay, cleaner TUI for error printing and source mapping to actual .zx file!

Thanks to https://codeberg.org/ziglang/zig/src/branch/master/lib/std/Build/WebServer.zig!

image
image3216×2016 386 KB

Demo: https://youtu.be/ZQue2FvCZ3E

1 Like
27

Release with Zig 0.16.0 migration!

6 Likes
28

Ziex v0.1.0-dev.1570 release with Zig 0.17.0 migration!

Tooling

  • Ziex CLI: incremental builds, improved reliability with BSP, cleaner commands, improved Windows support.
  • Ziex LSP: tag/attribute complete and hover, improved VSCode with better LSP integration.
  • Ziex Devtools: click/hover highlight with auto-scroll, live host data, refreshed UI.

Core

  • Richer client forms and events, optional ZXON fields, shared page/API routes, broader caching.
  • WASM: blocking fetch (JSPI), optional off / optimize, stabler WASI export.
  • Modularized `httpz` and added pure `std` backend with the ability to optionally use `std` backed.

Docs & site

  • Playground app mode and updated Zig/WASI compiled from official Zig repository.
2 Likes