A powerful state management library for Leptos applications with state machines, persistence, and DevTools


Keywords
leptos, reactive, state-management, wasm
Licenses
MIT/Apache-2.0

Documentation

๐Ÿš€ leptos-state - Powerful State Management for Leptos

Crates.io Documentation License Rust

The definitive state management solution for Leptos applications - featuring stores, state machines, middleware, and DevTools integration.

โœจ Features

  • ๐Ÿช Reactive Stores - Zustand-inspired API with Leptos integration
  • ๐ŸŽฏ State Machines - XState-like state machines with guards and actions
  • ๐Ÿ”Œ Middleware System - Extensible middleware for logging, validation, and more
  • ๐Ÿ› ๏ธ DevTools Integration - Browser DevTools for state inspection and debugging
  • ๐Ÿ’พ Persistence - Automatic state persistence with multiple storage backends
  • ๐Ÿ“Š Visualization - State machine diagrams and transition tracking
  • ๐Ÿงช Testing Framework - Comprehensive testing utilities for state machines
  • โšก Performance Optimized - Minimal overhead with smart reactivity
  • ๐ŸŒ WASM Ready - Full WebAssembly support for web applications

๐Ÿš€ Quick Start

Installation

[dependencies]
leptos-state = "0.2.0"
leptos = "0.8"

Simple Store

use leptos_state::{create_store, use_store};

#[derive(Clone, Debug)]
struct CounterStore {
    count: i32,
    name: String,
}

impl CounterStore {
    fn increment(&mut self) {
        self.count += 1;
    }
    
    fn set_name(&mut self, name: String) {
        self.name = name;
    }
}

fn Counter() -> impl IntoView {
    let (store, actions) = use_store::<CounterStore>();
    
    view! {
        <div>
            <h2>"Counter: " {store.count}</h2>
            <p>"Name: " {store.name}</p>
            <button on:click=move |_| actions.increment()>
                "Increment"
            </button>
        </div>
    }
}

State Machine

use leptos_state::{MachineBuilder, use_machine};

#[derive(Clone, Debug)]
enum TrafficLightEvent {
    Next,
    Emergency,
}

fn TrafficLight() -> impl IntoView {
    let machine = MachineBuilder::new()
        .state("red")
            .on(TrafficLightEvent::Next, "green")
        .state("green")
            .on(TrafficLightEvent::Next, "yellow")
        .state("yellow")
            .on(TrafficLightEvent::Next, "red")
        .initial("red")
        .build();
    
    let (state, send) = use_machine(machine);
    
    view! {
        <div>
            <h2>"Traffic Light: " {state.value()}</h2>
            <button on:click=move |_| send(TrafficLightEvent::Next)>
                "Next Light"
            </button>
        </div>
    }
}

๐Ÿ“š Documentation

๐ŸŽฏ Why leptos-state?

For Leptos Developers

  • First-class Leptos integration - Built specifically for Leptos applications
  • Reactive by design - Automatic updates when state changes
  • WASM optimized - Designed for web applications

For State Management

  • Familiar APIs - Inspired by Zustand and XState
  • Type safety - Full Rust type safety and compile-time guarantees
  • Performance - Minimal runtime overhead with smart optimizations

For Production Apps

  • Middleware ecosystem - Extensible architecture for enterprise needs
  • DevTools support - Professional debugging and monitoring
  • Testing utilities - Comprehensive testing framework included

๐Ÿ”ง Advanced Features

Middleware System

use leptos_state::{LoggerMiddleware, ValidationMiddleware, MiddlewareChain};

let store = create_store::<MyStore>()
    .with_middleware(
        MiddlewareChain::new()
            .add(LoggerMiddleware::new())
            .add(ValidationMiddleware::new())
    );

Persistence

let machine = MachineBuilder::new()
    .state("idle")
    .build_with_persistence(PersistenceConfig {
        enabled: true,
        storage_key: "my_machine".to_string(),
        auto_save: true,
        ..Default::default()
    });

Code Generation

let generator = machine.build_with_code_generation(CodeGenConfig {
    target_languages: vec![ProgrammingLanguage::Rust, ProgrammingLanguage::TypeScript],
    output_directory: "generated".to_string(),
    ..Default::default()
});

generator.generate_code()?;

๐ŸŒŸ Examples

Check out our comprehensive examples:

๐Ÿš€ Getting Started

  1. Add to your project:

    cargo add leptos-state
  2. Check out the examples:

    git clone https://github.com/cloud-shuttle/leptos-state.git
    cd leptos-state/examples
    cargo run --bin counter
  3. Read the documentation:

๐Ÿค Contributing

We welcome contributions! Please see our Contributing Guide for details.

๐Ÿ“„ License

This project is licensed under either of

at your option.

๐Ÿ™ Acknowledgments


Ready to build amazing Leptos applications? Get started now!