@zappar/mattercraft-vite-plugin

A Vite plugin for building Mattercraft projects outside of the Mattercraft editor. Useful for integrating Mattercraft content into your own Vite-based apps or CI/CD pipelines.

Mattercraft is a browser-based 3D content development environment for building interactive AR, VR, WebXR and 3D web experiences. Built on Three.js, it lets you create and publish rich 3D content with a visual editor and seamless scripting.

Installation

npm install @zappar/mattercraft-vite-plugin

Setup

Add the plugin to your vite.config.ts:

import mattercraft from '@zappar/mattercraft-vite-plugin';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [mattercraft()],
});

That's it. Vite will now handle Mattercraft project files automatically.

TypeScript Decorators

Mattercraft components use TC39 decorators (the standard, non-legacy kind). The plugin automatically transforms them during the build — no extra config needed.

If you're using the @zappar/mattercraft-cli, this is already configured for you.

TypeScript Configuration

If your project has a tsconfig.json, Vite will use it automatically. If you'd like to add one, we recommend:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ES2020",
    "moduleResolution": "bundler",
    "esModuleInterop": true,
    "strictNullChecks": true,
    "declaration": false,
    "jsx": "react-jsx"
  }
}

HTTPS during development

If your project uses the device camera, browsers require a secure context (HTTPS) for camera access. Enable it in your Vite config:

export default defineConfig({
  plugins: [mattercraft()],
  server: {
    https: true,
  },
});

Requirements

• Vite 8 or later
• Node 24 or later

License

Proprietary - Zappar Limited