Editor

An interactive editor for drawing floor plans. In Vue, bind it with v-model; in React, pass plan and onChange; on the HTML element, set the plan property and listen for change.

Vue

<script setup lang="ts">
import { ref } from 'vue'
import { FloorPlanEditor, createEmptyPlan } from '@jbaysolutions/floorplan-vue'

const plan = ref(createEmptyPlan('Head office'))
</script>

<template>
  <div style="height: 600px">
    <FloorPlanEditor v-model="plan" theme="light" :grid-size="10" :wall-thickness="12" />
  </div>
</template>

React

import { useState } from 'react'
import { FloorplanEditor, createEmptyPlan } from '@jbaysolutions/floorplan-react'

export function Editor() {
  const [plan, setPlan] = useState(() => createEmptyPlan('Head office'))

  return <FloorplanEditor plan={plan} onChange={setPlan} theme="light" gridSize={10} wallThickness={12} style={{ height: 600 }} />
}

HTML

<floorplan-editor theme="light" grid-size="10" wall-thickness="12" style="height: 600px"></floorplan-editor>

<script type="module">
  import { createEmptyPlan } from '@jbaysolutions/floorplan-elements'

  const editor = document.querySelector('floorplan-editor')
  editor.plan = createEmptyPlan('Head office')
  editor.addEventListener('change', (e) => console.log('new plan', e.detail.plan))
</script>

Try it on a sample house: select a wall or a room, drag it around, or pick a tool from the toolbar. The event the editor sends is shown under it.

Loading the live demo…

Draw or change something: the new plan is emitted after every edit.

Props

Prop	Type	Default	Description
modelValue (v-model)	FloorPlan | null	null	The plan (the whole building) being edited. In React and on the element: plan.
floor (v-model:floor)	string | null	ground floor	Id of the floor being edited. See Multi-floor buildings.
theme	'light' | 'dark' | 'blueprint' | 'paper' | 'mist' | 'ink' | 'graphite'	'light'	Visual theme. See Themes.
gridSize	number	10	Snap step in cm.
wallThickness	number	12	Default thickness (cm) for new walls. Can also be changed in the toolbar.
showGrid	boolean	true	Initial state of the grid toggle.
showDimensions	boolean	true	Initial state of the wall dimensions toggle.
formatLength	(cm: number) => string	"3.45 m"	Formatter for lengths shown on screen.
catalog	FurnitureCatalogItem[]	built-in	Furniture shown in the Furniture panel. Add-on packs have their own buttons and aren't affected.

In React the props have the same names (gridSize={10}). On the <floorplan-editor> element they are properties with the same names (editor.gridSize = 10); simple values also work as kebab-case attributes (grid-size="10"). Objects, arrays and functions (plan, catalog, formatLength) must be set as properties.

Events

Event	Payload	When
update:modelValue	FloorPlan	After every completed change (not on every mouse move).
change	FloorPlan	Same as above, for when you don't use v-model.
selection-change	Selection	The selected wall, room, opening or furniture changed.
update:floor	string	The user switched floors.

The editor emits a new object on every change, so you can keep your own history or autosave by watching the plan.

The same events in React and on the element:

Vue	React	HTML element
v-model (update:modelValue, change)	plan + onChange(plan)	plan property + change event, detail = { plan }
@selection-change	onSelectionChange(selection)	selection-change event, detail = { selection }
v-model:floor (update:floor)	floor + onFloorChange(floorId)	floor property + floor-change event, detail = { floor }

Vue

<FloorPlanEditor
  v-model="plan"
  v-model:floor="floorId"
  @selection-change="(selection) => (selected = selection)"
/>

React

<FloorplanEditor
  plan={plan}
  onChange={setPlan}
  floor={floorId}
  onFloorChange={setFloorId}
  onSelectionChange={setSelected}
  style={{ height: 600 }}
/>

HTML

editor.addEventListener('change', (e) => save(e.detail.plan))
editor.addEventListener('selection-change', (e) => (selected = e.detail.selection))
editor.addEventListener('floor-change', (e) => console.log('now on floor', e.detail.floor))

Methods

In Vue, call methods through a template ref. In React, the ref is the <floorplan-editor> element itself. On the HTML element, call them on the element.

Vue

<script setup lang="ts">
import { ref } from 'vue'
import { FloorPlanEditor } from '@jbaysolutions/floorplan-vue'

const editor = ref<InstanceType<typeof FloorPlanEditor>>()
</script>

<template>
  <FloorPlanEditor ref="editor" v-model="plan" />
  <button @click="editor?.undo()">Undo</button>
</template>

React

import { useRef } from 'react'
import { FloorplanEditor, type FloorplanEditorElement } from '@jbaysolutions/floorplan-react'

const editor = useRef<FloorplanEditorElement>(null)

<FloorplanEditor ref={editor} plan={plan} onChange={setPlan} style={{ height: 600 }} />
<button onClick={() => editor.current?.undo()}>Undo</button>

HTML

const editor = document.querySelector('floorplan-editor')
document.querySelector('#undo').addEventListener('click', () => editor.undo())

Method	Description
undo() / redo()	Step through the editor's history (up to 200 steps).
fit(animate = true)	Zoom to fit the whole plan.
clear()	Remove everything on the current floor (can be undone).
setFloor(id)	Switch to another floor.
addFloor('above' | 'below')	Add an empty floor and switch to it.
duplicateFloor()	Copy the current floor's layout onto a new floor on top.
setTool(tool)	'select', 'pan', 'wall', 'room', 'door', 'window' or 'furniture' (the built-in Furniture panel).
select(selection)	Select an item, e.g. { kind: 'room', id }, or null.
getPlan()	A copy of the current plan.

Tools

Tool	Key	How it works
Select	V	Click to select. Drag items to move them; drag the round handles to move wall ends (connected walls follow). Dragging empty space pans.
Pan	H	Drag to pan. You can also pan with the middle mouse button or by holding Space.
Wall	W	Click to start, keep clicking to chain walls. Finish with Esc, Enter, right-click or by clicking the last point again. Clicking the first point closes the loop. Choose Wall or Railing in the toolbar.
Room	R	Drag to draw a rectangular room, or click corners to draw any shape (click the first corner to close). Edges in the toolbar decides what goes around it: Walls, Railing (a balcony), None (an open area such as a garden) or Pool (a swimming pool). Edges that already have a wall are skipped.
Door	D	Hover over a wall and click. Choose single, double or sliding in the toolbar.
Window	N	Hover over a wall and click.
Furniture	F	Pick an item in the panel and click to place it. E rotates it before placing.
Add-on packs	e.g. G	Each registered pack gets its own button and panel, which works like Furniture. The garden pack's is Garden (G).

Snapping

While drawing, points snap, in order of priority, to:

1. existing corners and wall ends (ring indicator)
2. 45° angles from the previous point (15° steps while holding Shift)
3. the nearest wall (diamond indicator)
4. the grid, with dashed alignment guides to other corners

Hold Alt to place a point freely, or switch snapping off with the magnet button.

Inspector

Selecting an item opens the inspector panel on the right:

• Wall: wall or railing, length (typing a length moves the end point) and thickness
• Room: name, floor finish (including grass), colour; or, for a pool, finish, sunk or raised, depths, deep end, corners and glass sides
• Door / window: type, width, position along the wall, hinge side, swing direction
• Furniture (and pack items): width, depth, rotation, duplicate

Keyboard shortcuts

Keys	Action
V H W R D N F	Switch tool (plus each add-on pack's own key, e.g. G for Garden)
Ctrl Z / Ctrl Shift Z / Ctrl Y	Undo / redo
Delete / Backspace	Delete the selection
Esc	Finish drawing → back to Select → clear the selection
Enter	Finish the current wall chain or polygon room
E / Shift E	Rotate the selected furniture by 90° clockwise / anticlockwise
Ctrl D	Duplicate the selected furniture
Arrow keys	Move the selected furniture by one grid step (Shift: 50 cm)
+ / - / 0	Zoom in / zoom out / fit
Space (hold)	Pan
Page Up / Page Down	Switch to the floor above / below

TIP

Shortcuts only apply while the editor has focus (click inside it), so they never interfere with the rest of your page.