3dsvg tackles a problem that many frontend developers face: how to turn flat SVG graphics into interactive 3D scenes entirely in the browser, without relying on server-side rendering or heavyweight native tools. It achieves this by extruding SVG paths into 3D geometry using Three.js and React Three Fiber, wrapped in a reusable npm package. The project pairs this engine with a Next.js 16-based visual editor that renders the exact same components users embed in their apps, ensuring true WYSIWYG parity between editing and production.
architecture and core functionality of 3dsvg
At its core, 3dsvg is a TypeScript monorepo divided into two main parts: the engine and the web editor. The engine is an embeddable npm package responsible for parsing SVG paths — including those derived from text converted via opentype.js — and extruding them into 3D meshes. It leverages React Three Fiber as a declarative React renderer on top of Three.js, allowing developers to control 3D scenes through familiar React props.
The web editor is a Next.js 16 application that includes a WYSIWYG interface where users can manipulate inputs such as SVG files or text strings. The key point is that the editor renders the exact same SVG3D React component as the engine, which means that what you see while editing is what you get when you embed the component elsewhere.
Material and animation presets add polish and interactivity. The project offers 10 different physically based rendering (PBR) material presets and 7 animation presets, all applied declaratively through component props. These presets include procedural textures and animations that enhance the 3D extrusion visuals without requiring custom shader programming.
On the export front, 3dsvg supports client-side pipelines for generating PNG images up to 4K resolution, capturing 60fps video exports using FFmpeg compiled to WebAssembly, and exporting 3D models in common formats such as GLB, STL, OBJ, and PLY. This means users can generate assets entirely in-browser without server infrastructure.
Monorepo management is handled via npm workspaces, and the engine is bundled using tsup, a TypeScript-focused bundler optimized for library builds.
distinctive technical strengths and tradeoffs
What sets 3dsvg apart is its architectural choice to unify the editing and production rendering paths. Most 3D editors or SVG tools use separate preview renderers or export pipelines, which can introduce discrepancies between what the user sees and what ships. By reusing the exact same React component for the engine and editor, 3dsvg achieves true WYSIWYG parity, which simplifies the mental model for developers and users.
The use of React Three Fiber provides a declarative interface to Three.js, reducing boilerplate and improving DX. Instead of manually managing Three.js scene graphs, the component props drive the extrusion, materials, and animations. This fits well into modern React apps.
The integration of opentype.js to convert text inputs into vector paths client-side is a clever touch. It enables dynamic text extrusion from Google Fonts or other TTF data without needing server-side font processing. This fits the fully client-side pipeline ethos.
Client-side video export at 60fps via FFmpeg WASM is impressive but comes with tradeoffs. WASM-based FFmpeg runs slower than native, and capturing high-resolution frames in the browser can be resource-intensive. This approach avoids server dependencies but may not scale well for complex or long videos.
Material presets and procedural textures are a practical way to provide polished visuals while keeping the engine lightweight and accessible. However, users wanting custom shaders or advanced material control will find the preset approach limiting.
The codebase is well-structured as a monorepo with clear separation of concerns. Using tsup for bundling the engine ensures a minimal and optimized package. The code quality appears solid given the TypeScript typings and modular design.
quick start
npm install
npm run build:engine
npm run dev:web
Open http://localhost:3000.
verdict
3dsvg is a solid example of a fully client-side pipeline for extruding SVGs and text into interactive 3D scenes, suited for React developers who want tight integration of 3D rendering with UI frameworks. It’s especially relevant if you want a visual editor that guarantees WYSIWYG parity by sharing the same rendering components.
The client-side export features are a nice bonus, although heavy workloads (such as 4K video capture) may tax browser resources. The material and animation presets provide a good starting point but could limit advanced users who want full shader control.
Overall, 3dsvg is worth exploring if you build interactive 3D content for the web, want a robust React-based extrusion engine, and appreciate a modern monorepo setup with a Next.js editor. It’s a practical tool with clear tradeoffs and a clean architecture, not a black box or over-hyped framework.
→ GitHub Repo: renatoworks/3dsvg ⭐ 524 · TypeScript