# What Programming Language Is Onyx Written In? Python & TypeScript Stack Revealed

> Discover the programming languages behind Onyx. This powerful AI search tool uses Python for backend and TypeScript with React for frontend development. Learn more about its tech stack.

- Repository: [Onyx/onyx](https://github.com/onyx-dot-app/onyx)
- Tags: internals
- Published: 2026-03-28

---

**Onyx is built with Python 3.11 for the backend and TypeScript with React for the frontend, leveraging FastAPI, Celery, and Next.js to power its AI-driven search infrastructure.**

Onyx is an open-source enterprise search and AI assistant platform hosted at `onyx-dot-app/onyx`. If you are investigating what programming language Onyx is written in, you will find a deliberate full-stack architecture: **Python** drives all data processing, embedding generation, and API services, while **TypeScript** powers the React-based user interface. This separation allows the project to leverage Python's extensive AI/ML ecosystem alongside modern, type-safe web development practices.

## Backend Architecture: Python 3.11

The backend of Onyx is implemented entirely in **Python 3.11**, utilizing the language's robust ecosystem for AI, data processing, and asynchronous task management.

### Core Frameworks and Services

In [`backend/onyx/server/api.py`](https://github.com/onyx-dot-app/onyx/blob/main/backend/onyx/server/api.py), the application defines HTTP endpoints using **FastAPI**, a high-performance Python web framework. The system uses **SQLAlchemy** for database ORM operations and **Celery** for background task processing, as evidenced by task definitions located under `backend/onyx/background/tasks/`.

The package structure is initialized in [`backend/onyx/__init__.py`](https://github.com/onyx-dot-app/onyx/blob/main/backend/onyx/__init__.py), which defines the version and core imports, while [`backend/pyproject.toml`](https://github.com/onyx-dot-app/onyx/blob/main/backend/pyproject.toml) declares Python project metadata and dependencies including FastAPI, Celery, and various ML libraries.

```python

# backend/onyx/utils/web_content.py – URL fetching utility

from onyx.utils.web_content import fetch_web_content

url = "https://example.com"
content = fetch_web_content(url)
print(f"First 200 chars: {content[:200]}")

```

### Background Task Processing

Python's role extends beyond API serving into asynchronous worker processes. Celery tasks handle document pruning, indexing, and embedding generation—workloads that benefit from Python's machine learning libraries.

```python

# Illustrative pattern from backend/onyx/background/tasks/

from celery import shared_task
from onyx.utils.logging import logger

@shared_task
def prune_documents():
    logger.info("Running document pruning...")
    # pruning logic executes here

```

## Frontend Stack: TypeScript and React

The user interface layer is built with **TypeScript** and **React**, compiled as **TSX** files within a **Next.js 15+** application located in the `web/` directory.

### TypeScript Implementation and Configuration

The frontend configuration is defined in [`web/package.json`](https://github.com/onyx-dot-app/onyx/blob/main/web/package.json), which lists Next.js, React, and TypeScript as core dependencies, and [`web/tsconfig.json`](https://github.com/onyx-dot-app/onyx/blob/main/web/tsconfig.json), which governs compiler settings. Source files use the `.tsx` extension, combining JSX templating with TypeScript's static type checking for safety and autocompletion.

In [`web/src/app/page.tsx`](https://github.com/onyx-dot-app/onyx/blob/main/web/src/app/page.tsx), a minimal client-side page demonstrates the TypeScript/React implementation:

```tsx
// web/src/app/page.tsx – Next.js redirect page
import { redirect } from "next/navigation";

export default async function Page() {
  redirect("/app");
}

```

### UI Component Architecture

The frontend utilizes the Opal design system, with components imported as TypeScript modules. The file [`web/src/sections/sidebar/AppSidebar.tsx`](https://github.com/onyx-dot-app/onyx/blob/main/web/src/sections/sidebar/AppSidebar.tsx) showcases real-world usage of typed UI primitives.

```tsx
// Pattern observed in web/src/sections/sidebar/AppSidebar.tsx
import { Button } from "@opal/components/buttons/button/components";

function CreateAgentButton() {
  return (
    <Button variant="default" prominence="primary" icon={SvgPlus}>
      Create Agent
    </Button>
  );
}

```

## Why the Language Split Matters

This dual-language architecture is strategic: **Python** provides access to PyTorch, Hugging Face transformers, and other AI libraries essential for semantic search and embeddings, while **TypeScript** delivers compile-time type safety and superior developer experience for complex UI state management. The backend exposes REST APIs consumed by the TypeScript frontend, creating clean separation between data processing and presentation layers.

## Summary

- **Onyx's backend** is written in **Python 3.11**, using FastAPI for APIs, SQLAlchemy for databases, and Celery for background workers.
- **Onyx's frontend** is written in **TypeScript** with React (TSX), running on Next.js 15+ for server-side and client-side rendering.
- **Key backend files** include [`backend/pyproject.toml`](https://github.com/onyx-dot-app/onyx/blob/main/backend/pyproject.toml) for dependencies and [`backend/onyx/__init__.py`](https://github.com/onyx-dot-app/onyx/blob/main/backend/onyx/__init__.py) for package initialization.
- **Key frontend files** include [`web/package.json`](https://github.com/onyx-dot-app/onyx/blob/main/web/package.json) for Node configuration and [`web/src/app/page.tsx`](https://github.com/onyx-dot-app/onyx/blob/main/web/src/app/page.tsx) for routing examples.
- The architecture separates AI/ML processing (Python) from UI logic (TypeScript) to optimize performance and maintainability.

## Frequently Asked Questions

### Is Onyx written entirely in Python?

No. While the backend services, Celery workers, and AI processing pipelines are written in Python 3.11, the frontend user interface is built with TypeScript and React. The `web/` directory contains the TypeScript codebase, while `backend/` contains the Python codebase.

### What Python frameworks does Onyx use?

Onyx leverages **FastAPI** for HTTP API endpoints, **SQLAlchemy** for database operations, and **Celery** for asynchronous task queues. These are declared in [`backend/pyproject.toml`](https://github.com/onyx-dot-app/onyx/blob/main/backend/pyproject.toml) and implemented throughout the `backend/onyx/` directory structure.

### Why does Onyx use TypeScript instead of JavaScript for the frontend?

The Onyx team chose **TypeScript** (compiled to `.tsx` files) to enable static type checking, better IDE autocompletion, and safer refactoring of the React components. This is standard practice in the Next.js 15+ ecosystem used by the project, as configured in [`web/tsconfig.json`](https://github.com/onyx-dot-app/onyx/blob/main/web/tsconfig.json).

### Can I extend Onyx using only Python?

Yes, you can extend backend functionality—such as adding new document connectors or AI model integrations—using only Python. However, any modifications to the user interface require TypeScript/React knowledge, as the frontend is a separate Next.js application consuming the Python backend APIs.