Stately

    Installation Details

    Stately consists of Rust crates for the backend and TypeScript packages for the frontend. Install the packages you need based on your project requirements.

    Backend (Rust)

    Core Packages

    Add the core Stately crates to your Cargo.toml:

    cargo add stately

    The stately crate re-exports stately-derive, so you don't need to add it separately.

    Feature Flags

    Stately supports several feature flags:

    FeatureDefaultDescription
    openapiYesOpenAPI schema generation via utoipa
    axumNoAxum web framework integration (includes openapi)

    To enable Axum API generation for example, install with the feature included:

    cargo add stately --features axum

    If using Stately's "axum" and "openapi" integrations (and you should, it's what glues the backend to the frontend and provides a lot of the magic), be sure to install some additional dependencies:

    cargo add axum 
cargo add serde --features derive
cargo add tokio --features rt,rt-multi-thread,sync,macros
cargo add tower-http --features cors # for CORS support
cargo add utoipa --features axum_extras,uuid,macros

    Plugin Crates

    For file management capabilities:

    cargo add stately-files

    For data connectivity and Arrow-based queries, optionally adding object-store functionality and clickhouse integration:

    cargo add stately-arrow --features object-store,clickhouse

    Frontend (TypeScript)

    Packages

    Stately packages are published to npm. Install using your preferred package manager:

    npm
    yarn
    pnpm
    bun
    deno
    npm install @statelyjs/stately
    INFO

    For out-of-the-box use cases, stately exports the most commonly used components, such as Layout, BaseForm, etc and some additional commonly used components from @statelyjs/ui. If you want access to the base components or other items not re-exported by stately, you can install @statelyjs/ui directly and import them yourself.

    DETAILS

    Stately also provides a low level library @statelyjs/schema. There are few cases where you will need to install this yourself, much of what it provides is re-exported from @statelyjs/stately and enhanced to include all "core" functionality. Of course, if you find yourself needing access to some of those primitives, you can install the library directly.

    Peer Dependencies

    The packages require several peer dependencies:

    npm
    yarn
    pnpm
    bun
    deno
    npm install react react-dom @tanstack/react-query lucide-react sonner openapi-fetch

    Stately requires Tailwind CSS v4 for styling. Install it in your project:

    npm
    yarn
    pnpm
    bun
    deno
    npm install -D tailwindcss @tailwindcss/cli

    See the Quick Start guide for CSS configuration details.

    If you plan on using the codemirror feature of @statelyjs/stately (found at @statelyjs/stately/plugins), or any plugins that require it (both @statelyjs/files and @statelyjs/arrow provide enhanced functionality when it is available), be sure to install @uiw/react-codemirror and other peer dependencies:

    npm
    yarn
    pnpm
    bun
    deno
    npm install @uiw/react-codemirror @uiw/codemirror-extensions-langs

    Plugin Packages

    For file management:

    npm
    yarn
    pnpm
    bun
    deno
    npm install @statelyjs/files

    For data connectivity:

    npm
    yarn
    pnpm
    bun
    deno
    npm install @statelyjs/arrow @tanstack/react-table @tanstack/react-virtual

    Development Setup

    Rust Requirements

    • Rust 2024 edition (1.85+)
    • Cargo

    TypeScript Requirements

    • A node runtime (Node.js 20+, bun, deno)
    • A package manager (npm, pnpm, or yarn)
    • TypeScript 5.0+