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

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 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. 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, 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 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, making them available throughout the component tree via React context. Components connect to observable stores using the observer higher-order component.

// 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.

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, which wraps the editor for use across issue descriptions, comments, and other content areas.

Additional Utility Libraries

The 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: Declares runtime dependencies including react, react-router-dom, mobx, swr, and vite
• apps/web/tsconfig.json: Enforces strict TypeScript rules extending @plane/typescript-config/react-router.json
• apps/web/app/entry.client.tsx: Client-side application entry point that hydrates the React Router tree
• apps/web/core/lib/store-context.tsx: Establishes the MobX provider hierarchy for global state access
• 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
• Vite: Handles development server and optimized production builds as configured in apps/web/package.json
• MobX: Manages reactive state through the context provider at 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 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, 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}