Skip to content

Overview

Litestar Vite Litestar Vite

First-class Vite 7+, Inertia.js, Server-Rendered Islands, and End-to-End Type Generation for Litestar.


Litestar Vite bridges Litestar (Python ASGI) and Vite 7+ into a unified full-stack runtime. During development, your browser connects solely to Litestar (:8000) while the single-port proxy streams frontend modules and hot-reload WebSocket updates from a managed Vite process. In production, the asset loader serves hashed, immutable bundles directly from the Vite manifest.

Single-Port AnyIO Development Proxy and .litestar.json Bridge Shows browser traffic entering Litestar on port 8000, branching between Python route handlers and ViteProxyMiddleware over AnyIO TCP streams and wsproto WebSockets to the Vite dev server on port 5173, coordinated by .litestar.json and the hot file. Browser http://127.0.0.1:8000 Single Origin (No CORS) /api/* & /vite-hmr Litestar ASGI Process (:8000) Route Handlers JSON APIs, Inertia & Templates ViteProxyMiddleware anyio.connect_tcp + WebSocket Vite Dev Server 127.0.0.1:5173 litestar-vite-plugin Asset Transform & HMR Dev SSR Runner POST /__litestar_ssr__ Runtime Handshake .litestar.json ⇄ hot file

Choose Your Operating Mode

Litestar Vite adapts to your frontend architecture through a single mode setting on ViteConfig:

  • Single-Page Application


    Litestar serves your JSON and OpenAPI routes while transforming index.html with Vite asset tags for React, Vue, Svelte, or Angular SPAs.

    → Quick Start: SPA

  • Inertia.js Hybrid


    Build React, Vue, or Svelte single-page applications without maintaining a separate client API layer. Return Python models directly as typed page props.

    → Quick Start: Inertia.js

  • Jinja2 & Islands


    Render server-side Jinja2 templates enhanced with Vite HMR, interactive island hydration, and server component fragments for HTMX swaps.

    → Quick Start: Templates & Islands

  • Meta-Frameworks


    Run Astro, Nuxt, or SvelteKit behind Litestar's reverse proxy with automatic OpenAPI SDK, route helper, and AsyncAPI channel generation.

    → Astro · Nuxt · SvelteKit


Installation and Setup

Install the Python and Vite Packages

uv add litestar-vite
pip install litestar-vite
pdm add litestar-vite
poetry add litestar-vite

Install the paired Vite 7+ plugin in your frontend workspace:

npm install -D litestar-vite-plugin
pnpm add -D litestar-vite-plugin
bun add -d litestar-vite-plugin

Register the Plugin on Your Litestar App

docs/examples/getting_started/spa_app.py
"""Single-Page Application (SPA) quick-start example with Litestar and Vite."""

from __future__ import annotations

from pathlib import Path

from litestar import Litestar, get
from msgspec import Struct

from litestar_vite import PathConfig, RuntimeConfig, TypeGenConfig, ViteConfig, VitePlugin


class SummaryStats(Struct, frozen=True, gc=False):
    """Dashboard summary payload returned by the JSON API."""

    active_users: int
    requests_per_second: float
    region: str


@get("/api/summary", sync_to_thread=False)
def get_summary() -> SummaryStats:
    """Return typed summary metrics for the SPA frontend."""
    return SummaryStats(active_users=128, requests_per_second=412.5, region="us-east-1")


def create_app() -> Litestar:
    """Create a Litestar application configured for SPA mode."""
    vite_config = ViteConfig(
        mode="spa",
        dev_mode=True,
        paths=PathConfig(root=Path(), resource_dir=Path("src"), bundle_dir=Path("public/build")),
        runtime=RuntimeConfig(start_dev_server=False),
        types=TypeGenConfig(generate_sdk=True, generate_routes=True),
    )
    return Litestar(route_handlers=[get_summary], plugins=[VitePlugin(config=vite_config)])


def main() -> None:
    """Verify the SPA example application constructs cleanly."""
    app = create_app()
    plugin = app.plugins.get(VitePlugin)
    assert plugin.config.mode == "spa"
    assert SummaryStats(active_users=128, requests_per_second=412.5, region="us-east-1").active_users == 128


__all__ = ("SummaryStats", "create_app", "get_summary", "main")

Scaffold and Run on a Single Port

$ litestar assets init --template react
✓ Created vite.config.ts, package.json, tsconfig.json
$ litestar assets install
✓ Frontend dependencies installed
$ litestar run --reload
INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
INFO:     Vite dev server started on http://127.0.0.1:5173 (proxied via :8000)

When litestar run --reload starts:

  1. VitePlugin writes .litestar.json (the configuration bridge read by the Vite plugin) and exports OpenAPI and route schemas when type generation is enabled.
  2. VitePlugin spawns the Vite dev server and reads its bound address from the hot file in your bundle directory.
  3. Every browser request hits http://127.0.0.1:8000 — Python API routes execute in Litestar, while Vite asset and HMR WebSocket traffic streams transparently through the single-port proxy.

Explore the Documentation

Section What You Will Learn
Getting Started Installation, CLI scaffolding (litestar assets init), and end-to-end walkthroughs for SPA, Inertia.js, and Jinja2 + Islands
Core Concepts The four operating modes, layered ViteConfig sub-configs, build-time Static Props, Islands & HTMX fragments, Dev/Prod SSR, and production CDN deployment
Frameworks & Inertia Deep dive into Inertia.js (defer, merge, once, shared props, Precognition), React/Vue/Svelte setup, and Astro/Nuxt/SvelteKit integration
TypeGen & Realtime Zero-drift OpenAPI SDK generation (@hey-api/openapi-ts), type-safe route() / toRoute() URL builders, and AsyncAPI WebSocket channel typing
Architecture Interactive animated SVG/CSS diagrams of the Single-Port AnyIO Proxy, Operating Modes, Inertia.js Lifecycle, SSR IPC, and TypeGen Pipeline
Reference Complete Python API (litestar_vite), TypeScript 18-subpath API (litestar-vite-plugin), litestar assets CLI reference, and wire contracts