TinyWasm Components

A catalog of reusable, efficient, and WebAssembly-ready UI components for the TinyWasm ecosystem.

Features

• Zero Boilerplate: Components handle their own state, styling, and event binding.
• SSR/CSR Split: CSS and heavy assets are server-side only; WASM binaries remain tiny.
• Fluent API: Uses tinywasm/dom for type-safe, declarative UI construction.
• Explicit Registration: Only pay for what you use (tree-shakeable).
• No Magic: Standard Go structs and interfaces.

Installation

go get github.com/tinywasm/components

Quick Start

1. Import Components

import (
    "github.com/tinywasm/components/button"
    "github.com/tinywasm/components/card"
    "github.com/tinywasm/dom"
)

2. Instantiate and Render

func main() {
    // Create a button
    btn := &button.Button{
        Text: "Click Me",
        Variant: "primary",
        OnClick: func(e dom.Event) {
            println("Button clicked!")
        },
    }

    // Render to the DOM
    dom.Append("app", btn)
}

Available Components

See Component Catalog for full documentation.

• Button: Primary/secondary actions with variants.
• Card: Content container with header/body/footer.
• Input: Text input with validation and labels.
• Nav: Navigation menu with icon support.
• Modal: Dialog overlays.
• Table: Data tables.
• Form: Form wrapper with submission handling.

Development

See Component Creation Guide to learn how to build your own components.

Prerequisites

• Go 1.21+
• TinyGo (for WASM compilation)

Running Tests

go test ./...