What Is the Plane Admin Application? A Complete Guide to Instance Management in Plane

The Plane Admin application is a dedicated React-based web interface that allows instance administrators to configure authentication providers, manage workspaces, set system-wide policies, and control feature toggles for entire Plane deployments.

The Plane Admin application (apps/admin) serves as the centralized control panel for self-hosted Plane instances. Unlike the main Plane UI (apps/web), which focuses on project collaboration and work items, this standalone React single-page application provides privileged users with isolated tools to manage the entire deployment. According to the makeplane/plane source code, the Admin app operates under its own domain to enforce stricter security boundaries between operational configuration and day-to-day product work.

Core Responsibilities of the Plane Admin Application

Instance-Wide Configuration

The Admin app controls global settings that affect every workspace in the deployment. Administrators configure authentication providers including Google, GitHub, GitLab, Gitea, and email-based login through dedicated interfaces. The system also manages email SMTP settings for notifications and AI integration credentials. These configurations persist through the InstanceService layer located in packages/services/src/instance/instance.service.ts, which communicates with the Django backend API.

Workspace and User Management

Instance administrators can create, list, and modify workspaces without accessing individual project spaces. The InstanceWorkspaceService handles CRUD operations for workspace entities, while InstanceAdminService manages user invitations and access levels. This functionality lives in apps/admin/app/(all)/(dashboard)/workspace/page.tsx and related components, providing a centralized directory of all organizational units within the instance.

Feature Toggles and Branding

The interface enables or disables modules such as Pages, Analytics, and other capabilities across the entire instance. Administrators also control instance-level branding assets and global policies like sign-up restrictions. These settings are managed through observable MobX stores that sync with the backend via the provider hierarchy defined in apps/admin/providers/instance.provider.tsx.

Technical Architecture and Implementation

React Router Entry Point

The application boots from apps/admin/app/root.tsx, which renders the HTML skeleton and initializes the React Router navigation structure. This root component wraps all routes with the AppProviders hierarchy, injecting necessary contexts before rendering any admin-specific pages.

MobX State Management

Following the same architecture as the main Plane UI, the Admin app uses MobX stores located in store/* directories to hold observable data. The userStore manages authentication state for admin sessions, while workspace lists and instance configurations live in dedicated stores. The apps/admin/providers/store.provider.tsx file wraps the MobX root store and makes it available throughout the component tree.

Service Layer Integration

Communication with the Django-based backend flows through the @plane/services package. Services like InstanceWorkspaceService and InstanceAdminService abstract API calls to endpoints such as /api/instances/workspaces/. This separation ensures UI components remain pure presentation layers while business logic and network requests reside in the service tier.

Common Administrative Workflows

Configuring Email Authentication

Administrators enable SMTP integration through components like apps/admin/components/authentication/email-config-switch.tsx. This UI directly modifies instance settings through the InstanceService layer:

// apps/admin/components/authentication/email-config-switch.tsx
import { useState } from "react";

export const EmailConfigSwitch = () => {
  const [enabled, setEnabled] = useState(false);

  const toggle = async () => {
    // Calls a service that updates the instance configuration
    await instanceService.updateSMTP({ enabled: !enabled });
    setEnabled(!enabled);
  };

  return (
    <label className="flex items-center">
      <input type="checkbox" checked={enabled} onChange={toggle} />
      <span className="ml-2">Enable email SMTP</span>
    </label>
  );
};

Creating New Workspaces

The workspace creation flow in apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx demonstrates how admin actions update global state:

// apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx
import { useWorkspaceStore } from "@/hooks/store/use-workspace";

export const WorkspaceCreateForm = () => {
  const { createWorkspace } = useWorkspaceStore();

  const onSubmit = async (values) => {
    await createWorkspace({
      name: values.name,
      description: values.description,
    });
    // UI automatically updates via MobX reaction
  };

  return (
    <form onSubmit={onSubmit}>
      {/* …input fields… */}
    </form>
  );
};

The createWorkspace action in this component invokes methods from packages/services/src/instance/instance.service.ts, which posts to the backend API and triggers MobX reactions to refresh the workspace list.

Admin Authentication Flow

The entry point at apps/admin/app/(all)/(home)/page.tsx renders a specialized sign-in form that authenticates against instance-admin endpoints:

// apps/admin/app/(all)/(home)/page.tsx – entry point for the sign‑in page
import { SignInForm } from "./sign-in-form";

export default function AdminHome() {
  return (
    <main className="flex flex-col items-center justify-center min-h-screen">
      <h1 className="text-2xl font-bold mb-4">Plane Admin</h1>
      <SignInForm />   {/* Admin‑specific sign‑in flow */}
    </main>
  );
}

This component stores authentication results in the userStore as defined in apps/admin/providers/user.provider.tsx, establishing the security context required for subsequent administrative actions.

Summary

• The Plane Admin application provides a dedicated interface for instance-level configuration, separate from day-to-day project management tools.
• It manages authentication providers, SMTP settings, workspace creation, and global feature toggles through a React and MobX architecture.
• Key files include apps/admin/app/root.tsx for bootstrapping, apps/admin/providers/instance.provider.tsx for service injection, and packages/services/src/instance/instance.service.ts for backend communication.
• The application enforces security boundaries by operating under its own domain with specialized admin-only authentication flows.

Frequently Asked Questions

What is the difference between the Plane Admin application and the regular Plane UI?

The regular Plane UI (apps/web) focuses on work items, cycles, modules, and project-level collaboration for end users. The Plane Admin application (apps/admin) provides a separate, isolated interface for instance administrators to configure deployment-wide settings like authentication providers, workspace management, and global policies.

How does the Plane Admin application authenticate users?

The Admin app uses a specialized sign-in flow defined in apps/admin/app/(all)/(home)/page.tsx that authenticates against instance-admin endpoints. Upon successful authentication, the system stores credentials in the userStore managed by apps/admin/providers/user.provider.tsx, establishing the security context required for administrative operations.

Can you create and manage workspaces through the Plane Admin interface?

Yes, administrators can create, list, and edit workspaces through components located in apps/admin/app/(all)/(dashboard)/workspace/. The WorkspaceCreateForm component uses the useWorkspaceStore hook to call createWorkspace, which ultimately invokes InstanceWorkspaceService to persist changes via the Django backend API.

What technology stack powers the Plane Admin application?

The Plane Admin application is built with React and React Router as a single-page application. It uses MobX for observable state management, with stores wrapped by apps/admin/providers/store.provider.tsx. The service layer in @plane/services handles communication with the Django-based backend, while the UI operates under its own domain to enforce stricter authorization checks.

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