GitHub - 0-AI-UG/cate

7 min read Original article ↗

CATE - Figma like open canvas for development | Product Hunt

Cate

A spatial desktop IDE with an infinite canvas for code, terminals, browsers, and git.

Current source version: v1.0.0

Release MIT License CI Downloads


Cate demo

Cate is an Electron desktop app for arranging development tools in freeform space. Mix floating canvas panels with docked tabs and splits, detach panels into standalone windows, and keep multiple workspaces synced across sessions.

Getting Started

Open any folder to create a workspace — Cate restores your canvas layout, panel positions, and open terminals every time you come back. Right-click the canvas to add panels, press Cmd+K for the command palette, or drag panels onto the dock to create tabs and splits.

No configuration files, no project setup — just point Cate at a directory and start working.

Why Cate?

Alt-tab works fine — until you have 12 terminals, 6 files open, docs in another window, and notes scattered across desktops. At that point switching windows becomes the actual bottleneck.

Cate replaces that pile of windows with one persistent canvas per project. Terminals, editors, browsers, and notes sit where you put them, grouped how you think about them, and they're still there when you come back the next day.

Cate is not a window manager replacement. Tiling/scrolling WMs (Hyprland, Niri, GlazeWM, KDE) are great if you mainly want to arrange OS windows. Cate is a spatial canvas around a single project's tools — closer to Figma's infinite canvas than to a WM.

Features

🎨 Canvas & Layout

  • Infinite canvas — zoom, pan, and arrange panels anywhere in freeform space. Pan with two-finger drag or right-click drag; zoom with Cmd+scroll or the canvas controls.
  • Dock system — drag floating panels onto the dock to create tabs and splits. Each dock zone (center, left, right, bottom) can hold multiple tabs with type-colored icons.
  • Detached windows — pull panels or full dock layouts into separate OS windows.
  • Saved layouts — name, save, load, and delete canvas arrangements (nodes, regions, zoom, viewport) from an in-app modal (Cmd+K → "Saved Layouts…").
  • Multi-workspace sessions — keep several projects open and restore them on restart. Switch between workspaces from the sidebar.

💻 Code & Terminals

  • Monaco Editor panels — full VS Code-grade editing with syntax highlighting, multi-cursor, find/replace, and diff support. Scratch editors persist unsaved content across sessions.
  • Path breadcrumbs — thin strip above each editor showing the workspace-relative path (folder › folder › file.ts). Absolute path in the tooltip.
  • Native terminals — xterm.js with WebGL rendering, backed by node-pty PTYs rooted in the active workspace. Shell auto-detection with graceful fallback if the configured shell is unavailable.
  • Browser panels — embedded webview panels for previewing documentation, dev servers, or any URL. Context-isolated with hardened security settings.

🔧 Git & Source Control

  • Git-aware file explorer — file tree with live filesystem watching and git status indicators. Copy/paste files and folders with collision-safe renaming.
  • Source control sidebar — stage/unstage, branch management, worktrees, commit history, and inline diff views. Git monitor polls and surfaces changes automatically.
  • Project-wide search — full-text search across workspace files with instant results.

🤖 Agent & MCP

  • Agent setup — bootstrap Claude Code, OpenAI Codex, Gemini, Cursor, and OpenCode configs from the sidebar.
  • MCP server editor — add and edit .mcp.json entries with environment variables, parsed-args preview, and an inline Validate button that probes the server and shows its capabilities before writing anything to disk.

🔍 Search & Navigation

  • Canvas-wide search (Cmd+Shift+F) — Spotlight-style overlay that searches workspace files, live terminal scrollback, and open panel titles/paths in one place. Recent-focus ranked results with colored type-tile icons.
  • Panel switcher (Cmd+E) — masonry grid showing all open panels with live previews. Includes dock-zone panels (File Explorer, Git, Project List, Canvas host).
  • Command palette (Cmd+K) — quick access to every action in the app. Unified Spotlight-style chrome across all overlays.

🖥️ Desktop Polish

  • Auto-save & session restore — all panel state, positions, and open files persist automatically.
  • Optional macOS native window tabs — group Cate windows in the system tab bar.
  • Auto-update checks — checks GitHub releases and notifies when a new version is available.
  • Crash resilience — smart crash-report filtering (no noise from React teardown or resource-load failures), shell fallback banners in the PTY, and atomic crash-report archiving to prevent dialog loops.

Install

If you just want to use Cate, download a prebuilt release — don't build from source. This repository currently targets v1.0.0.

Platform Formats Link
macOS DMG, ZIP (arm64, x64) Latest release
Windows NSIS installer, ZIP (x64) Latest release
Linux AppImage, DEB, tar.gz (x64) Latest release

macOS note: release builds are notarized and configured for hardened runtime. Unsigned local or test builds may require:

xattr -cr /Applications/Cate.app

Linux note: on Steam Deck or other read-only-root distros, prefer the tar.gz portable build. If the AppImage fails to launch, try --no-sandbox as a fallback (e.g. ./Cate.AppImage --no-sandbox).

Build from Source

The steps below are for contributors — use the prebuilt release above for daily use.

Prerequisites

  • Node.js 20 or 22 LTS (see .nvmrc). Node 23+ is not supported; node-pty has no prebuilds and native compilation will fail.
  • npm >= 9
  • Python 3 and a C++ compiler (for node-pty native module)
    • macOS: Xcode Command Line Tools (xcode-select --install)
    • Debian/Ubuntu: sudo apt install build-essential python3
    • Fedora/RHEL: sudo dnf install @development-tools gcc-c++ make python3
    • Arch: sudo pacman -S base-devel python
    • Windows: Visual Studio Build Tools (select the "Desktop development with C++" workload)

Setup

git clone https://github.com/0-AI-UG/cate.git
cd cate
npm install

Development

This starts the Electron app with hot reload via electron-vite.

Quality Checks

npm run typecheck
npm test            # unit tests (vitest)
npm run test:e2e    # Playwright integration tests

For the Electron smoke test harness:

npm run test:smoke:electron

Production Build

Package for Distribution

npm run package
# or target one platform:
npm run package:mac
npm run package:win
npm run package:linux

Packaged binaries will be in the release/ directory.

Security & Packaging

Cate uses a context-isolated preload bridge for all IPC communication. Filesystem access is scoped to registered workspace roots, browser panels use hardened webview settings with disabled node integration, and the updater falls back to opening the GitHub release page when a verified installer path is unavailable. Workspace-scoped allowedRoots validation prevents terminals from spawning outside approved directories.

Architecture

src/
├── main/               # Electron main process
│   ├── ipc/            # IPC handlers (filesystem, git, terminal, workspace)
│   ├── shellResolver   # Shell path resolution with fallback chain
│   ├── workspaceManager# Workspace lifecycle and session persistence
│   ├── workspaceRoots  # Allowed-roots registration and validation
│   ├── windowRegistry  # Window management (main, dock, detached)
│   ├── webSecurity     # Webview hardening and CSP
│   ├── auto-updater    # Update checks and release fetch
│   ├── crashReporter   # Crash report capture and filtering
│   ├── sentry          # Sentry integration
│   ├── store           # electron-store persistence
│   ├── menu            # Application menu
│   └── sessionTrust    # Session restore validation
├── preload/            # Context-isolated bridge exposed to the renderer
├── renderer/           # React 18 application
│   ├── canvas/         # Infinite canvas rendering, drag, resize, placement
│   ├── docking/        # Tabs, splits, detached dock windows, drag/drop
│   ├── panels/         # EditorPanel, TerminalPanel, BrowserPanel,
│   │                   # FileExplorerPanel, GitPanel, ProjectListPanel,
│   │                   # CanvasPanel
│   ├── sidebar/        # WorkspaceTab, FileExplorer, SourceControlView,
│   │                   # ProjectList, fileClipboard
│   ├── dialogs/        # SavedLayoutsDialog, MCP editor dialog
│   ├── ui/             # CommandPalette, GlobalSearch, PanelSwitcher,
│   │                   # NodeSwitcher, WelcomePage, ShortcutHintOverlay
│   ├── shells/         # Main, panel, and dock window shells
│   ├── stores/         # Zustand stores (canvas, app, settings, shortcut,
│   │                   # status, ui)
│   ├── hooks/          # Custom React hooks (useShortcuts, useNodeDrag, etc.)
│   ├── drag/           # Drag-and-drop logic and state
│   └── lib/            # Utilities (coordinates, git, filesystem helpers)
└── shared/             # IPC channel definitions and shared TypeScript types

Tech Stack

  • Electron 41 — desktop shell (Chromium + Node.js)
  • React 18 — UI framework with functional components and hooks
  • Zustand 5 — lightweight state management (no Redux/Context)
  • Monaco Editor 0.52 — code editing (VS Code's editor component)
  • xterm.js 5.5 + node-pty 1.0 — terminal emulator with WebGL renderer
  • simple-git 3.27 — git operations
  • chokidar 4.0 — filesystem watching
  • Tailwind CSS 3.4 — styling
  • electron-vite 5.0 — bundling with HMR
  • electron-builder 26 — packaging and distribution
  • electron-updater 6.8 — update checks
  • Sentry — crash reporting and diagnostics
  • Playwright — end-to-end integration tests
  • Vitest — unit test runner

Roadmap

Cate is under active development. For a detailed history of what changed in each release and a sense of where things are headed, see the CHANGELOG.

Star History

Star History Chart

Contributing

See CONTRIBUTING.md for guidelines.

License

MIT