ManifoldCAD VS Code Extension

A VS Code extension bringing ManifoldCAD functionality to VS Code. It allows creation of .mfc and .manifoldcad files, containing scripts compatible with manifoldcad.org. It also adds a 3D preview panel for previewing the resulting mesh inside VS Code. The preview panel should support all features of manifoldcad.org, such as coloring and animations.

Both desktop VS Code and vscode.dev (any web version) are supported.

This extension has been developed with support from Cookiecad.

Preview

Usage

1. Open or create a .mfc or .manifoldcad file in VS Code.
2. A triple slash typescript import should automatically be added to the top of the file. This is what provides the TypeScript definitions for the Manifold API.
3. Run the Manifold: Open 3D Viewer command from the Command Palette (Ctrl+Shift+P).
4. Edit your code and save the file. See the results update live in the viewer.

What is Manifold?

Manifold is a high-performance library for creating and manipulating manifold triangle meshes. Manifold meshes represent solid objects and are essential for CAD, 3D printing, and advanced modeling workflows. The library guarantees robust mesh operations, supports mesh Booleans, smoothing, and arbitrary vertex properties, and is available for C++, TypeScript/JavaScript, and Python.

Features

• 3D Model Visualization: Instantly preview 3D meshes generated by your code in an interactive viewer.

• Animation Support: Visualize and scrub through mesh animations and transformations.

• Live Editing: See changes reflected in real time as you edit your code.

• Configurable File Extensions This extension allows you to configure which file extensions are treated as ManifoldCAD scripts. By default, files ending with .manifoldcad or .mfc are recognized, but you can change this in your VS Code settings under manifold-vscode-extension.fileExtensions.

For example, to also use regular .ts or .js files as ManifoldCAD scripts, set the extension setting to:

.manifoldcad, .mfc, .ts, .js

• Type Injection File Extensions: Control which file extensions receive automatic type injection (the triple-slash reference to Manifold types) using the manifold-vscode-extension.typeInjectionFileExtensions setting. If not set, it defaults to the value of fileExtensions. This allows you to preview .ts or .js files without injecting the triple-slash reference, if desired.

How It Works

The extension provides a custom viewer for .mfc and .manifoldcad files, opening a webview panel that renders your 3D models and animations. The webview is built with React and Vite, and leverages the Manifold WASM bindings for mesh generation.

Development

1. Clone this repository and run pnpm install in the root directory.
2. Now build the manifold library and copy the manifold.js and manifold.wasm files into the src/webview/src/wasm/ directory.
3. Build the webview by navigating to src/webview/ and running:

pnpm install
pnpm build

4. Build the extension:

pnpm compile

5. Launch the extension in a VS Code Extension Development Host. A launch.json configuration is provided, so inside VS Code, open the Debug panel, select "Launch Extension", and hit the green play button. A new VS Code window will open with the extension loaded.

6. Or: build the .vsix package for distribution:

npx vsce package

See the package.json scripts for more commands.

Learn More

• Manifold Library Documentation
• VS Code Extension API

Known Issues

Opening multiple .mfc files causes type errors to appear in the opened file due to the triple slash type import. This is because the same context is shared between the opened files, and the typescript compiler sees multiple variables with the same name.

The solution is to only open one .mfc file at a time.