Technology Stack
Farkitect is built with a modern, open-source stack chosen for a balance of developer productivity, real-time collaboration, and long-term flexibility. We are immensely grateful that these technologies exist — Farkitect simply would not be possible without the work of the teams and communities behind them. This page describes the key technologies and the thinking behind each choice.
The Short Version
Section titled “The Short Version”Farkitect is a TypeScript application built with React, backed by Convex for real-time data sync, and packaged as both a web app and an Electron desktop app. The UI is composed of dockable panels (like VS Code), a tree-based model explorer, and a canvas-based diagram editor. Everything is organized as a monorepo with shared packages.
Application Platform
Section titled “Application Platform”TypeScript
Section titled “TypeScript”The entire codebase — frontend, backend, build scripts, and tests — is written in TypeScript. Type safety catches a huge class of bugs at compile time, and it means the same language and mental model is used everywhere. No context-switching between languages.
React is the UI framework. Its component model maps naturally to the kind of application Farkitect is — panels, trees, forms, and diagram nodes are all components that compose together. The ecosystem of high-quality libraries (React Flow, React Arborist, Dockview) made it the obvious choice.
Vite is the build tool. It’s fast — hot module replacement during development is near-instant — and it works well with both the web app and the Electron desktop app. It replaced heavier alternatives like Webpack without any compromises.
Electron (Desktop App)
Section titled “Electron (Desktop App)”The desktop version of Farkitect is an Electron app, which gives access to native capabilities: file system access, native menus, window management, and offline support. The renderer code never imports Electron directly — platform-specific features are abstracted so the same UI code runs in both the desktop app and the web browser.
The desktop app is coming soon. In the meantime, the web app provides the full experience.
Backend and Data
Section titled “Backend and Data”Convex
Section titled “Convex”Convex is Farkitect’s backend — it provides the database, server functions, and real-time synchronization. When one team member creates an element, everyone else sees it instantly. There’s no REST API to design, no WebSocket plumbing to manage, and no cache invalidation to get wrong.
Convex is also fully type-safe end-to-end. The database schema, server functions, and client queries all share TypeScript types, so if the schema changes, the compiler catches every place that needs to update.
WorkOS (Authentication)
Section titled “WorkOS (Authentication)”Farkitect uses WorkOS for authentication. WorkOS is built for business-to-business applications and supports enterprise SSO, SAML, and directory sync out of the box. This means organizations can connect their existing identity providers (Okta, Azure AD, Google Workspace) without any custom integration work.
Resend (Email)
Section titled “Resend (Email)”Invitation emails and notifications are sent through Resend, integrated via Convex’s component system. It’s simple, reliable, and purpose-built for transactional email.
User Interface
Section titled “User Interface”Dockview (Panel Layout)
Section titled “Dockview (Panel Layout)”Farkitect’s interface follows the VS Code pattern of dockable, draggable panels. Dockview provides this layout system — panels can be tabbed together, split, resized, maximized, and popped out into separate windows. It’s a React-native library with zero external dependencies.
React Arborist (Model Explorer)
Section titled “React Arborist (Model Explorer)”The Explorer panel — the tree view on the left where you browse packages, elements, and diagrams — is built with React Arborist. It handles virtualization (rendering only the visible rows, even with thousands of nodes), drag-and-drop reordering, inline renaming, and keyboard navigation. It’s headless, so Farkitect controls all the rendering.
React Flow (Diagram Canvas)
Section titled “React Flow (Diagram Canvas)”The diagram canvas — where you draw and arrange elements — is built with React Flow. Each node on a diagram is a React component, which means Farkitect can render notation-specific shapes, icons, colors, compartments, and stereotypes as regular React elements. React Flow handles the interaction layer: dragging, zooming, panning, selection, and connection handles.
TanStack Table (Catalogs)
Section titled “TanStack Table (Catalogs)”Catalogs — the tabular views of model elements — are built with TanStack Table. It’s a headless table library that provides sorting, filtering, column reordering, and column visibility without dictating how things look. This makes it straightforward to render metamodel-driven columns with the right editors for each property type.
shadcn/ui and Tailwind CSS
Section titled “shadcn/ui and Tailwind CSS”The component library is shadcn/ui — a collection of accessible, well-designed components built on Radix UI primitives. Unlike most component libraries, shadcn/ui components live in the codebase as source files rather than hidden inside a package. This makes them fully customizable.
Styling is done with Tailwind CSS, a utility-first approach where styles are co-located with components. It keeps the styling consistent and makes it easy to support both light and dark themes.
State Management
Section titled “State Management”Zustand (UI State)
Section titled “Zustand (UI State)”Local UI state — things like the current selection, active tool, undo stack, and panel preferences — is managed with Zustand. It’s a lightweight state library that avoids the boilerplate of larger solutions like Redux while providing the same capabilities.
React Hook Form and Zod (Forms)
Section titled “React Hook Form and Zod (Forms)”The Properties panel and other forms use React Hook Form for input handling and Zod for validation. Zod schemas are generated from metamodel property definitions, so validation rules (required fields, type constraints, value ranges) come from the M2 metamodel automatically.
Architecture
Section titled “Architecture”Monorepo
Section titled “Monorepo”Farkitect is organized as a monorepo using TurboRepo and pnpm workspaces. Shared code lives in packages that both the desktop and web apps import:
| Package | What it contains |
|---|---|
| backend | Convex schema, server functions, data access hooks |
| frontend | Panels, components, stores, contexts — the shared UI |
| ui | Design system components (shadcn/ui) |
This means a bug fix or feature in the shared frontend package is immediately available in both the desktop and web apps, without publishing or versioning.
Platform Abstraction
Section titled “Platform Abstraction”The shared UI code never touches platform-specific APIs directly. Instead, capabilities like file dialogs, native menus, and window management are abstracted behind a thin interface. The desktop app provides Electron implementations; the web app provides browser implementations. This keeps the vast majority of the code platform-agnostic.
AI-Assisted Development
Section titled “AI-Assisted Development”Farkitect is developed in close collaboration with AI (specifically Claude Code). Many of the technology choices were influenced by how well they work in this workflow:
- TypeScript generates more accurate AI-written code than untyped JavaScript
- shadcn/ui components live in the codebase, so the AI can read and modify them directly
- Tailwind CSS co-locates styles with markup, giving the AI full context in a single file
- Convex provides end-to-end type safety, reducing the surface area for AI-introduced bugs
- Consistent conventions across the codebase mean the AI can replicate established patterns reliably
This isn’t about replacing developers — it’s about having an extremely productive collaboration between human judgment and AI execution.