# Main Features of the Kaneo Web Application: A Complete Feature Guide

> Discover the main features of the Kaneo web application. Explore multi-workspace collaboration, Kanban boards, Gantt charts, real-time updates, and AI integrations in this comprehensive guide.

- Repository: [kaneo.app/kaneo](https://github.com/usekaneo/kaneo)
- Tags: getting-started
- Published: 2026-08-09

---

**Kaneo is a self-hosted, full-stack project management platform built with React 19 and TanStack that provides multi-workspace collaboration, Kanban boards, Gantt charts, real-time updates, and AI integrations through the Model Context Protocol (MCP).**

Kaneo offers an open-source alternative to proprietary project management SaaS tools, delivering a modern TypeScript-based architecture that teams can deploy on their own infrastructure. The application combines a React 19 frontend with a feature-driven codebase organization, utilizing TanStack Router for file-based routing and TanStack Query for server state management. Below is a comprehensive breakdown of the main features of the Kaneo web application based on the `usekaneo/kaneo` source code.

## Authentication & Session Management

Kaneo implements secure user authentication through **Better Auth**, providing a complete identity management system. The authentication flow includes user registration, sign-in, and OTP (One-Time Password) verification for enhanced security.

The authentication routes are defined in dedicated files within the routes directory:

- [`apps/web/src/routes/auth/sign-up.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/routes/auth/sign-up.tsx) handles new user registration
- [`apps/web/src/routes/auth/sign-in.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/routes/auth/sign-in.tsx) manages session creation  
- [`apps/web/src/routes/auth/verify-otp.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/routes/auth/verify-otp.tsx) processes two-factor verification codes

Session handling persists across the application, with authentication state managed through secure HTTP-only cookies and validated on each request to protected routes.

## Workspace & Project Architecture

The application supports **multi-tenancy through workspaces**, allowing users to organize work into separate containers with isolated data and team members. Each workspace can host multiple projects, creating a hierarchical structure that scales from personal task management to enterprise team coordination.

The **workspace switcher** component ([`apps/web/src/components/workspace-switcher.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/components/workspace-switcher.tsx)) provides a dropdown interface for navigating between workspaces instantly. Projects are accessed through nested routes defined in `apps/web/src/routes/_layout/_authenticated/dashboard/workspace/$workspaceId/project/$projectId/`, enabling deep linking to specific project contexts.

## Task Management & Visualization

Kaneo provides three distinct task visualization modes, each optimized for different workflow styles. These views share a common data layer but offer unique interaction patterns for managing work.

### Kanban Board View

The **Board view** implements a drag-and-drop Kanban interface where tasks move between status columns. Located at `apps/web/src/routes/_layout/_authenticated/dashboard/workspace/$workspaceId/project/$projectId/board.tsx`, this component fetches tasks using the `useGetTasks` hook and renders them as movable cards within columns.

```tsx
import { useGetTasks } from "@/hooks/queries/task/use-get-tasks";

export function Board({ projectId }: { projectId: string }) {
  const { data: tasks, isLoading } = useGetTasks(projectId);

  if (isLoading) return <Spinner />;
  return <BoardColumns tasks={tasks} />;
}

```

### List & Backlog View

The **Backlog/List view** (`apps/web/src/routes/_layout/_authenticated/dashboard/workspace/$workspaceId/project/$projectId/backlog.tsx`) presents tasks in a scannable table format with support for bulk actions and advanced filtering. This view is optimized for sprint planning and detailed task inspection.

### Gantt Timeline View

For project scheduling, the **Gantt view** (`apps/web/src/routes/_layout/_authenticated/dashboard/workspace/$workspaceId/project/$projectId/gantt.tsx`) renders tasks on a horizontal timeline based on start and end dates. This visualization helps teams identify dependencies, track milestones, and manage resource allocation across time periods.

## Task Details & Properties

Individual tasks in Kaneo support rich metadata and collaborative features. The task detail interface, composed in [`apps/web/src/components/task/task-details-content.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/components/task/task-details-content.tsx) and [`apps/web/src/components/task/task-properties-sidebar.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/components/task/task-properties-sidebar.tsx), includes:

- **Core properties**: Title, description, status, priority, start/end dates
- **Relationships**: Subtasks and task dependencies
- **Assignment**: User assignee selection with avatar display
- **Activity**: Comment threads and audit logs tracking changes

Status updates trigger mutations through the `useUpdateTask` hook, as implemented in [`apps/web/src/components/task/task-status-popover.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/components/task/task-status-popover.tsx):

```tsx
import { useUpdateTask } from "@/hooks/mutations/task/use-update-task";

export function TaskStatusPopover({ task }: { task: Task }) {
  const mutation = useUpdateTask();

  const changeStatus = (status: string) => {
    mutation.mutate({ id: task.id, status });
  };

  return (
    <Popover>
      {/* ...list of statuses */}
      <button onClick={() => changeStatus("completed")}>Completed</button>
    </Popover>
  );
}

```

## Team Collaboration & Permissions

Kaneo implements **role-based access control (RBAC)** with four distinct permission levels: Owner, Admin, Member, and Viewer. The team management interface supports inviting new members via email and generating secure invitation links.

The invitation flow is handled by [`apps/web/src/components/team/invite-team-member-modal.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/components/team/invite-team-member-modal.tsx):

```tsx
import InviteTeamMemberModal from "@/components/team/invite-team-member-modal";

export function TeamMembersPage() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Invite Member</Button>
      <InviteTeamMemberModal open={open} onClose={() => setOpen(false)} />
    </>
  );
}

```

Member management is visualized through [`apps/web/src/components/team/members-table.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/components/team/members-table.tsx), which displays current workspace participants alongside their assigned roles and last active timestamps.

## Search, Filtering & Discovery

The application provides comprehensive discovery tools for navigating large project datasets. **Global task search** (`apps/web/src/routes/_layout/_authenticated/dashboard/workspace/$workspaceId/search.tsx`) enables cross-project querying with instant results.

Filtering logic is centralized in [`apps/web/src/hooks/use-task-filters-with-labels-support.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/hooks/use-task-filters-with-labels-support.tsx), which combines label-based categorization with status and assignee filters. The sorting utility in [`apps/web/src/lib/sort-tasks.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/lib/sort-tasks.ts) handles ordering by priority, due date, or creation time across all three task views.

## Public Project Sharing

Kaneo supports **read-only public access** to specific projects through a dedicated public view route. External stakeholders can view task boards and details without requiring authentication or workspace membership.

This feature is implemented in `apps/web/src/routes/public-project.$projectId.tsx`, which renders a simplified interface showing the project's Kanban board and task modals while restricting editing capabilities and hiding sensitive team information.

## Real-Time Updates & AI Integration

The platform maintains data freshness through **WebSocket connections** (or Redis Pub/Sub in production environments) that push activity updates to connected clients. Authentication for these real-time channels is handled via [`apps/web/src/lib/permissions.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/lib/permissions.ts), ensuring users only receive updates for workspaces they can access.

Kaneo integrates with AI tools through an **MCP (Model Context Protocol) server** defined in [`packages/mcp/README.md`](https://github.com/usekaneo/kaneo/blob/main/packages/mcp/README.md). This integration allows AI clients to query project state, create tasks, and update statuses programmatically, enabling natural language project management workflows.

## Technical Implementation Stack

Kaneo's frontend architecture leverages modern React patterns and libraries:

- **React 19+** with concurrent features and server components support
- **TanStack Router** for type-safe, file-based routing
- **TanStack Query** for server state synchronization and caching
- **Tailwind CSS 4** for utility-first styling
- **Radix UI** primitives (`apps/web/src/components/ui/*`) for accessible components including dialogs, tooltips, and dropdown menus
- **Vite** for rapid development and optimized production builds

## Summary

- **Kaneo** is a self-hosted project management platform built with React 19, TypeScript, and TanStack technologies.
- The application supports **multi-workspace architectures** with role-based permissions (Owner, Admin, Member, Viewer).
- Task visualization includes **Kanban boards**, **list backlogs**, and **Gantt timelines**, all sharing a unified data layer.
- Real-time collaboration is enabled through **WebSocket/Redis Pub/Sub** connections with secure authentication.
- **AI integration** is available through the Model Context Protocol (MCP) server package.
- External stakeholders can access **read-only public project views** without authentication.
- The codebase follows a feature-based organization with file-based routing in `apps/web/src/routes/`.

## Frequently Asked Questions

### What technology stack powers the Kaneo web application?

Kaneo is built with **React 19+**, **Vite**, and **Tailwind CSS 4** on the frontend, utilizing **TanStack Router** for file-based routing and **TanStack Query** for data fetching. The UI components are constructed from **Radix UI** primitives located in `apps/web/src/components/ui/`, providing accessible tooltips, dialogs, and form controls. Authentication is handled by **Better Auth**, and real-time features use WebSocket or Redis Pub/Sub connections.

### How does Kaneo handle real-time collaboration?

Real-time updates are delivered through **WebSocket connections** authenticated via the permissions system defined in [`apps/web/src/lib/permissions.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/lib/permissions.ts). When team members create, update, or delete tasks, these changes are broadcast to other connected clients viewing the same workspace or project, ensuring all participants see synchronized data without manual page refreshes.

### Can external stakeholders view projects without creating an account?

Yes, Kaneo supports **public project views** through the route defined in `apps/web/src/routes/public-project.$projectId.tsx`. Workspace owners can generate public links that allow external visitors to view project boards and task details in a read-only mode, hiding internal team data and preventing unauthorized modifications.

### What AI integrations are available in Kaneo?

Kaneo provides **MCP (Model Context Protocol) server** support through the `packages/mcp/` directory, as documented in [`packages/mcp/README.md`](https://github.com/usekaneo/kaneo/blob/main/packages/mcp/README.md). This integration allows AI tools like Claude or other MCP-compatible clients to interact with project data programmatically, enabling automated task creation, status updates, and project queries through standardized protocol commands.