Floorplan docs

Appearance

JBay FloorplanFloor plans in your app, in 2D and 3D

An editor, a 2D viewer and a 3D viewer for Vue, React and plain HTML. Plans are plain JSON, and everything runs inside your app.

Get started
Installation
Your first page
A hotel with its gardens and pool in the 3D viewer
✏️

Editor

People draw walls, rooms, doors, windows, furniture, gardens, balconies and pools, on as many floors as the building has.

📍

2D viewer and markers

Click anywhere and get exact plan coordinates and the room. Pin your own icons on the plan and let people drag them.

🧊

3D viewer

The same plan and markers in 3D, one floor or the whole building, with no extra modelling.

🧾

Plain JSON

A documented data model you store in your own database, next to the rest of your data.

🎨

Seven themes

Colourful or minimal, light or dark. Every colour is a CSS variable you can change.

🌳

Add-on packs

Trees, garden furniture and pool accessories, with a 2D symbol and a 3D model for every item.

Pick your framework ​

The same components, in three packages. Data model, themes, packs and features are identical in all of them.

VVue 3@jbaysolutions/floorplan-vueNative Vue components: props, events, slots and v-model. Uses your app’s Vue.RReact@jbaysolutions/floorplan-reactReact components for React 18 and 19: props, callbacks, a ref and renderMarker.<>HTML elements@jbaysolutions/floorplan-elementsStandard custom elements for plain JavaScript, Angular, Svelte, Vue 2 and the rest.

Try it ​

This is the real 2D viewer. Click the plan to see the event your app receives, and drag the markers.

Loading the live demo…
Click the plan to see the event.

JBay Floorplan is free for open source and companies under €1M yearly revenue. Licensing and pricing

© JBay Solutions