Multi-Page Routing

Woozie handles multiple pages out of the box. No router config, no setup — just create files and they become pages.

Creating pages

Put .woozie files in a pages/ folder:

my-project/
    main.woozie          -- home page (/)
    pages/
        about.woozie     -- /about
        contact.woozie   -- /contact
        pricing.woozie   -- /pricing

The filename (minus .woozie) becomes the URL. That's it.

Page structure

Every page uses the same structure as your homepage:

// pages/about.woozie

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

    section:
        heading "About Us"
        text "We build great things."

page=index always points to your homepage (main.woozie).

Navigation

navlink

The main way to link between pages. Put them inside a nav:

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

The current page's navlink automatically gets an active class for styling.

button

Buttons can navigate too:

button "Go to Pricing" [page=pricing]

link

Regular links work the same way:

link "Read More" [page=about]

Clean URLs

URLs never show .html. The dev server and the router both handle this:

Shared layouts with plugins

If you're copying the same navbar and footer into every page, use a plugin instead. Create the component once:

// plugins/navbar.woozie

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

Register it in woozie.rules:

plugins:
    navbar = plugins/navbar.woozie

Then use @navbar in any page:

app:
    @navbar
    section:
        heading "Page Content"
    @footer

See Local Plugins for more on this.

Page transitions

Pages transition with a smooth fade animation. The client-side router intercepts navigation clicks so page switches feel instant — no full page reloads.