--- title: Building a 3D Editor with React Three Fiber, WebGPU description: Pascal Editor is an open-source 3D building editor built with React Three Fiber and WebGPU, structured as a Turborepo monorepo. It features a modular package... canonical: https://daily.dev/posts/building-a-3d-editor-with-react-three-fiber-webgpu-xdnwr1qvp twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Building a 3D Editor with React Three Fiber, WebGPU | daily.dev og:description: Pascal Editor is an open-source 3D building editor built with React Three Fiber and WebGPU, structured as a Turborepo monorepo. It features a modular package... og:url: https://daily.dev/posts/building-a-3d-editor-with-react-three-fiber-webgpu-xdnwr1qvp og:image: https://api.daily.dev/og/posts/xdNwr1QVp.png og:image:alt: Building a 3D Editor with React Three Fiber, WebGPU og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Building a 3D Editor with React Three Fiber, WebGPU **[Dev Tools](https://daily.dev/sources/devtools)** · [@cristianolivera1](https://daily.dev/cristianolivera1) · 1 min read · 16 upvotes · 3 comments ## Summary Pascal Editor is an open-source 3D building editor built with React Three Fiber and WebGPU, structured as a Turborepo monorepo. It features a modular package architecture (core, viewer, editor, nodes) allowing selective installation, Zustand-based state management with undo-redo via IndexedDB and Zundo, and Next.js integration for plug-and-play use in modern web apps. ## Content **Introducing Pascal Editor** 🏢 A high-performance, modular 3D building editor built on top of **React Three Fiber** and **WebGPU**. Designed with a strict separation of concerns, the project is structured as a **Turborepo monorepo** to keep rendering, editing tools, and core logic completely decoupled. **Why you should check it out:** - **WebGPU Ready:** Built for next-gen web graphics performance. - **Highly Modular Architecture:** Uses independent packages (`@pascal-app/core`, `/viewer`, `/editor`, `/nodes`) so you can install only what you need (e.g., just the lightweight viewer runtime). - **State Management with Zustand:** Fine-grained reactive state handling split by responsibility (`useScene` with IndexedDB/Zundo for undo-redo, `useViewer` for selection/camera, and `useEditor` for tools UI). - **Next.js Integrated:** Features a plug-and-play architecture ready for modern web apps. - Getting started is as simple as installing the built-in viewer set and loading the plugin before mounting the `` component. Check out the repository structure and full package breakdown in the post! Repo: [https://github.com/pascalorg/editor](https://github.com/pascalorg/editor) ## Community discussion Top comments from developers on daily.dev. **@raulsanchez** · 1 upvotes > Incredible, thanks ## Similar posts on daily.dev - [From Flat to Spatial: Creating a 3D Product Grid with React Three Fiber](https://daily.dev/posts/from-flat-to-spatial-creating-a-3d-product-grid-with-react-three-fiber-sstsygdip) · Codrops · 1 upvotes · 0 comments - [Building The Monolith: Composable Rendering Systems for a 13-Scene WebGL Epic](https://daily.dev/posts/building-the-monolith-composable-rendering-systems-for-a-13-scene-webgl-epic-ujhlkwkk9) · Codrops · 0 upvotes · 0 comments --- Tags: [#general-programming](https://daily.dev/tags/general-programming), [#3d](https://daily.dev/tags/3d), [#webgpu](https://daily.dev/tags/webgpu), [#zustand](https://daily.dev/tags/zustand), [#react-three-fiber](https://daily.dev/tags/react-three-fiber) [View this post on daily.dev](https://daily.dev/posts/building-a-3d-editor-with-react-three-fiber-webgpu-xdnwr1qvp) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/building-a-3d-editor-with-react-three-fiber-webgpu-xdnwr1qvp","headline":"Building a 3D Editor with React Three Fiber, WebGPU","text":"Pascal Editor is an open-source 3D building editor built with React Three Fiber and WebGPU, structured as a Turborepo monorepo. It features a modular package architecture (core, viewer, editor, nodes) allowing selective installation, Zustand-based state management with undo-redo via IndexedDB and Zundo, and Next.js integration for plug-and-play use in modern web apps.","url":"https://daily.dev/posts/building-a-3d-editor-with-react-three-fiber-webgpu-xdnwr1qvp","datePublished":"2026-08-02T06:54:32.229Z","dateModified":"2026-08-03T08:17:46.172Z","author":{"@type":"Person","name":"Cristian Olivera Chávez","url":"https://daily.dev/cristianolivera1","image":"https://lh3.googleusercontent.com/a/ACg8ocICzd1bW91kCFqI0PuT1IRi9n8e6m7C2_QMCxE2xLrx7d2Q5tY=s96-c","description":"Angular | NextJs | Tailwind | Laravel | Spring Boot","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":4430}},"image":"https://media.daily.dev/image/upload/s---4xS_aTJ--/f_auto/v1785462246/posts/5qYDwBdib?_a=BAMAMicg0","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":16},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":3}],"comment":[{"@type":"Comment","text":"Incredible, thanks","datePublished":"2026-08-03T20:26:14.762Z","url":"https://daily.dev/posts/xdNwr1QVp#c-50LyZPvqJ","author":{"@type":"Person","name":"Raul Sanchez","url":"https://daily.dev/raulsanchez","image":"https://lh3.googleusercontent.com/a/ACg8ocIjMOgkJVvocwzYK59K9SekhXBXAWK_RB9z-hIr2yCOyzBjaQ=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/squads/devtools","name":"Dev Tools"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Dev Tools","item":"https://daily.dev/squads/devtools"},{"@type":"ListItem","position":3,"name":"Building a 3D Editor with React Three Fiber, WebGPU"}]} ```