Introduction

JBay Floorplan puts floor plans inside your application. It has three components that share one plain-JSON data model:

Component	Use it to…
Editor	Let people draw walls, rooms, gardens, balconies, doors, windows and furniture, on as many floors as needed
2D viewer	Show a plan in 2D, get click coordinates, and place images (markers) on it
3D viewer	Show the same plan and markers in 3D (optional, uses three.js)

A plan drawn in the editor is a JSON object you store wherever you like, and show later in either viewer. A plan is a whole building, from one floor to many (multi-floor buildings).

Loading the live demo…

Everything runs in your app

There is no server to run, no account to create and no API key. The components are an npm package you build into your own app; plans and markers are your data, in your database. Nothing is sent anywhere.

One library, three packages

Pick the package for your stack. They're built from the same code, so every feature, option and event works the same way in all three.

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.

Package	For	Notes
@jbaysolutions/floorplan-vue	Vue 3.4+	Uses your app's Vue. The smallest option.
@jbaysolutions/floorplan-react	React 18 and 19	Vue is bundled inside; your app doesn't install it.
@jbaysolutions/floorplan-elements	Anything else: plain HTML, Angular, Svelte, Vue 2…	Standard custom elements, Vue bundled inside.

Add-on packs, such as @jbaysolutions/floorplan-pack-garden, work with all three.

How these docs show code

Most examples come in a tab per framework. Pick yours once and every example on every page follows:

Vue

<FloorPlanViewer :plan="plan" :markers="markers" @plan-click="onClick" />

React

<FloorplanViewer plan={plan} markers={markers} onPlanClick={onClick} />

HTML

<floorplan-viewer></floorplan-viewer>
<script type="module">
  const viewer = document.querySelector('floorplan-viewer')
  viewer.plan = plan
  viewer.markers = markers
  viewer.addEventListener('plan-click', (e) => onClick(e.detail))
</script>

Option names are written the Vue way in tables (showGrid, markers-draggable as an attribute). In React and on the elements they're the same names in camelCase: showGrid, markersDraggable. The framework pages list the few differences.

Licensing

JBay Floorplan is free for open-source projects and for companies with under €1M yearly revenue. Other companies buy a commercial licence once per major version. Add-on packs are included. See the licence for the full terms.