@jbaysolutions/floorplan-elements

Website · Live demo · Documentation

JBay Floorplan as standard HTML elements: a floor plan editor, 2D viewer and 3D viewer for any framework or none (plain HTML, React, Angular, Svelte, Vue 2…). Vue is bundled inside; your app doesn't need it.

npm install @jbaysolutions/floorplan-elements
npm install three   # only for <floorplan-viewer-3d>

import '@jbaysolutions/floorplan-elements'      // <floorplan-editor>, <floorplan-viewer>
import '@jbaysolutions/floorplan-elements/3d'   // <floorplan-viewer-3d>

const viewer = document.querySelector('floorplan-viewer')
viewer.plan = plan
viewer.markers = markers
viewer.addEventListener('plan-click', (e) => console.log(e.detail.x, e.detail.y, e.detail.room?.name))

<floorplan-viewer theme="paper" style="height: 600px"></floorplan-viewer>

Objects and arrays are set as properties, simple values also as attributes; events are DOM events with a single detail object; methods (fit(), focusMarker(), snapshot()…) are called on the element. Add-on packs register with registerPack / registerPack3D from this package.

Documentation: the HTML elements guide for every property, event and method, and for Angular and plain-HTML examples; the full documentation for everything else. For Vue 3 apps, use @jbaysolutions/floorplan-vue; for React, @jbaysolutions/floorplan-react.

Licence

Free for open-source projects and for companies with under €1M yearly revenue, including in production. Other companies buy one commercial licence per company, per major version. Add-on packs are included. See LICENSE.md for the terms.

© JBay Solutions.