# What Programming Languages Are Used in Open-SEO? A Complete Tech Stack Breakdown

> Discover the programming languages powering Open-SEO. Learn about TypeScript, TSX, JavaScript, SQL, YAML, Docker, and JSON in this full-stack tech stack breakdown.

- Repository: [Every App/open-seo](https://github.com/every-app/open-seo)
- Tags: internals
- Published: 2026-07-26

---

**Open-SEO primarily uses TypeScript and TSX for its full-stack React application, supplemented by JavaScript, SQL, YAML, Docker, and JSON for utility scripts, database migrations, and infrastructure configuration.**

Open-SEO is a modern full-stack web application developed by every-app that delivers SEO tooling through a React-based interface. Understanding what programming languages are used in open-seo helps developers contribute effectively and deploy the stack correctly. The repository follows a TypeScript-first architecture with strategic use of auxiliary languages for specific operational needs.

## Core Programming Languages in Open-SEO

### TypeScript and TSX: The Primary Stack

TypeScript dominates the codebase, powering both the client-side React UI and server-side TanStack router functions. The application uses TSX (TypeScript JSX) for component rendering, as implemented in [`src/router.tsx`](https://github.com/every-app/open-seo/blob/main/src/router.tsx) where the `getRouter` function initializes the routing layer via `createTanStackRouter`. Configuration files like [`web/vite.config.ts`](https://github.com/every-app/open-seo/blob/main/web/vite.config.ts) and [`drizzle.config.ts`](https://github.com/every-app/open-seo/blob/main/drizzle.config.ts) also leverage TypeScript for type-safe build tooling and database adapter configuration.

### JavaScript for Utility Scripts

While TypeScript is preferred for application code, plain JavaScript handles specific Node.js utilities and release tooling. The file `scripts/release-notes.mjs` executes directly without compilation, handling auxiliary tasks like changelog generation. Some TypeScript files compile to JavaScript for runtime execution in specific CLI environments.

### SQL for Database Persistence

Raw SQL manages schema definitions and migrations through the Drizzle ORM. The repository includes dialect-specific SQL files such as [`drizzle-pg/0012_dashboard.sql`](https://github.com/every-app/open-seo/blob/main/drizzle-pg/0012_dashboard.sql), which defines Postgres tables with explicit constraints and timestamps. These migrations run during deployment to establish the data layer for SQLite or Postgres backends.

## Infrastructure and Configuration Languages

### YAML for Project Orchestration

YAML files coordinate the monorepo structure and DevOps workflows. The [`pnpm-workspace.yaml`](https://github.com/every-app/open-seo/blob/main/pnpm-workspace.yaml) declares workspace boundaries for the pnpm monorepo, while [`compose.yaml`](https://github.com/every-app/open-seo/blob/main/compose.yaml) defines Docker Compose services for local development. CI/CD pipelines also rely on YAML for declarative configuration management.

### Dockerfile for Containerization

The `Dockerfile.selfhost` provides container definitions for self-hosting deployments, specifying the runtime environment and multi-stage build steps needed to containerize the TypeScript application for production.

### Markdown and JSON for Documentation

Markdown files like [`README.md`](https://github.com/every-app/open-seo/blob/main/README.md) host project documentation and operational runbooks. JSON and JSONC (JSON with Comments) configure package manifests ([`package.json`](https://github.com/every-app/open-seo/blob/main/package.json)) and runtime settings (`wrangler.jsonc`), serving as static data stores for the application toolchain.

## Code Examples from the Repository

### TanStack Router Configuration (TypeScript/TSX)

```tsx
// src/router.tsx
import { createRouter as createTanStackRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";
import { DefaultCatchBoundary } from "./client/components/DefaultCatchBoundary";
import { NotFound } from "./client/components/NotFound";

export function getRouter() {
  const router = createTanStackRouter({
    routeTree,
    defaultPreload: "intent",
    defaultErrorComponent: DefaultCatchBoundary,
    defaultNotFoundComponent: () => <NotFound />,
    scrollRestoration: true,
  });

  return router;
}

```

This example demonstrates the TypeScript implementation in [`src/router.tsx`](https://github.com/every-app/open-seo/blob/main/src/router.tsx), utilizing the generated `routeTree` from [`src/routeTree.gen.ts`](https://github.com/every-app/open-seo/blob/main/src/routeTree.gen.ts) to configure client-side routing with custom error boundaries.

### Database Migration (SQL)

```sql
-- drizzle-pg/0012_dashboard.sql
CREATE TABLE dashboard (
  id          SERIAL PRIMARY KEY,
  user_id     INTEGER NOT NULL,
  created_at  TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at  TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

```

The Drizzle ORM executes this SQL during migration runs to establish Postgres-specific schema structures.

### Data Seeding Script (TypeScript)

```typescript
// scripts/seed-rank-tracking.ts
import { db } from "../src/server/db";
import { seedRankTracking } from "./utils/seed";

async function main() {
  await seedRankTracking(db);
  console.log("✅ Rank‑tracking seeded");
  process.exit(0);
}

main().catch((e) => {
  console.error("❌ Seed failed:", e);
  process.exit(1);
});

```

Run via `pnpm ts-node scripts/seed-rank-tracking.ts`, this TypeScript script populates initial rank-tracking data using the server database connection.

## Summary

- **TypeScript/TSX** serves as the dominant language for the React frontend, TanStack router, and build configuration in [`src/router.tsx`](https://github.com/every-app/open-seo/blob/main/src/router.tsx) and [`web/vite.config.ts`](https://github.com/every-app/open-seo/blob/main/web/vite.config.ts).
- **JavaScript** handles auxiliary Node.js scripts like `scripts/release-notes.mjs` for release automation and tooling.
- **SQL** defines database schemas and migrations in files such as [`drizzle-pg/0012_dashboard.sql`](https://github.com/every-app/open-seo/blob/main/drizzle-pg/0012_dashboard.sql) for Drizzle ORM execution against SQLite or Postgres.
- **YAML** manages monorepo workspaces via [`pnpm-workspace.yaml`](https://github.com/every-app/open-seo/blob/main/pnpm-workspace.yaml) and container orchestration through [`compose.yaml`](https://github.com/every-app/open-seo/blob/main/compose.yaml).
- **Dockerfile**, **Markdown**, and **JSON** support containerization, documentation, and static configuration respectively.

## Frequently Asked Questions

### Is Open-SEO built entirely with TypeScript?

While TypeScript is the primary language for application logic and UI components, the project also uses JavaScript for specific utility scripts, SQL for database migrations, and YAML for configuration. The core stack is TypeScript-first, but auxiliary languages handle specialized operational tasks.

### What database languages does Open-SEO support?

Open-SEO uses SQL for schema definitions and migrations, compatible with both SQLite and Postgres backends. The Drizzle ORM executes raw SQL files like [`drizzle-pg/0012_dashboard.sql`](https://github.com/every-app/open-seo/blob/main/drizzle-pg/0012_dashboard.sql) during migration runs to create tables and relationships.

### Why does Open-SEO use both TypeScript and JavaScript?

TypeScript handles the main application code for type safety across the React frontend and server functions. JavaScript appears in utility scripts such as `scripts/release-notes.mjs` that run directly in Node.js without requiring a compilation step.

### Are there specific containerization languages in the repository?

Yes, the repository includes a `Dockerfile.selfhost` written in Dockerfile syntax for building container images. Additionally, [`compose.yaml`](https://github.com/every-app/open-seo/blob/main/compose.yaml) uses YAML to define multi-service Docker Compose configurations for self-hosting deployments.