Create a minimal web application using the OpenSCAD WASM build

[t-paul]

Outline

OpenSCAD has a WASM build for quite some time and it's used in some nice websites like https://ochafik.com/openscad2/ . The scope of the project is to create a minimal, easy to use package that can be integrated into the https://openscad.org/ website.

Details

Goals:

• Easy to add to existing web pages
• Allow picking up SCAD scripts from URL or text area
• Generate and show the model in a 3D view (e.g. via Three.js)
• Optional: download the generated model

Non-Goals:

• Customizer
• Full-featured editor
• Upload of files and or libraries

Expected Outcome

One example covering the project goals would a sequence of pages presenting the different scripts from chapter 2 of the OpenSCAD Tutorial.

Project Properties

Skills

• Programming in TypeScript
• Understanding how to use WASM binaries
• Package modules for use in plain HTML pages

Difficulty

Medium

Size

Long (350h)

Additional Information

Potential mentor(s): Marius Kintel (IRC: kintel), Torsten Paul (IRC: teepee), Ryan Colyer (IRC: InPhase)
Organization website: https://www.openscad.org/

[NobleCoder69]

I’m very interested in this project. It aligns well with my experience in TypeScript and modern web technologies. I’m particularly excited about working with the OpenSCAD WASM build and integrating it into web pages with a Three.js 3D viewer. This project offers a great combination of WASM, frontend engineering, and developer-friendly packaging, which matches my interests. I’d love to explore how I can contribute.

[banerjeesayantan]

Before finalizing my proposal, I would appreciate clarification on a few architectural points:

• Should this be delivered primarily as an installable package (npm/CDN) embeddable in any site, or as a feature directly integrated into the OpenSCAD website?

• Is the intended UX closer to a minimal “editor + live preview” interface, or a URL-based script loader with a rendered output panel?

• Should WASM initialization be fully abstracted for plug-and-play usage, or should lower-level configuration hooks be exposed for advanced integrations?

• Is the goal to build a minimal embeddable playground component, or to lay the foundation for a broader browser-based OpenSCAD experience?

[t-paul]

Should this be delivered primarily as an installable package (npm/CDN) embeddable in any site, or as a feature directly integrated into the OpenSCAD website?

The story comes from the idea to use it for things like the yearly advent calendars or similar cases. So the minimum target could be integration into the OpenSCAD website. However preferred is something anyone can easily use for this scenario in their own web pages. Anything more should probably be optional or topic for a later project, simply due to the fixed timeline.

Is the intended UX closer to a minimal “editor + live preview” interface, or a URL-based script loader with a rendered output panel?

For the use case mentioned above something like this might work:

• Script given as URL
• One box (div/frame/whatever) showing the 3d view, switchable (overlay or tab style) to basic text field to modify
• No script save, no customizer, no extra features
• Download the 3d file (STL, not sure if 3MF works)

But it's very much open for further discussion, one of the main topics of project proposal is to shape the ideas listed here into an actual project plan and timeline.

Should WASM initialization be fully abstracted for plug-and-play usage, or should lower-level configuration hooks be exposed for advanced integrations?

Plug and play would be the first goal. Further advanced topics are something for later projects.

Is the goal to build a minimal embeddable playground component, or to lay the foundation for a broader browser-based OpenSCAD experience?

Minimal component, maybe not called playground, because https://ochafik.com/openscad2/ exists under that name as Github repo: OpenSCAD playground 😀.

[banerjeesayantan]

Thank you @t-paul for the detailed clarification, it really helped shape my thinking.

I apologize for the late follow-up — I was occupied with my university exams. But I used that time to build a working proof-of-concept before writing the full proposal.

🔗 Live Demo: https://browser-open-scad-ide.vercel.app
⭐ GitHub: https://github.com/banerjeesayantan/Browser-OpenSCAD-IDE

It currently uses a custom JavaScript parser + Three.js renderer (not WASM yet), but already covers the core UX goals you described:

• URL-based script loading → fetches and renders instantly
• Live 3D preview via Three.js
• Editable text area to modify the script
• STL download

My proposed GSoC plan:

• Phase 1 — Replace the custom parser with the real OpenSCAD WASM build for 100% language accuracy
• Phase 2 — Package as a minimal embeddable TypeScript npm/CDN component (plug and play, as you described)
• Phase 3 — Integration example for the OpenSCAD website

The full project will be built in TypeScript as specified.

Would love your feedback on this direction before I finalize the proposal. Thank you for your time and for the amazing work on OpenSCAD. 🙏

— Sayantan Banerjee

[rupeshca007]

Hi @t-paul! I'm interested in working on this project for GSoC 2026. I have looked at the issue and I'm excited about building the minimal OpenSCAD WASM web application using TypeScript. Could you please guide me on how to get started and what preparation would help me write a strong proposal? Thank you!

[rupeshca007]

Hi @t-paul, I've updated my minimal WASM web app demo in PR #151 (openscad/openscad-playground#151) based on the architectural points you clarified above!

Specifically, I've implemented the exact UX target you described for use cases like advent calendars and website embeds:

• URL-based script loading: The app accepts a ?script=URL parameter to automatically fetch and load a remote .scad file.
• • Minimal "one box" UI: Users can toggle between the 3D viewer and script editor within the same container.
• • • STL Download: Added a button to download the rendered 3D file.
• • • • Embedded Snippet: Added an easy copy-paste <iframe src="...?script=URL"> embed code generator.
        The architecture and UX wrapper are fully in place. Replacing the placeholder renderer with the real OpenSCAD WASM engine (as phase 1 of the GSoC project) will seamlessly connect this frontend to actual compilation.

I will be drafting my full GSoC proposal soon and would love any feedback on this frontend approach!

[rupeshca007]

Hi @t-paul, just a quick update: I went ahead and replaced the mock parser in my PR with the real OpenSCAD WASM nightly build. The demo now uses a background Web Worker and Emscripten's virtual filesystem to run instance.callMain() directly in the browser! Feel free to test it out via the PR.