Build fast full-stack web apps with Zig.
JSX like syntax or just like HTML with having access to Zig's control flow. No JavaScript runtime, no garbage collection.
Performance-focused web apps built with Zig.
~100x faster SSR than Next.js. Compiles to native code instead of running JavaScript.
Familiar JSX like syntax or just like HTML with having access to Zig's control flow.
Server-side rendering by default. Pages render on the server with zero configuration.
Static site generation by default. Pages render on the server with zero configuration.
Folder structure defines routes. No configs, no magic strings, just files in folders.
if/else, loops, switch—standard control flow works as expected. It's just Zig.
Familiar JSX like syntax or just like HTML with having access to Zig's control flow.
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");
Real numbers based on some initial benchmarks.