Features

Everything you need to build modern, reactive web applications in Vala

🧩 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

Ready to Build?

Try the interactive demo and see Spry in action.

Try Live Demo