# Technologies Used in Plane Web Application (apps/web): Complete Tech Stack Breakdown

> Explore the Plane web application tech stack. Discover its TypeScript React frontend, Vite build tool, MobX state management, SWR data fetching, and Tailwind CSS.

- Repository: [Plane/plane](https://github.com/makeplane/plane)
- Tags: tech-stack-breakdown
- Published: 2026-08-22

---

**The Plane web client (`apps/web`) is a TypeScript-based React single-page application built with Vite, utilizing MobX for reactive state management, SWR for data fetching, and Tailwind CSS for styling alongside specialized Plane workspace packages.**

The primary web interface for Plane lives in the `apps/web` directory of the [makeplane/plane](https://github.com/makeplane/plane) repository. This modern client combines a carefully curated stack of open-source libraries with internal workspace tooling to deliver a responsive, type-safe project management experience. The technologies used in this web application emphasize developer ergonomics, runtime performance, and strict type safety across the entire stack.

## Core Framework: React and TypeScript

The foundation rests on **React** and **React Router** for UI rendering and client-side navigation. The application uses **TypeScript** with strict compiler settings enabled, extending the shared `@plane/typescript-config/react-router.json` configuration found in [`apps/web/tsconfig.json`](https://github.com/makeplane/plane/blob/main/apps/web/tsconfig.json). This ensures compile-time safety through strict null checks and advanced type inference across the entire codebase.

The client-side bootstrap occurs in [`apps/web/app/entry.client.tsx`](https://github.com/makeplane/plane/blob/main/apps/web/app/entry.client.tsx), which initializes the React Router runtime and mounts the application root.

## Build System: Vite and Static Serving

**Vite** powers both the development server and production bundling. Listed in [`apps/web/package.json`](https://github.com/makeplane/plane/blob/main/apps/web/package.json) under devDependencies, Vite provides the module resolution and hot module replacement that support the `react-router dev` command. For production deployments, the build pipeline outputs static assets served via the **serve** package (`pnpm start` executes `serve -s build/client`).

## State Management with MobX

Reactive state management relies on **MobX**, **MobX-React**, and **MobX-Utils**, complemented by the internal `@plane/shared-state` workspace package. The application initializes stores through [`apps/web/core/lib/store-context.tsx`](https://github.com/makeplane/plane/blob/main/apps/web/core/lib/store-context.tsx), making them available throughout the component tree via React context. Components connect to observable stores using the `observer` higher-order component.

```tsx
// Pattern used across the application
import { observer } from 'mobx-react';
import { useStore } from '@/helpers/store.helper';

const Example = observer(() => {
  const { projectStore } = useStore();
  return <div>{projectStore.activeProject?.name ?? 'No project'}</div>;
});

```

## Data Fetching: SWR and Axios

For server communication, the app implements a **stale-while-revalidate** strategy using **SWR** with **axios** as the underlying HTTP client. This combination provides automatic caching, request deduplication, and optimistic UI updates. The pattern appears throughout the application for fetching workspace data, issue lists, and user permissions.

```tsx
import useSWR from 'swr';
import axios from 'axios';

function useWorkspaces() {
  const { data, error } = useSWR('/api/workspaces/', url =>
    axios.get(url).then(res => res.data)
  );
  return { workspaces: data, isLoading: !error && !data, error };
}

```

## Styling and Component Architecture

**Tailwind CSS** provides the utility-first styling foundation, configured through the internal `@plane/tailwind-config` workspace package. The component library **@plane/ui** builds on **Headless UI** (`@headlessui/react`) to create accessible, unstyled primitives that are customized via Tailwind.

Theme switching between light and dark modes is handled by **next-themes**, adapted for the React Router environment through compatibility layers. Supporting utilities include **clsx** for conditional class merging and **react-popper** for positioning floating elements.

## Rich Text Editing: @plane/editor

Content editing is powered by the internal **@plane/editor** package. This rich-text solution supports markdown, file uploads, and @mentions. The integration point resides in [`apps/web/core/components/editor/rich-text/editor.tsx`](https://github.com/makeplane/plane/blob/main/apps/web/core/components/editor/rich-text/editor.tsx), which wraps the editor for use across issue descriptions, comments, and other content areas.

## Additional Utility Libraries

The [`apps/web/package.json`](https://github.com/makeplane/plane/blob/main/apps/web/package.json) reveals a comprehensive ecosystem of specialized tools:

- **Data utilities**: `lodash-es`, `uuid`, `react-fast-compare`
- **Date manipulation**: `date-fns`
- **Form handling**: `react-hook-form`
- **Data visualization**: `recharts` for analytics dashboards
- **Drag and drop**: `@atlaskit/pragmatic-drag-and-drop` and `react-dropzone`
- **UX enhancements**: `cmdk` for command palettes, `emoji-picker-react`, `react-color`, `smooth-scroll-into-view-if-needed`
- **PDF rendering**: `react-pdf-renderer`
- **Font management**: `use-font-face-observer`

## Key Implementation Files

Several critical files define the technical architecture:

- [`apps/web/package.json`](https://github.com/makeplane/plane/blob/main/apps/web/package.json): Declares runtime dependencies including `react`, `react-router-dom`, `mobx`, `swr`, and `vite`
- [`apps/web/tsconfig.json`](https://github.com/makeplane/plane/blob/main/apps/web/tsconfig.json): Enforces strict TypeScript rules extending `@plane/typescript-config/react-router.json`
- [`apps/web/app/entry.client.tsx`](https://github.com/makeplane/plane/blob/main/apps/web/app/entry.client.tsx): Client-side application entry point that hydrates the React Router tree
- [`apps/web/core/lib/store-context.tsx`](https://github.com/makeplane/plane/blob/main/apps/web/core/lib/store-context.tsx): Establishes the MobX provider hierarchy for global state access
- [`apps/web/app/compat/next/script.tsx`](https://github.com/makeplane/plane/blob/main/apps/web/app/compat/next/script.tsx): Compatibility shim for Next.js-style Script components, illustrating the framework-agnostic design approach

## Summary

- **React + TypeScript**: Provides the UI foundation with strict null checks enabled via [`apps/web/tsconfig.json`](https://github.com/makeplane/plane/blob/main/apps/web/tsconfig.json)
- **Vite**: Handles development server and optimized production builds as configured in [`apps/web/package.json`](https://github.com/makeplane/plane/blob/main/apps/web/package.json)
- **MobX**: Manages reactive state through the context provider at [`apps/web/core/lib/store-context.tsx`](https://github.com/makeplane/plane/blob/main/apps/web/core/lib/store-context.tsx)
- **SWR**: Implements stale-while-revalidate data fetching patterns with axios for HTTP transport
- **Tailwind CSS + @plane/ui**: Delivers utility-first styling and reusable component primitives built on Headless UI
- **@plane/editor**: Powers rich-text editing with markdown support and file upload capabilities

## Frequently Asked Questions

### What frontend framework does Plane use?

Plane's web application is built with **React** and **React Router**, configured as a single-page application. The entry point at [`apps/web/app/entry.client.tsx`](https://github.com/makeplane/plane/blob/main/apps/web/app/entry.client.tsx) bootstraps the routing layer and renders the component tree within a strict TypeScript environment that extends `@plane/typescript-config/react-router.json`.

### How does Plane handle global state management?

The application uses **MobX** combined with **MobX-React** for reactive state management. Stores are provided through a React context defined in [`apps/web/core/lib/store-context.tsx`](https://github.com/makeplane/plane/blob/main/apps/web/core/lib/store-context.tsx), allowing components to subscribe to specific store slices using the `observer` pattern, while `@plane/shared-state` provides shared store definitions.

### What build tool powers the Plane web client?

**Vite** serves as both the development server and production bundler. The [`apps/web/package.json`](https://github.com/makeplane/plane/blob/main/apps/web/package.json) includes Vite in devDependencies and uses it to run the `react-router dev` command during development, while the `serve` package hosts the static production build output in the `build/client` directory.

### How is styling and theming implemented in Plane?

Styling relies on **Tailwind CSS** configured through the internal `@plane/tailwind-config` workspace package. The UI components in `@plane/ui` extend **Headless UI** primitives, while **next-themes** manages light and dark mode switching. The architecture uses **clsx** for dynamic class names and **react-popper** for dropdown positioning.