> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ploterr.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> Add Floorkit to a browser app with one npm install.

Floorkit is a public package on npm. You do not need a token or a private registry.

## Requirements

* A browser app that uses a bundler, such as Vite.
* [Three.js](https://threejs.org) `0.168`. Floorkit makes Three.js objects and your app shows them.
* TypeScript is optional. The package includes its type declarations.

For a project from an empty folder, follow the [quickstart](/floorkit/quickstart). Floorkit is ESM; browser geometry needs WebAssembly. You can validate building JSON outside a browser without starting the kernel.

## Install the package

<Steps>
  <Step title="Add Floorkit and its peer packages">
    ```bash theme={null}
    npm install @opengeometry/floorkit three@^0.168.0 camera-controls@^2.9.0 opengeometry@^2.0.18
    npm install --save-dev @types/three@^0.168.0
    ```

    `opengeometry` is the geometry kernel. Floorkit installs it as a dependency. Install it directly too, because the next step imports its WebAssembly file.
  </Step>

  <Step title="Start the geometry kernel">
    The kernel is a WebAssembly file. Give its address to Floorkit one time, when your app starts. With Vite, the `?url` import gives you the address.

    ```typescript theme={null}
    import { Floorkit } from '@opengeometry/floorkit';
    import wasmURL from 'opengeometry/opengeometry_bg.wasm?url';

    export async function startFloorkit(): Promise<void> {
      await new Floorkit().setupOpenGeometry(wasmURL);
    }
    ```

    Wait for this call to finish before you create geometry.
  </Step>

  <Step title="Add the Vite types">
    TypeScript must know the `?url` import. A new Vite app knows it already: its `tsconfig.json` has `"types": ["vite/client"]`. If yours does not, put this line in `src/vite-env.d.ts`:

    ```text theme={null}
    /// <reference types="vite/client" />
    ```
  </Step>
</Steps>

## Use one copy of Three.js

The text package currently depends on a different Three.js version. Tell npm to use your app's version everywhere. Add this field to your app's `package.json`, then run the install commands above:

```json theme={null}
{
  "overrides": {
    "three": "$three"
  }
}
```

`npm ls three` should show one version. If you installed before adding the override, follow [Troubleshooting](/floorkit/troubleshooting).

## Use a different bundler

Floorkit needs only the address of `opengeometry_bg.wasm`. Each bundler that can copy a file and give you its address works. You can also copy the file into your public folder and pass its path as text.

## Import from one place

All classes, functions and types come from the package root:

```typescript theme={null}
import { BuildingSession, type BuildingModel } from '@opengeometry/floorkit';
```

## Next steps

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/floorkit/quickstart">
    Show a room with a door and a window.
  </Card>

  <Card title="Troubleshooting" icon="wrench" href="/floorkit/troubleshooting">
    Fix an install or a start-up problem.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.