Snap Wasm VDOM

Reactive immediate DOM rendering with Wasm in Zig. Build interactive web applications in Zig for the browser which compile to a small WebAssembly binary (currently around 2.7K release small build).

Features

DOM rendering: simple immediate mode rendering
Event System: event handlers with callback support
Reactive State: state management and automatic re-rendering

Examples

See the included counter example in src/main.zig for small application.

Quick Start

zig build --release=small
python -m http.server

open localhost:8000 in your browser

Prerequisites

Zig 0.14.0 or later
A modern web browser

Building

# Build WASM library
zig build

# Run tests
zig build test

# Build optimized for production
zig build --release=small

API Reference

Core Types

`Node`

Virtual DOM node representing elements, text, or empty nodes.

`Attribute`

HTML attribute with name-value pairs.

// Create attribute
const attr: Attribute = .a("class", "my-class");

`EventHandler`

Type-safe event handling with callbacks.

// Create event handler
const handler: EventHandler = .e("click", &myCallback, &context);

DOM Helpers

`h()` - Element Node

pub fn h(
    tag: []const u8,
    attributes: []const Attribute,
    events: []const EventHandler,
    children: []const Node,
) Node

`t()` - Text Node

pub fn t(text: []const u8) Node

`tf()` - Formatted Text Node

pub fn tf(buf: []u8, comptime fmt: []const u8, args: anytype) Node

`hi()` - Immediate Element Node

pub fn hi(
    tag: []const u8,
    attributes: []const Attribute,
    events: []const EventHandler,
    children: []const Node,
) void

`ti()` - Immediate Text Node

pub fn ti(text: []const u8) void

State Management

`State(T, Subscriber)`

Generic state container with automatic invalidation.

pub fn useState(
    state: anytype,
    subscriber: anytype,
) State(@TypeOf(state), @TypeOf(subscriber))

Browser Integration

Include the generated WASM file and JavaScript bridge:

<!DOCTYPE html>
<html>
<head>
    <title>My Zig App</title>
</head>
<body>
    <div id="app"></div>
    <script src="index.js" data-wasm-url="zig-out/bin/snap-demo.wasm" data-wasm-init-method="init"></script>
</body>
</html>

The JavaScript bridge (index.js) provides:

DOM manipulation functions
Event system
Element caching with minimal memory management in Zig/Wasm. 99% of app memory lives in JS.

Architecture

The library is designed around these core concepts:

Virtual DOM: Immutable tree structures representing UI state
Immediate Mode: Direct DOM manipulation for performance
Event System: Type-safe callbacks with context preservation
State Management: Reactive updates triggering re-renders

Contributing

This project is in early development. Contributions welcome!

Fork the repository
Create a feature branch
Add tests for new functionality
Ensure zig build test passes
Submit a pull request

License

MIT License - see LICENSE file for details.

Roadmap

Component system architecture
Server-side rendering support
Performance optimizations
More comprehensive examples

Note: This is version 0.x software. APIs may change.

README