Fluid-CAD/FluidCAD

Parametric CAD in JavaScript. Model with the mouse or write code. Both edit the same file.

Explore · Download · Documentation · Tutorials

Pull requests are not being accepted yet while the design and roadmap take shape. Community contributions are planned for v0.1.0.

FluidCAD is under active development; APIs and features may change.

FluidCAD is an open-source CAD app for designing parts and moving assemblies. Sketch, constrain, and shape your model in a live 3D workspace, with ordinary JavaScript behind every feature. Change a dimension, reuse a part, or automate a pattern. The model rebuilds with you.

Draw a profile and extrude it, revolve it around an axis, or sweep it along a path. Refine the result with cuts, fillets, chamfers, shells, and booleans; repeat features in linear, circular, or mirror patterns.

Use the toolbar to create features and FluidCAD writes the code. Double-click a feature in the timeline to edit it, or step back through the history to see how the model was built.

Dimensions and constraints capture your design intent: keep holes concentric, sides parallel, or an arc tangent to a line. The solver maintains those relationships as you drag, while snapping adds constraints as you draw.

A model is a JavaScript file you can inspect, edit, and version with Git. Here is a complete mounting plate: sketch an outline, add thickness, then cut two holes.

import { part, param, sketch, extrude, circle, cut } from 'fluidcad/core';
import { rect } from 'fluidcad/shapes';

export const plate = part('Mounting plate', () => {
  const thickness = param('Thickness', 6);
  const holeDiameter = param('Hole diameter', 5);

  // Sketch the outline, then give it thickness.
  sketch('xy', () => {
    rect([0, 0], 80, 40).centered();
  });
  const body = extrude(thickness);

  // Sketch on the top face and cut through the plate.
  sketch(body.endFaces(), () => {
    circle([-25, 0], holeDiameter);
    circle([25, 0], holeDiameter);
  });
  cut(thickness);
});

Save this as plate.part.js. Adjust Thickness or Hole diameter in the Parameters panel to resize the part; body.endFaces() keeps the holes on its top face. Dimensions use your project’s units (millimeters by default). Assemblies can override these parameters per instance.

Insert parts into an .assembly.js file and connect them with mates. Build a hinge with a revolute joint, a carriage with a slider, or a mechanism with several linked parts. Drag it to explore its motion, set joint limits, or animate it from the Joints panel.

Reuse sub-assemblies and replicate them across a design, like the piston assemblies in this engine. Explore assemblies →

Build a lantern, a tray, or a mechanical part by following a complete tutorial. Each takes you from the first sketch to the finished model.

Lantern

Ice cube tray

CSWP sample exam

Bring in existing STEP models with their colors, export STEP to other CAD tools, or export STL for 3D printing. Assembly STEP exports preserve the part tree, and PNG export gives you an image to share.

Download the latest release, install it, and open a project folder.

With Node.js and npm installed, the desktop app's start screen opens in your browser from any folder:

npx fluidcad

Create or open projects there; each opens in a tab of its own. To set a project up from the terminal instead:

mkdir my-model && cd my-model
npm init -y
npm install fluidcad
npx fluidcad init
npx fluidcad serve

This creates a project with an empty part, part1.part.js, and opens the workspace in your browser. Both the desktop app and browser workspace include a code editor and a live 3D viewport.

Start with the getting-started guide to build a hinge, or choose a tutorial.

Keep npx fluidcad serve running beside any editor; the viewport updates when you save. For an integrated workflow, use the VS Code extension or Neovim plugin.

The bundled MCP server lets agents inspect geometry, take screenshots, edit model files, and look up the API in a running workspace. Configure your MCP client to run:

npx -y fluidcad mcp

Install the companion modeling skills with npx skills add Fluid-CAD/FluidCAD. See the MCP setup guide for client configuration and usage.

FluidCAD uses the OpenCascade B-Rep modeling kernel through opencascade.js for precise solid geometry. Thanks to the opencascade.js team for making it available in WebAssembly.

Licensed under MIT.