A step-by-step walkthrough of building a simple landing page with Woozie from scratch.

Your First Page

Let's build a real landing page. Should take about two minutes.

1. Create the project

woozie init mysite
cd mysite

2. Open main.woozie and replace it with this

app:
    nav:
        navlink "Home" [page=index]
        navlink "About" [page=about]

    hero "Hello World":
        text "I just built my first Woozie site."
        button "Learn More" [variant=solid]

    section:
        heading "Features"
        grid [cols=3]:
            card:
                subheading "Fast"
                text "Builds in under a second."
            card:
                subheading "Pretty"
                text "Looks good without any CSS."
            card:
                subheading "Responsive"
                text "Works on phones, tablets, and desktops."

    footer:
        text "Made with Woozie"

3. Run it

woozie run

Open http://localhost:3000. That's your landing page.

How the syntax works

Here's the short version:

Indentation is how you nest things. Always use 4 spaces.
Tag names like hero, card, button are built-in components.
Quoted text after a tag is its content — heading "Hello" renders a heading that says Hello.
Square brackets are attributes — [variant=solid, color=primary].
A colon at the end means "this tag has children." Indent them below it.
// is a comment. The compiler ignores it.

Syntax	What it means	Example
`tag "text"`	Component with content	`heading "Hello"`
`tag:`	Component with children	`card:`
`[key=val]`	Attribute	`[variant=solid]`
`[a=1, b=2]`	Multiple attributes	`[cols=3, type=info]`
`//`	Comment	`// ignored by compiler`
4 spaces	One level of nesting	indent children under parent

Add a second page

Create pages/about.woozie:

app:
    nav:
        navlink "Home" [page=index]
        navlink "About" [page=about]

    section:
        heading "About Me"
        text "I'm learning Woozie. It's going well."

    footer:
        text "Made with Woozie"

Visit http://localhost:3000/about — clean URL, no .html extension.

What's next

Layout Components — arrange things on the page
Routing — how multi-page navigation works
Styling — customize the look