mainz: a component tutorial inspired by Gutenberg's press

This page is a guided introduction to the mainz framework. Each section introduces a concept and helps you progress with practical TSX examples.

Start guided journey Open workshop

Guided journey

Advance through the framework concepts

25% complete

Start by creating a class that extends Component and returns markup in render().

Code for this stage

import { Component } from "mainz";

// Foundation: create your root component
export class HomePage extends Component {
    override render() {
        return (
            <main>
                <h1>mainz</h1>
            </main>
        );
    }
}

Core concepts

Foundations for your first printed page

BASE

Component as matrix

Each Component class works like a printing matrix: define the shape once and reuse it.

STATE

State as live ink

Each setState applies a new print while the DOM receives incremental patching.

EVENT

Workshop events

TSX handlers keep interactions straightforward while preserving lifecycle control.

ARCH

Composed sections

Separating Hero, Cards, and Sandbox keeps the project scalable and maintainable.

Checkpoint

Quick understanding check

Before moving on, validate one key idea from the framework.

Question 1/3

Which method should initialize state before first render?

Workshop

Build your Todo component

Complete challenges by writing code. A JavaScript validator checks your input and unlocks the next step.

Challenge 1/3

Challenge 1: Foundation

Create `import { Component } from "mainz"` and a class named `Todo` extending `Component`.

Write your code

// Step 1
// Create the Todo class structure

Next steps

After this page

1. Split into modules

Move each component into its own file and keep the entrypoint focused.

2. Add themed examples

Create examples for lists, forms, and composition to expand the tutorial.

3. Publish on GitHub Pages

Run the site build and publish the output folder to keep the page updated.