pascalorg/editor

★ 15,412TypeScriptAudience · designerComplexity · 3/5LicenseSetup · moderate

Mindmap

mindmap
  root((pascal-editor))
    What it does
      3D building design
      Browser based
      Local project save
      Shareable projects
    Node types
      Walls and Slabs
      Roofs and Ceilings
      Doors and Windows
      Lights and Zones
    Tech stack
      React Three Fiber
      WebGPU rendering
      Zustand state
      IndexedDB storage
    Architecture
      Turborepo monorepo
      Core package
      Viewer package
      Next.js editor app
    Audience
      Designers
      Architects
      Developers

mindmap root((pascal-editor)) What it does 3D building design Browser based Local project save Shareable projects Node types Walls and Slabs Roofs and Ceilings Doors and Windows Lights and Zones Tech stack React Three Fiber WebGPU rendering Zustand state IndexedDB storage Architecture Turborepo monorepo Core package Viewer package Next.js editor app Audience Designers Architects Developers

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Sketch a building floor plan and 3D model entirely in the browser without installing desktop CAD software.

USE CASE 2

Share an architectural project layout with collaborators via a browser link with no account required.

USE CASE 3

Extend the editor with custom node types or tools by building on the MIT-licensed core and viewer packages.

Tech stack

TypeScriptNext.jsReactThree.jsReact Three FiberWebGPUTurborepoZustand

Getting it running

Difficulty · moderate Time to first run · 30min

Requires a modern Chromium-based browser with WebGPU support, older browsers and Firefox are not supported.

Use freely for any purpose including commercial projects, keep the copyright notice.

In plain English

Pascal Editor is a browser-based 3D tool for designing and sharing architectural projects, think laying out a building with walls, floors, ceilings, roofs, doors, windows, and lights, all in 3D. The repository contains the source code for the editor itself, the description says it lets you "create and share 3D architectural projects." Technically the project is a Turborepo monorepo (a single repository that holds several related packages) made up of three parts: a core package that defines the data shape of a building and manages its state, a viewer package that does the actual 3D rendering, and an editor app built with Next.js that adds the user interface and editing tools. Rendering is done with React Three Fiber, a React-based wrapper around the Three.js 3D library, running on WebGPU, the modern browser graphics API. The scene is described as a flat dictionary of "nodes", Site, Building, Level, Wall, Slab, Ceiling, Roof, Zone, Item, Scan, Guide, linked by parent IDs rather than nested. State is held in Zustand stores (a small React state library), saved into the browser's IndexedDB so projects persist locally, and history is tracked with undo and redo. "Systems" run every frame and only rebuild geometry for nodes that have changed, which keeps editing responsive. You would use Pascal Editor if you want a free, browser-based way to sketch a building in 3D and share it, without installing heavy desktop CAD software. The code is MIT licensed and published as npm packages under the @pascal-app scope. The full README is longer than what was provided.

Copy-paste prompts

Prompt 1

I want to add a custom node type to Pascal Editor. Show me how the core package defines the node schema and how to add a new Furniture node with position and size properties.

Prompt 2

Using Pascal Editor's React Three Fiber renderer, show me how to apply a custom material or texture to Wall nodes in the viewer package.

Prompt 3

Set up a local development environment for the Pascal Editor Turborepo monorepo and run the Next.js editor app in dev mode.

Prompt 4

Explain how Pascal Editor's flat node dictionary with parent IDs works instead of a nested tree, and why that design makes geometry updates faster.

Open on GitHub → Explain another repo

← pascalorg on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.