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

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 handles new user registration
• apps/web/src/routes/auth/sign-in.tsx manages session creation
• 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) 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.

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 and 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:

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:

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, 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, which combines label-based categorization with status and assignee filters. The sorting utility in 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, 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. 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. 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. 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.

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