Pascal Editor is a 3D building editor built with React Three Fiber and WebGPU, enabling users to create and share architectural projects through a web-based interface. The application is written in TypeScript and organized as a Turborepo monorepo containing four main runtime packages that separate concerns across different layers of functionality.
The core architecture divides responsibility among distinct packages. The @pascal-app/core package manages node schemas, scene state via Zustand, registry contracts, spatial queries, and an event bus. The @pascal-app/viewer package handles 3D rendering through React Three Fiber, shared render systems, default camera controls, and post-processing effects. The @pascal-app/editor package provides editing tools, panels, selection management, and direct-manipulation UI. The @pascal-app/nodes package serves as a built-in registry plugin containing node definitions, renderers, geometry generation, and systems. Finally, apps/editor is a standalone Next.js host that brings together all the editor packages into a cohesive application.
The editor represents scenes as nodes, which are the fundamental data primitives describing the 3D environment. Rather than using a nested tree structure, nodes are stored in a flat dictionary with parent-child relationships defined through parentId and children arrays. The scene state is managed by a Zustand store that persists to IndexedDB and includes undo/redo functionality via Zundo with a 50-step history. A scene registry maps node IDs to their Three.js objects for fast lookup, allowing systems to access 3D objects directly without traversing the scene graph.
Geometry generation is handled by specialized systems that process dirty nodes marked by the store. Core systems include WallSystem for generating wall geometry with mitering and CSG cutouts, SlabSystem for floor geometry from polygons, CeilingSystem for ceiling geometry, RoofSystem for roof geometry, and ItemSystem for positioning items on surfaces. Additional viewer systems manage level visibility in different display modes, 3D scan visibility, and guide image visibility. A spatial grid manager handles collision detection and placement validation for item positioning.
The editor extends the viewer with interactive tools activated through a toolbar, including SelectTool for selection and manipulation, WallTool for drawing walls, ZoneTool for creating zones, ItemTool for placing furniture and fixtures, and SlabTool for creating floor slabs. A custom selection manager provides hierarchical navigation with depth-level-specific strategies for hover and click behavior.
The technology stack includes React 19, Next.js 16, Three.js with WebGPU renderer, React Three Fiber with Drei, Zustand for state management, Zod for schema validation, Zundo for undo/redo, three-bvh-csg for Boolean geometry operations, Turborepo for monorepo management, and Bun as the package manager. The editor is extensible through a plugin system where developers can ship node kinds with schema definitions, 3D and 2D rendering, placement tools, and inspector parametrics using the same Plugin manifest structure as the built-in nodes, with no separate internal API required.
The repository is maintained by three contributors: Aymeric Rabot, Wassim Samad, and Sudhir. Development requires running the development server from the root directory to enable hot reload across all packages, and the project provides comprehensive documentation for building plugins, with a worked example available in the pascalorg/plugin-trees repository.
