The Frontend Framework for Complete Web Apps

Build CSR and SSR TypeScript applications with file-based routing, reactive stores, MVC components, and production tooling.

Get started Explore the framework

T ~npx @tavojs/cli create app my-app

What is Tavo.js Framework?

Tavo.js Framework is a TypeScript-first frontend framework for building client-rendered and server-rendered web applications. It brings routing, data, state, rendering, and production workflows into one consistent application model.

File-based routing

Turn pages and layouts into typed routes with loaders, middleware, navigation, and predictable fallback behavior.Read guide →

MVC components

Give reactive state, application behavior, and TSX rendering clear and separate responsibilities.Read guide →

Reactive stores

Share state through explicit actions, precise subscriptions, derived values, and optional persistence.Read guide →

Data and server work

Load data, handle actions and forms, run middleware, and keep server-only code out of client bundles.Read guide →

CSR, SSR, and streaming

Choose client rendering, server rendering, hydration, static generation, and deferred streaming within the same application.Read guide →

Production workflow

Inspect, diagnose, test, build, preview, deploy, and monitor applications through the Tavo.js CLI.Read guide →

One application model

CSR and SSR without two architectures.

Use the same routes, loaders, stores, and MVC components across client rendering, server rendering, hydration, and static output.

TSX

tsximport { createTavo, TavoController } from "@tavojs/core";
import { Button } from "@tavojs/ui";

class CounterController extends TavoController {
  increment() {
    this.model.patch((state) => ({
      count: state.count + 1
    }));
  }
}

export const Counter = createTavo({
  model: () => ({ count: 0 }),
  controller: CounterController,
  view: ({ state, controller }) => (
    <Button onClick={() => controller?.increment()}>
      Count: {state.count}
    </Button>
  )
});

Start with Tavo.js

Build with the framework. Add only what you need.

Build your first app

Create a routed TypeScript application with Tavo.js Framework and run it with client or server rendering.Read guide →

Add Tavo.js UI

Choose the optional UI system for accessible components, responsive styling, and project-owned themes.Read guide →

Build and ship

Inspect routes, validate the app, build, preview, and prepare deployment with the Tavo.js CLI.Read guide →

Use Tavo.js UI Core

Work directly with portable design tokens and accessibility tooling for web, native, and design systems.Read guide →