# What Programming Languages Are Used in pi-web? A Complete Technical Breakdown

> Discover the programming languages powering pi-web. This technical breakdown details its TypeScript Next.js core, JavaScript testing, and CSS Tailwind styling.

- Repository: [Alex Yang/pi-web](https://github.com/agegr/pi-web)
- Tags: deep-dive
- Published: 2026-08-11

---

**Pi-web is a TypeScript-centric Next.js application that uses TypeScript/TSX for core code, JavaScript (ESM) for testing, and CSS/Tailwind for styling.**

The pi-web repository is a modern web application built on the Next.js React framework. Understanding its language stack helps developers contribute effectively or evaluate the project for their own use. This guide examines each programming language used in pi-web, with specific file references from the `agegr/pi-web` source code.

## Primary Language: TypeScript

TypeScript dominates the pi-web codebase, appearing in `.ts` and `.tsx` files throughout the project.

### Why TypeScript Was Chosen

- **Static typing** catches errors at compile time
- **Modern ES2022 features** with backward compatibility
- **Seamless Next.js integration** with first-class framework support

### Key TypeScript Files in pi-web

| File | Purpose |
|------|---------|
| [`tsconfig.json`](https://github.com/agegr/pi-web/blob/main/tsconfig.json) | Compiler configuration and strictness settings |
| [`next.config.ts`](https://github.com/agegr/pi-web/blob/main/next.config.ts) | Custom Next.js server configuration |
| [`tailwind.config.ts`](https://github.com/agegr/pi-web/blob/main/tailwind.config.ts) | Tailwind CSS setup with CSS variable theming |
| [`components/AppShell.tsx`](https://github.com/agegr/pi-web/blob/main/components/AppShell.tsx) | Core React component structure |
| `lib/*.ts` | Business logic, RPC handling, file utilities |

The [`tsconfig.json`](https://github.com/agegr/pi-web/blob/main/tsconfig.json) file controls module resolution and type checking across the entire project. For example, [`next.config.ts`](https://github.com/agegr/pi-web/blob/main/next.config.ts) extends this configuration to customize server behavior while maintaining full type safety.

### TypeScript Component Example

```tsx
// components/MessageView.tsx
import React from 'react';
import { Message } from '@/lib/pi-types';

interface Props {
  message: Message;
}

export const MessageView: React.FC<Props> = ({ message }) => (
  <div className="p-2 rounded-md bg-user-bg">
    <p>{message.content}</p>
  </div>
);

```

This component demonstrates strict prop typing via the `Props` interface and integration with Tailwind utility classes.

## Secondary Language: JavaScript (ESM)

JavaScript appears selectively in `.js` and `.mjs` files, primarily for **testing and utility scripts**.

### JavaScript Usage Pattern

The project uses **ESM format (`.mjs`)** for test files to keep them lightweight and fast-running in Node environments. This avoids the overhead of TypeScript compilation during test execution.

### JavaScript Test Example

```javascript
// lib/rpc-manager.test.mjs
import { test, expect } from 'bun:test';
import { startRpcSession } from './rpc-manager.js';

test('creates a new AgentSession', async () => {
  const session = await startRpcSession({ cwd: '/tmp' });
  expect(session).toBeDefined();
  expect(session.id).toBeTruthy();
});

```

This test file imports from `bun:test` and validates the `startRpcSession` function from the TypeScript-based [`rpc-manager.js`](https://github.com/agegr/pi-web/blob/main/rpc-manager.js) module. The `.mjs` extension ensures Node treats it as ES modules without additional configuration.

## Styling: CSS with Tailwind Configuration

While not a programming language, CSS plays a critical role in pi-web's presentation layer.

### Tailwind + CSS Variables Architecture

| Technology | File | Role |
|------------|------|------|
| Tailwind config (TypeScript) | [`tailwind.config.ts`](https://github.com/agegr/pi-web/blob/main/tailwind.config.ts) | Design system definition |
| CSS variables | [`app/globals.css`](https://github.com/agegr/pi-web/blob/main/app/globals.css) | Theme tokens (colors, spacing) |
| Utility classes | Inline in TSX | Component-specific styling |

The [`tailwind.config.ts`](https://github.com/agegr/pi-web/blob/main/tailwind.config.ts) file extends Tailwind's theme with custom CSS variables:

```typescript
// tailwind.config.ts
import type { Config } from 'tailwindcss';
export default {
  content: ['./app/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        bg: 'var(--bg)',
        accent: 'var(--accent)',
      },
    },
  },
  plugins: [],
} satisfies Config;

```

This TypeScript configuration generates CSS utility classes that reference variables defined in [`app/globals.css`](https://github.com/agegr/pi-web/blob/main/app/globals.css), enabling dynamic theming without JavaScript runtime overhead.

## Configuration: JSON

JSON files support tooling and dependency management without executing logic:

- **[`package.json`](https://github.com/agegr/pi-web/blob/main/package.json)** — Dependency declarations (React, Next.js, TypeScript) and npm scripts
- **[`tsconfig.json`](https://github.com/agegr/pi-web/blob/main/tsconfig.json)** — TypeScript compiler options
- Lockfiles and metadata

## Language Distribution Summary

| Language | Extension | Approximate Usage | Location Pattern |
|----------|-----------|-------------------|------------------|
| **TypeScript** | `.ts`, `.tsx` | ~90% production code | `components/`, `lib/`, `app/` |
| **JavaScript** | `.mjs` | ~5% test code | `*.test.mjs` |
| **CSS** | `.css` | ~4% styling | [`app/globals.css`](https://github.com/agegr/pi-web/blob/main/app/globals.css) |
| **JSON** | `.json` | ~1% configuration | Root config files |

## Summary

- **TypeScript/TSX** powers the entire application layer in pi-web, from React components to server configuration
- **JavaScript (ESM)** handles testing with minimal overhead via `.mjs` files
- **CSS with Tailwind** provides type-safe, variable-driven styling configured in TypeScript
- **JSON** manages package dependencies and compiler settings

This stack delivers a **type-safe, component-driven frontend** with **typed backend logic** while keeping test tooling lightweight and fast.

## Frequently Asked Questions

### Is pi-web a pure TypeScript project?

No. While approximately 90% of the codebase uses TypeScript, pi-web deliberately uses JavaScript (ESM) for test files. The `lib/rpc-manager.test.mjs` pattern keeps tests fast by avoiding TypeScript compilation overhead during test runs.

### Why does pi-web use `.mjs` instead of `.ts` for tests?

The `.mjs` extension forces Node.js to treat files as ES modules without transpilation. This reduces test startup time and eliminates build-step dependencies for the testing workflow. Tests import compiled JavaScript from the TypeScript source.

### Can I contribute to pi-web without knowing TypeScript?

Basic JavaScript knowledge suffices for small contributions, but TypeScript proficiency is essential for feature development. The [`tsconfig.json`](https://github.com/agegr/pi-web/blob/main/tsconfig.json) enforces strict type checking, so untyped code will fail compilation.

### How does Tailwind configuration work in a TypeScript project?

Tailwind supports TypeScript configuration natively. In [`tailwind.config.ts`](https://github.com/agegr/pi-web/blob/main/tailwind.config.ts), the `satisfies Config` syntax provides type checking against Tailwind's schema while preserving the config object for runtime use.