🧩 Component-Based Architecture

Build your UI with reusable, composable components that encapsulate state and behavior.

📦

Encapsulated State

Each component manages its own state, making your code predictable and testable.

🔗

Outlets & Children

Use outlets to compose components together, creating complex UIs from simple parts.

♻

Lifecycle Hooks

prepare() and handle_action() hooks give you control over component behavior.

⚡ HTMX Integration

Add dynamic behavior without writing JavaScript. Spry makes HTMX even more powerful.

HTML with Spry Attributes

<!-- Declarative actions -->
<button spry-action=":Toggle"
        spry-target="item"
        hx-swap="outerHTML">
    Toggle Item
</button>

<!-- Cross-component communication -->
<form spry-action="ListComponent:Add"
      hx-target="#my-list">
    <input name="title" />
    <button type="submit">Add</button>
</form>

<!-- Out-of-band updates -->
<div spry-global="header">
    Updates automatically when data changes
</div>

🎯

spry-action

Declare component actions directly in your markup. No event listeners needed.

🔍

spry-target

Target elements within your component using simple sid references.

🌐

spry-global

Update multiple page regions with out-of-band HTMX swaps.

💉 Dependency Injection

Powered by Inversion, get clean, testable code with automatic dependency resolution.

Vala

class TodoComponent : Component {
    // Inject dependencies in field initializers
    private TodoStore store = inject<TodoStore>();
    private ComponentFactory factory = inject<ComponentFactory>();
    private HttpContext http = inject<HttpContext>();
}

// Register services with different lifecycles
application.add_singleton<AppState>();      // One instance forever
application.add_scoped<ComponentFactory>(); // One per request
application.add_transient<MyComponent>();  // New each time

📄 Page Templates

Create reusable layouts with nested templates that automatically wrap your pages.

🏗

Nested Layouts

Stack templates to create complex layouts from simple, reusable pieces.

📍

Route-Based

Templates are applied based on route prefixes, automatically wrapping matching pages.

🔌

Template Outlets

Use to define where child content renders.

🚀 High Performance

Built on Astralis for native code performance with web framework convenience.

Native

Code Execution

Brotli

Compression

Zero

JavaScript Required

Fast

Resource Loading

Features