# floorkit examples

> Interactive examples of the floorkit toolkit (package: @opengeometry/floorkit). Each example runs the code of one docs page: a guide or an API page. Each entry is one module exporting `meta` and `setup(ctx)`.

Each link below is the example as Markdown: description, API, notes and its full source. The live, interactive page is the same URL without `.md`. Machine-readable index of every example: https://floorkit-examples.ploterr.com/floorkit/manifest.json

## Model a building

- [Start a building](https://floorkit-examples.ploterr.com/floorkit/guides/start-a-building.md): An empty building with one storey. The button adds a floor slab with one edit command. Docs: https://docs.ploterr.com/floorkit/guides/start-a-building. API: BuildingSession, BuildingModel. Source: examples/src/guides/start-a-building.example.ts
- [Draw a wall](https://floorkit-examples.ploterr.com/floorkit/guides/draw-a-wall.md): Add one wall to a storey with a command. Then draw a closed room and remove the first wall. Docs: https://docs.ploterr.com/floorkit/guides/draw-a-wall. API: BuildingSession. Source: examples/src/guides/draw-a-wall.example.ts
- [Add a door](https://floorkit-examples.ploterr.com/floorkit/guides/add-a-door.md): Put a door in a wall of the room. Then move it along the wall, move it to the garden wall or remove it. Docs: https://docs.ploterr.com/floorkit/guides/add-a-door. API: BuildingSession, Door. Source: examples/src/guides/add-a-door.example.ts
- [Add a window](https://floorkit-examples.ploterr.com/floorkit/guides/add-a-window.md): Put a window in a wall of the room, at a sill height, next to the door. Docs: https://docs.ploterr.com/floorkit/guides/add-a-window. API: BuildingSession, Window. Source: examples/src/guides/add-a-window.example.ts
- [Add a floor slab](https://floorkit-examples.ploterr.com/floorkit/guides/add-a-floor-slab.md): Put a plate with thickness below the walls of the room. Then move it with a command. Docs: https://docs.ploterr.com/floorkit/guides/add-a-floor-slab. API: BuildingSession, Slab. Source: examples/src/guides/add-a-floor-slab.example.ts
- [Add a roof](https://floorkit-examples.ploterr.com/floorkit/guides/add-a-roof.md): Make a gable roof from the outline of the room and put it on top of the walls. Docs: https://docs.ploterr.com/floorkit/guides/add-a-roof. API: BuildingSession, Roof. Source: examples/src/guides/add-a-roof.example.ts
- [Add a stair](https://floorkit-examples.ploterr.com/floorkit/guides/add-a-stair.md): A straight stair on the floor slab. It climbs the storey height in equal steps. Docs: https://docs.ploterr.com/floorkit/guides/add-a-stair. API: BuildingSession, Stair. Source: examples/src/guides/add-a-stair.example.ts
- [Add a column](https://floorkit-examples.ploterr.com/floorkit/guides/add-a-column.md): One column on the floor slab. The button replaces it with a grid of six columns. Docs: https://docs.ploterr.com/floorkit/guides/add-a-column. API: BuildingSession, Column. Source: examples/src/guides/add-a-column.example.ts
- [Define a room](https://floorkit-examples.ploterr.com/floorkit/guides/define-a-room.md): Give a name and a number to the space inside the walls, and read its area. Docs: https://docs.ploterr.com/floorkit/guides/define-a-room. API: BuildingSession, Space. Source: examples/src/guides/define-a-room.example.ts
- [Add a storey](https://floorkit-examples.ploterr.com/floorkit/guides/add-a-storey.md): A second floor with its own walls and slab, on top of the ground floor. Docs: https://docs.ploterr.com/floorkit/guides/add-a-storey. API: BuildingSession, BuildingModel. Source: examples/src/guides/add-a-storey.example.ts
- [Model a mass](https://floorkit-examples.ploterr.com/floorkit/guides/model-a-mass.md): A podium and a tower as a simple volume. Change it with commands, check the zoning rules after each step, and undo. The last button turns it into walls, slabs and roofs. Docs: https://docs.ploterr.com/floorkit/guides/model-a-mass. API: BuildingSession, Building, massToShell, massSegmentHeightCommand, evaluateZoning. Source: examples/src/guides/model-a-mass.example.ts

## Edit

- [Move and reshape](https://floorkit-examples.ploterr.com/floorkit/guides/move-and-reshape.md): Move one corner of the room, pull one wall end off its corner and move the garden wall. The door and the window follow their wall. Docs: https://docs.ploterr.com/floorkit/guides/move-and-reshape. API: BuildingSession. Source: examples/src/guides/move-and-reshape.example.ts
- [Undo and redo](https://floorkit-examples.ploterr.com/floorkit/guides/undo-and-redo.md): Move the door, then go back one edit and do it again. The session keeps each edit. Docs: https://docs.ploterr.com/floorkit/guides/undo-and-redo. API: BuildingSession. Source: examples/src/guides/undo-and-redo.example.ts
- [Add a plan editor](https://floorkit-examples.ploterr.com/floorkit/guides/add-a-plan-editor.md): An editable floor plan of the house. Click a wall, then drag an end dot to pull that end off its corner or the middle dot to move the wall. The walls follow the pointer, and each drag is one saved edit. The wall tool takes one click for each point and the Enter key to finish. Docs: https://docs.ploterr.com/floorkit/guides/add-a-plan-editor. API: ProjectManager, ManagedPlanEditor. Source: examples/src/guides/add-a-plan-editor.example.ts
- [Add a 3D editor](https://floorkit-examples.ploterr.com/floorkit/guides/add-a-3d-editor.md): Click a wall in the 3D view, then drag an end dot to pull that end off its corner or the middle dot to move the wall. The walls follow the pointer, and each drag is one step that you can undo. Docs: https://docs.ploterr.com/floorkit/guides/add-a-3d-editor. API: ProjectManager, GUIEditor. Source: examples/src/guides/add-a-3d-editor.example.ts

## Draw and export

- [Create a plan view](https://floorkit-examples.ploterr.com/floorkit/guides/create-a-plan-view.md): Save a floor plan of the ground storey and draw its linework from the model. Docs: https://docs.ploterr.com/floorkit/guides/create-a-plan-view. API: drawProjectView, ProjectFile. Source: examples/src/guides/create-a-plan-view.example.ts
- [Cut a section](https://floorkit-examples.ploterr.com/floorkit/guides/cut-a-section.md): A vertical cut through the house with its storey level, a view of the south face, and the plan with the mark of the cut. All three are drawn from the model. Docs: https://docs.ploterr.com/floorkit/guides/cut-a-section. API: drawProjectView, SavedDrawingView, ProjectViewMarker. Source: examples/src/guides/cut-a-section.example.ts
- [Compose a sheet](https://floorkit-examples.ploterr.com/floorkit/guides/compose-a-sheet.md): The plan on an A3 page at 1:50. Add views puts the section and the elevation on the page. Scale changes the plan between 1:50 and 1:100. Annotate adds a dimension and a note. Style changes the paper style. Click a line of a drawing, then drag it to move it on the page. Docs: https://docs.ploterr.com/floorkit/guides/compose-a-sheet. API: Sheet, Viewport, Annotation, createSheetRenderer. Source: examples/src/guides/compose-a-sheet.example.ts
- [Export a PDF](https://floorkit-examples.ploterr.com/floorkit/guides/export-a-pdf.md): The sheet of the house with its plan, section, elevation, dimension and note. The button downloads the same sheet as a PDF with vector linework. Docs: https://docs.ploterr.com/floorkit/guides/export-a-pdf. API: ProjectManager, ProjectFile. Source: examples/src/guides/export-a-pdf.example.ts
- [Export a GLB](https://floorkit-examples.ploterr.com/floorkit/guides/export-a-glb.md): The house as one GLB file, made with the Three.js exporter from the session root. Docs: https://docs.ploterr.com/floorkit/guides/export-a-glb. API: BuildingSession. Source: examples/src/guides/export-a-glb.example.ts
- [Save and reopen](https://floorkit-examples.ploterr.com/floorkit/guides/save-and-reopen.md): Save the project as text, change the building, then open the saved text again in a new session. Docs: https://docs.ploterr.com/floorkit/guides/save-and-reopen. API: ProjectManager. Source: examples/src/guides/save-and-reopen.example.ts

## Integrate

- [Use your Three.js scene](https://floorkit-examples.ploterr.com/floorkit/guides/use-your-threejs-scene.md): A scene, a camera, lights and a render loop that the page owns. Floorkit adds the house to that scene. The button finds the roof by its id. Docs: https://docs.ploterr.com/floorkit/guides/use-your-threejs-scene. API: Floorkit, BuildingSession. Source: examples/src/guides/use-your-threejs-scene.example.ts

## Playbooks

- [Site massing](https://floorkit-examples.ploterr.com/floorkit/playbooks/site-massing.md): Compare building sizes, check site limits and save design options in plan or 3D. Docs: https://docs.ploterr.com/floorkit/playbooks/site-massing. API: ProjectManager, ManagedPlanEditor, massBuildingCommand, evaluateZoning. Source: examples/src/playbooks/site-massing.example.ts

## Walls

- [Wall](https://floorkit-examples.ploterr.com/floorkit/api/wall.md): One straight wall in a wall network. Change its thickness and height, in the plan and in 3D. Docs: https://docs.ploterr.com/floorkit/api/architecture/wall. API: Wall, WallNetwork. Source: examples/src/api/wall.example.ts