# What Frontend Framework Does Open-SEO Use? A Deep Dive into the React + TanStack Architecture
> Discover Open-SEO's frontend architecture! Explore how React and the TanStack ecosystem, including react-start and react-router, power this innovative project.
- Repository: [Every App/open-seo](https://github.com/every-app/open-seo)
- Tags: deep-dive
- Published: 2026-07-30
---
**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`](https://github.com/every-app/open-seo/blob/main/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`](https://github.com/every-app/open-seo/blob/main/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`](https://github.com/every-app/open-seo/blob/main/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:
```typescript
import * as React from "react";
export function HelloWorld() {
return Hello, Open-SEO!
;
}
```
This pattern mirrors the implementation in [`src/client/lib/theme.ts`](https://github.com/every-app/open-seo/blob/main/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:
```typescript
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`](https://github.com/every-app/open-seo/blob/main/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:
```typescript
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 Loading…
;
return (
{data.map((p: any) => (
- {p.name}
))}
);
}
```
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`](https://github.com/every-app/open-seo/blob/main/web/vite.config.ts)** – Configures Vite with `@vitejs/plugin-react` and sets the foundation for the React build pipeline.
- **[`src/client/lib/theme.ts`](https://github.com/every-app/open-seo/blob/main/src/client/lib/theme.ts)** – Imports React directly and implements component logic, demonstrating the core UI library usage.
- **[`src/routeTree.gen.ts`](https://github.com/every-app/open-seo/blob/main/src/routeTree.gen.ts)** – Auto-generated route tree that imports from `@tanstack/react-router` and `@tanstack/react-start`, revealing the routing architecture.
- **[`package.json`](https://github.com/every-app/open-seo/blob/main/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`](https://github.com/every-app/open-seo/blob/main/web/vite.config.ts) and [`src/routeTree.gen.ts`](https://github.com/every-app/open-seo/blob/main/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`](https://github.com/every-app/open-seo/blob/main/src/routeTree.gen.ts) and the Vite configuration in [`web/vite.config.ts`](https://github.com/every-app/open-seo/blob/main/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`](https://github.com/every-app/open-seo/blob/main/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`](https://github.com/every-app/open-seo/blob/main/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`](https://github.com/every-app/open-seo/blob/main/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.