GoJS Floorplanner with

This sample demonstrates a floor planning app built with GoJS and Svelte 5.

Along with the main diagram, it uses a palette and custom tools for dragging parts, building walls, and resizing wall parts.

Click the question mark at the top right of the page for more info on how to use the floor planner.

Guide:

To build walls, select the wall builder option at the top left of the diagram. Then choose between walls, dividers, and measurements.
To section off rooms without walls, use dividers. Measurements are independent of walls and dividers and can be given any length and location.
To draw a wall, click and drag on the diagram. Holding the control key will snap to dragging orthogonally, and holding shift will turn off the grid snap.
By default, when building walls or dividers, end points will snap to nearest wall or divider. Hold the alt key to prevent this if desired.

Create rooms by drag or multiple selecting walls and dividers that form a closed border and context click on the diagram or select Edit > Create Room to form the room.
Rooms must form a closed loop, but gaps and invisible boundaries can be created by using dividers and selecting Options > Hide Dividers.
To customize a room, click on its label and select any of the color options. Double click the label to change the name.
These labels can be dragged to any point on the room, and this position will be saved in model data. Select Options > Hide Room Areas to show only names on the labels.

To add a window or a door, context click on a wall and select Add Door or Add Window. This will add it to the selected wall.
Click and drag to slide them along their current wall. Their length can be resized with the handles on the side and the automatically expand to the width of their wall.
Windows and doors can also be dragged freely across the diagram, and they will snap to the nearest wall as they are dragged. Dragging them away from any walls will delete them.
To flip doors in and out or to swap the side of their hinge, context click them and use the menu options.

Add furniture, appliances, and stairs to the floor plan by dragging them in from the palette on the left.
By default, furniture and all other components in the diagram snap to a grid. Hold shift while dragging to finely adjust position.
All furniture can be resized and rotated using the blue handles that come up when selected.