Pascal Editor Brings Precision 3D Building Design to the Browser 🔗
Sophisticated 2D floorplanning and WebGPU rendering combine in a React-based architecture that redefines web-native architectural modeling
Pascal Editor is a full-featured 3D building editor that lets developers and designers create, edit, and visualize complex structures directly in the browser. Built with React Three Fiber and WebGPU, it delivers responsive performance previously only available in desktop applications while maintaining the accessibility and extensibility of the modern web stack.
The project follows a thoughtfully engineered Turborepo monorepo structure that cleanly separates concerns across three packages.
Pascal Editor is a full-featured 3D building editor that lets developers and designers create, edit, and visualize complex structures directly in the browser. Built with React Three Fiber and WebGPU, it delivers responsive performance previously only available in desktop applications while maintaining the accessibility and extensibility of the modern web stack.
The project follows a thoughtfully engineered Turborepo monorepo structure that cleanly separates concerns across three packages. The @pascal-app/core package handles node schemas, scene state management with Zustand, geometry generation systems, spatial queries, and an event bus. The @pascal-app/viewer package focuses exclusively on 3D rendering, providing sensible defaults for camera controls and post-processing effects. The editor application then layers interactive tools, selection management, and domain-specific behaviors on top of the viewer.
This separation allows the viewer to function independently while the editor extends it with specialized functionality. State management follows the same modular philosophy. Three distinct Zustand stores manage different aspects of the application: useScene in the core package tracks nodes, maintains root IDs, handles CRUD operations, and persists data to IndexedDB with undo/redo capabilities through Zundo. The useViewer store manages selection and display modes, while useEditor controls active tools and UI preferences. The clean access patterns work equally well inside React components and outside in systems or callbacks.
The recently released v0.3.0 significantly expands the tool's capabilities. The standout addition is a comprehensive 2D Floorplan panel that transforms how users draft building layouts. Architects can draw walls with 0.5m grid snapping, place doors and windows directly onto walls, and edit zone and slab polygons using intuitive vertex and midpoint handles. The panel supports panning, zooming, marquee selection, and multi-select, while wall endpoint dragging automatically recalculates junction miters. Users can even overlay reference images as tracing guides.
Complementing the floorplan view are new wall measurement labels that appear as 3D overlays in the viewport. These labels dynamically follow the camera, respect metric or imperial unit preferences, and accurately account for miter geometry at wall junctions. The release also includes a completely rewritten command palette built on a registry-based architecture, enabling extensible commands grouped by category with visual keyboard shortcut tokens.
What makes Pascal Editor technically compelling is its pragmatic approach to complex problems. The introduction of getWallPlanFootprint() in the core package generates miter-aware 2D polygons used consistently across both the floorplan and measurement systems. A new selection manager improves multi-select behavior, while camera focus commands intelligently center the view on any node's bounding box. The project even includes an error boundary that gracefully handles broken item models.
For developers building the next generation of design tools, Pascal Editor demonstrates how modern web technologies can tackle domains traditionally dominated by native desktop software. Its architecture serves as both a practical tool and an educational example of scalable React Three Fiber applications.
The editor's node-based scene representation provides a flexible foundation for everything from simple structures to multi-level buildings with complex spatial relationships. By embracing web standards while maintaining architectural precision, Pascal Editor points toward a future where sophisticated 3D design tools are as accessible as web browsers themselves.
- Architects drafting precise building layouts in real-time 3D
- Developers prototyping interactive architectural visualization tools
- Educators teaching spatial design through web-based 3D modeling
- Spline - Delivers beautiful web 3D design but lacks Pascal's building-specific tools and floorplan precision
- Vectary - Browser-based 3D modeling platform with stronger focus on product design than architectural workflows
- Blender - Industry-standard desktop 3D suite that offers more features but no native web accessibility or React integration