Installation

Requirements

• Vue package: Vue 3.4 or newer.
• React package: React 18 or 19.
• Elements package: any modern browser; no framework needed.
• 3D viewer only: three.js 0.160 or newer, in every package.

Install the package

Vue

npm install @jbaysolutions/floorplan-vue

# optional, only for the 3D viewer
npm install three

React

npm install @jbaysolutions/floorplan-react

# optional, only for the 3D viewer
npm install three

HTML

npm install @jbaysolutions/floorplan-elements

# optional, only for the 3D viewer
npm install three

The stylesheet

Vue

// once, for example in main.ts
import '@jbaysolutions/floorplan-vue/style.css'

React

// nothing to do: the stylesheet is added to the page when the first component appears

HTML

// nothing to do: the stylesheet is added to the page when the first element appears.
// To link it yourself instead (for example with a strict Content Security Policy):
import { injectStyles } from '@jbaysolutions/floorplan-elements'
injectStyles(false) // then link @jbaysolutions/floorplan-elements/style.css in your page

Imports

The 2D components and the helpers come from the main entry. The 3D viewer has its own entry, so three.js is only loaded by the pages that use it.

Vue

import { FloorPlanEditor, FloorPlanViewer, createEmptyPlan } from '@jbaysolutions/floorplan-vue'
import { FloorPlanViewer3D } from '@jbaysolutions/floorplan-vue/3d'

React

import { FloorplanEditor, FloorplanViewer, createEmptyPlan } from '@jbaysolutions/floorplan-react'
import { FloorplanViewer3D } from '@jbaysolutions/floorplan-react/3d'

HTML

import '@jbaysolutions/floorplan-elements'    // defines <floorplan-editor> and <floorplan-viewer>
import '@jbaysolutions/floorplan-elements/3d' // defines <floorplan-viewer-3d>
import { createEmptyPlan } from '@jbaysolutions/floorplan-elements'

Add-on packs (optional)

Extra items, such as the garden pack's trees, garden furniture and pool accessories, come as separate packages. Register them once, before the components first render:

npm install @jbaysolutions/floorplan-pack-garden

Vue

import { registerPack } from '@jbaysolutions/floorplan-vue'
import { registerPack3D } from '@jbaysolutions/floorplan-vue/3d'
import { garden } from '@jbaysolutions/floorplan-pack-garden'
import { garden3D } from '@jbaysolutions/floorplan-pack-garden/3d'

registerPack(garden)
registerPack3D(garden3D) // only if you use the 3D viewer

React

import { registerPack } from '@jbaysolutions/floorplan-react'
import { registerPack3D } from '@jbaysolutions/floorplan-react/3d'
import { garden } from '@jbaysolutions/floorplan-pack-garden'
import { garden3D } from '@jbaysolutions/floorplan-pack-garden/3d'

registerPack(garden)
registerPack3D(garden3D) // only if you use the 3D viewer

HTML

import { registerPack } from '@jbaysolutions/floorplan-elements'
import { registerPack3D } from '@jbaysolutions/floorplan-elements/3d'
import { garden } from '@jbaysolutions/floorplan-pack-garden'
import { garden3D } from '@jbaysolutions/floorplan-pack-garden/3d'

registerPack(garden)
registerPack3D(garden3D) // only if you use the 3D viewer

See Add-on packs for what's in them.

TypeScript

All packages include their types. Plans, markers and events are typed (FloorPlan, Marker, PlanClickEvent…), and so are the components' props.

Next: your first page.