A code-as-CAD engine for modular grid-beam designs. Powers gridbeam.xyz.
You write a parametric design in TypeScript; the engine renders it in 3D, validates parameters, and produces a bill of materials. The catalog of designs at gridbeam.xyz/designs is built entirely from this engine and the products in villagekit/gridkit-products.
Inspired by NopSCADlib.
Active development for gridbeam.xyz. Public API is stable enough to use; expect occasional breaking changes on minor versions until 1.0.
A walkthrough of the design process:
https://youtu.be/tMxWzfpn7Kg 📺
The video is from an earlier version, but the workflow is unchanged.
Use the engine via the website. Visit gridbeam.xyz/designs to browse the catalog and configure designs in the browser. No install needed.
Run the studio app locally. The studio is a desktop CAD-as-code editor for authoring new designs.
git clone https://github.com/villagekit/gridkit
cd gridkit
pnpm install
pnpm dev:app:studio
Use the libraries directly. The core packages are published to npm under the @villagekit/* scope:
pnpm add @villagekit/design @villagekit/sandbox @villagekit/parametersSee villagekit/gridkit-products for example designs, and DEV.md for the full development workflow.
| Package | Purpose |
|---|---|
@villagekit/design |
Convenience entry point bundling parts, plugins, and the kit product type for design authors |
@villagekit/parameters |
React UI for editing product parameters (presets, values, URL state) |
@villagekit/part |
Modular part type dispatcher |
@villagekit/product |
Modular product type dispatcher |
@villagekit/sandbox |
WebGL product renderer (Three.js + react-three-fiber) |
| Package | Purpose |
|---|---|
@villagekit/part-gridbeam |
Grid beam part — a 40 mm extruded modular beam |
@villagekit/part-gridpanel |
Grid panel part — a 40 mm-grid flat panel |
@villagekit/part-fastener |
Fastener parts (bolts, nuts, washers) |
| Package | Purpose |
|---|---|
@villagekit/product-kit |
Reference assembly product type |
| Package | Purpose |
|---|---|
@villagekit/plugin-smart-fasteners |
Auto-place fasteners between connected beams |
| Package | Purpose |
|---|---|
@villagekit/math |
Geometry helpers used by parts and the renderer |
@villagekit/units |
Unit conversions (mm ↔ grid holes ↔ inches) |
| Package | Purpose |
|---|---|
@villagekit/screenshot |
Headless CLI for rendering product screenshots from a workspace manifest |
The studio (apps/studio) is a Tauri-wrapped desktop CAD-as-code editor for authoring new designs against this engine. It bundles the engine packages, a CodeMirror TypeScript editor, and a react-three-fiber preview into a Mac/Windows/Linux app.
The studio stays a separate downloadable desktop app — it isn't embedded into gridbeam.xyz. Browser users configure existing designs through the website's parameter UI; design authoring happens locally in the studio. This keeps the website fast and lets the studio do file-system things a browser tab can't.
Build it from source via the Get started instructions, or — once releases ship — download the latest from the GitHub releases page.
See DEV.md for environment setup, package layout, and code conventions.
A separate, more ambitious engine effort lives at villagekit/villagekit. The two projects share lineage but evolve independently for now — this one powers gridbeam.xyz today.
Licensed under the European Union Public Licence v. 1.2 (summary).
Public packages (core/*, parts/*, products/*, kit-plugins/*, util/*, commands/*) are EUPL-1.2. The apps/* and dev/tsconfig packages are marked private and not separately licensed.