zFrame

Welcome to zFrame

The framework that transcends boundaries.

Get Started

Core Features

Component System

Build modern Web apps with Zig’s expressive component framework.

Built-in Optimizations

Automatic Wasm optimizations are all built-in

Tailwind CSS Support

Tailwind CSS support. Currently through only Play CDN

Integrated Web Assembly

Automatically generate Wasm from Zig and control it seamlessly on the Web.

File System Based Routing

Routing is clearly defined by file placement.

Useful Dev Utils

Boost productivity with our powerful developer-friendly CLI.

Development Roadmap

  • 2024 Q1 - Initial Release
  • 2024 Q2 - Feature Expansion
  • 2025 - Publish homepage

FAQ

What is zFrame?

zframe is a bold experiment in modern Web development—a Zig-powered frontend framework that lets you harness WebAssembly without worrying about layers or boundaries.

Do I need to know Zig?

You could get started with just the official Zig brief tutorial—if you enjoy living on the edge. But honestly, learning the Zig language properly is a smart move, and we highly recommend it!

Expressive components system

const z = @import("zframe")
const c = @import("components");
const Head = c.head.Head;
const node = z.node;
const Layout = @import("components").layout.Layout;

fn about() node.Node {
  const h1 = node.createNode(.h1);
  const p = node.createNode(.p);
  const div = node.createNode(.div);

  return div.init(.{
      h1.init("About").setClass("text"),
      p.setClass("hoge")
       .init("zframe is a opensource and secure Web Frontend Framework written in Zig."),
  });
}

WebAssembly integration

 const handler = Handler.init(
  .webassembly,
  .{
      .filename = "one.wasm",
      .then = .{
          .filename = "alert.js",
          .func = "test",
      },
  },
);

 try z.render.render(@src().file, index().addHandler("webassembly", handler));