What Frontend Framework Does Open-SEO Use? A Deep Dive into the React + TanStack Architecture

Open-SEO uses React as its core frontend framework, built with Vite and enhanced by the TanStack ecosystem including @tanstack/react-start for full-stack capabilities and @tanstack/react-router for declarative routing.

The every-app/open-seo repository implements a modern React-based architecture that combines the flexibility of a single-page application with server-side rendering capabilities. Understanding what frontend framework open-seo uses requires examining its configuration files and source code, which reveal a deliberate choice to leverage the TanStack suite alongside React 18 for optimal performance and developer experience.

The Core Stack: React and TanStack

React as the UI Foundation

At the heart of open-seo's frontend lies React, imported throughout the client-side codebase using standard ES module syntax. In src/client/lib/theme.ts, the codebase imports React directly to build UI components and manage theme state, confirming React as the primary view library.

The project does not use a traditional meta-framework like Next.js or Remix. Instead, it adopts @tanstack/react-start, a full-stack starter that wires together React, server-side rendering, and data-fetching utilities while maintaining a Vite-based build process.

TanStack Router for Type-Safe Navigation

Open-SEO replaces conventional routing solutions with @tanstack/react-router, a declarative, type-safe router. The generated file src/routeTree.gen.ts declares modules from both @tanstack/react-router and @tanstack/react-start, creating a route tree that enables file-based routing with automatic TypeScript inference.

Routes are defined using the createFileRoute helper, which connects file paths to URL patterns while preserving end-to-end type safety.

Build Tooling with Vite

The project uses Vite as its build tool and development server rather than Webpack or Create React App. The configuration in web/vite.config.ts explicitly imports @vitejs/plugin-react to enable Fast Refresh and JSX transformation.

This Vite-based setup provides rapid cold starts and instant hot module replacement, which complements the TanStack development workflow. The build pipeline handles both client-side hydration and server-side rendering through the TanStack Start integration.

Architecture in Practice: Code Examples

React Component Implementation

Components follow modern React patterns with explicit imports, as seen across the src/client/ directory:

import * as React from "react";

export function HelloWorld() {
  return <h1>Hello, Open-SEO!</h1>;
}

This pattern mirrors the implementation in src/client/lib/theme.ts, where React hooks and JSX are used to define theme providers and UI helpers.

File-Based Routing with TanStack

Routes are defined using TanStack Router's file-based convention. A dashboard route would be implemented as:

import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/dashboard")({
  component: Dashboard,
});

The framework automatically generates the route tree in src/routeTree.gen.ts, which aggregates all routes and provides the type definitions used for navigation.

Data Fetching with TanStack Query

Server state management uses TanStack Query (integrated via TanStack Start), enabling declarative data fetching in components:

import { useQuery } from "@tanstack/react-query";

export function ProjectList() {
  const { data, isLoading } = useQuery({
    queryKey: ["projects"],
    queryFn: async () => {
      const res = await fetch("/api/projects");
      return res.json();
    },
  });

  if (isLoading) return <p>Loading…</p>;
  return (
    <ul>
      {data.map((p: any) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

This approach, implemented across various src/client/* files, eliminates the need for separate state management libraries while providing caching, deduplication, and background refetching.

Key Source Files Revealing the Framework

• web/vite.config.ts – Configures Vite with @vitejs/plugin-react and sets the foundation for the React build pipeline.
• src/client/lib/theme.ts – Imports React directly and implements component logic, demonstrating the core UI library usage.
• src/routeTree.gen.ts – Auto-generated route tree that imports from @tanstack/react-router and @tanstack/react-start, revealing the routing architecture.
• package.json – Lists the dependency stack including react, react-dom, @tanstack/react-start, and @tanstack/react-router, providing authoritative proof of the framework choices.

Summary

• Open-SEO uses React as its core frontend framework with modern hooks and JSX patterns.
• The TanStack ecosystem (@tanstack/react-start and @tanstack/react-router) provides full-stack capabilities and type-safe routing.
• Vite serves as the build tool, configured with the official React plugin for optimal development experience.
• The architecture is defined in key files like web/vite.config.ts and src/routeTree.gen.ts, which configure the React plugin and auto-generated route tree respectively.

Frequently Asked Questions

Is Open-SEO built with Next.js?

No, open-seo does not use Next.js. While it provides similar full-stack capabilities, the repository uses @tanstack/react-start instead, which is a TanStack-specific meta-framework that integrates with Vite rather than Webpack. You can verify this by examining the imports in src/routeTree.gen.ts and the Vite configuration in web/vite.config.ts.

What routing solution does Open-SEO use?

Open-SEO uses @tanstack/react-router for all client-side navigation. This router supports file-based routing conventions and generates type-safe route definitions in src/routeTree.gen.ts. The createFileRoute function is used to define routes, providing end-to-end type safety between your URL params and component props.

Why does Open-SEO use Vite instead of Create React App?

The project uses Vite because it offers significantly faster development server startup and hot module replacement compared to Create React App. The web/vite.config.ts file configures @vitejs/plugin-react, which provides Fast Refresh and modern JSX transformation while maintaining compatibility with the TanStack Start full-stack framework.

Can I use standard React hooks in Open-SEO?

Yes, you can use all standard React hooks including useState, useEffect, and useContext throughout the application. The codebase in src/client/lib/theme.ts and other client files demonstrates standard React patterns. Additionally, you have access to TanStack Query hooks like useQuery for server state management, which are the preferred method for data fetching in this architecture.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}