Introduction to Client-Side Interactivity

RizzyUI is built on a server-side rendering (SSR) first philosophy. Most of your UI comes directly from Blazor components rendered on the server, which keeps your application fast, secure, and simple. But sometimes, you need a touch of additional client-side magic—like toggling a dropdown, animating a modal, or responding instantly to a user's click without a full trip back to the server.

Why Alpine.js?

For that client-side layer, RizzyUI uses Alpine.js with every component. Think of it as a rugged, lightweight JavaScript framework that “lives right in your HTML.” It’s declarative, has a tiny footprint, and pairs perfectly with Blazor’s component model. Instead of wrestling with a heavy client-side framework, you sprinkle in just enough JavaScript to handle interactivity between components precisely where it’s needed.

Tip: Tailwind for JavaScript

Alpine is often described as “the Tailwind CSS of JavaScript.” If you’re comfortable adding utility classes to your markup, you’ll feel right at home adding Alpine directives like x-data and x-on:click.

What You’ll Learn in This Section

This Interactivity section is your guided tour from “zero JavaScript” to confidently building rich, dynamic components in RizzyUI. We’ll cover everything you need to know:

Defining State: Using x-data to give your components a memory.
Handling Events: Making your components react to clicks, input, and more with x-on.
Using Code-Behinds: The official RizzyUI pattern for organizing your JavaScript with RzAlpineComponent.
Sharing State: How to make different components talk to each other.
Lazy-Loading: How to keep your app fast by only loading JavaScript when it's needed.
Debugging: Tips and tricks for when things don't go as planned.

A First Glimpse

Here’s a simple example to show you what Alpine.js looks like in action. It’s a button that toggles a message on and off, right in the browser.

Razor

<div x-data="{ open: false }">
  <RzButton x-on:click="open = !open">Toggle Message</RzButton>
  <p x-show="open">Hello from Alpine!</p>
</div>

A Note on CSP and Interactivity Styles

RizzyUI ships with two client-side scripts: rizzyui.js (the standard build) and rizzyui-csp.js (for strict Content Security Policy environments). The simple example above works perfectly with the standard build.

However, if you use rizzyui-csp.js for enhanced security, Alpine.js cannot execute inline JavaScript expressions like open = !open. In that case, you must move logic into methods within a co-located JavaScript file. We'll cover this recommended "code-behind" pattern in the next sections.

Next Steps

Ready to get started? On the next page, we’ll dive into the fundamentals of Alpine.js, learning the core directives you’ll use every day and how they connect seamlessly with your RizzyUI components.