Custom JavaScript

Woozie builds your site without requiring any JavaScript knowledge. But when you want to add interactivity beyond what the built-in components offer, you can write your own scripts.

script.js (recommended)

The simplest approach. Create a script.js file in your project root:

my-project/
    main.woozie
    woozie.rules
    script.js          -- your custom code

Woozie automatically includes it on every page at build time. Write whatever you want in there:

document.addEventListener('DOMContentLoaded', () => {
    console.log('Custom script loaded');

    // grab a button and do something with it
    const btn = document.querySelector('.wz-btn');
    if (btn) {
        btn.addEventListener('click', () => {
            alert('Button clicked!');
        });
    }

    // animate elements on scroll
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    });

    document.querySelectorAll('.wz-card').forEach(el => {
        observer.observe(el);
    });
});

This runs after the Woozie runtime, so all built-in components are already initialized.

Inline script tags

You can also add scripts directly in your .woozie files:

External file

script "analytics.js"

This includes a <script src="analytics.js"> tag. The file gets copied to the build output automatically.

Inline code

script "console.log('hello from inline')"

Multiline (using children)

script:
    text "const x = 42;"
    text "console.log(x);"

CSS tag

Same idea, but for stylesheets:

// link an external CSS file
css "extra-styles.css"

// or inline CSS
css "body { background: red; }"

Tailwind CSS

If you want to use Tailwind, just add this tag anywhere in your page:

tailwindcss

This loads the Tailwind CDN script. You can then use Tailwind classes via style.woozie or inline attributes.

Tips

• script.js runs on every page, so keep it general or check which page you're on using window.location.pathname
• The built-in Woozie CSS classes all start with wz- (like wz-btn, wz-card, wz-hero) so you can target them in your scripts
• For page-specific scripts, use inline script tags on individual pages
• Your scripts load after the Woozie runtime, so tabs, accordions, modals, and the router are already set up