How to create reusable components and share them across pages using the plugin system.

Local Plugins

If you're copying the same navbar or footer into every page, plugins fix that. Write the component once, use it everywhere with @name.

What's a plugin?

A plugin is just a .woozie file in your plugins/ folder. It defines a chunk of UI that you can drop into any page.

How to create one

1. Create the file

my-project/
    plugins/
        navbar.woozie
        footer.woozie

2. Write the component

// plugins/navbar.woozie

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

// plugins/footer.woozie

footer:
    text "Copyright 2026 My Website"
    row:
        link "GitHub" [href=https://github.com]
        link "Twitter" [href=https://twitter.com]

3. Register in woozie.rules

plugins:
    navbar = plugins/navbar.woozie
    footer = plugins/footer.woozie

The name on the left side of = is what you'll type after @.

4. Use it

// main.woozie

app:
    @navbar

    hero "Welcome":
        text "Hello World"

    @footer

// pages/about.woozie

app:
    @navbar

    section:
        heading "About"
        text "About us content."

    @footer

Things to know

The plugin name (left of =) is what you use after @
Plugins can contain any Woozie components
There's no limit to how many you can have
They're injected at compile time, so there's zero runtime overhead
Each plugin file should have one top-level component (like nav: or footer:)