Floorplan Viewer docs

The Floorplan Viewer is an HTML5 app for the desktop and mobile web that loads and renders the floorplans of a Floorplanner project in 2D and 3D. The 2D view can be zoomed and panned, the 3D view can be rotated and zoomed.

The floorplan viewer is available as a link, which can be shared on social media, or it can be embedded into a website through a simple iframe. If you want to have more control over the look & feel of the floorplan viewer, that's possible too. Please check out the section below.

Link to the default viewer

The floorplan viewer is available for all public Floorplanner projects at the following URL:


All you need to know is the ID of the Floorplanner project (project_id), for example:


The floorplan viewer offers three parameters to be customized:

  • The view parameter allows you to set the initial view to 2D or 3D. The default view is 2D.

  • The section parameter allows you to cut the walls at a certain height (in centimeters). By default there is no section.

  • The top_color parameter allows you to set the color of the top of the walls. Make sure not to use the '#' sign as it doesn't play well in URLs. The default top color is black.

For example:


Embed the default viewer

The floorplan viewer can easily embedded into a website by loading the URL into an iframe. For example:

<iframe src="http://floorplanner.com/projects/34434582/viewer?view=3d&section=180"

Integrate a customized viewer

If you want more control over the look & feel of the floorplan viewer in your own website we offer a way to roll your own. You can use the floorplan viewer to only render the floorplans in 2D & 3D, and build your custom UI around it. It's also possible to tweak the way the floorplans look by suplying a custom theme to the floorplan viewer.

Let me explain how you can integrate a customized version of the floorplan viewer into your website in a couple of steps.

1. Include JS

First you have to load the JavaScript file of the floorplan viewer, which can be found here:


The floorplan viewer uses jQuery, so make sure it's available too.

2. Add HTML elements

Make sure to have a dedicated element for the floorplan viewer in your HTML page. The element has to have two other elements, one for the 2d view and one for the 3d view. For example:

<div id='app'>
    <div id='fp2d'></div>
    <div id='fp3d'></div>

3. Define a theme

A theme defines how the floorplans look, like the color of the walls or if the dimension lines should be auto-generated or not. The example below show how you can define a theme and which options are available. Btw you don't have to specify a custom theme. You can ignore this step if you are happy with the default look of the floorplans.

var theme = {
ui: {
initView: '2d'// or '3d'
rotate3d: true// automatically rotate the 3d view
engine: {
wallSectionHeight: 180, // the height at which walls are cut off in the 3D view
wallTopColor: 0x7F7F7F, // top colour of walls in 3D

engineAutoDims: true, // generate and show automatic dimensions

showGrid: true, 
showDims: true, // visibility of dimension lines (both auto and manual)
showObjects: true,
showLabels: true, // visibility for all labels, including room names and dims

useMetric: true,// false means Imperial system, affects dimensions

4. Init floorplan viewer

You can initialize the floorplan viewer by calling fpViewer.init(options). For example:

    projectId: projectId,
    box2d: fp2d,
    box3d: fp3d,
    theme: theme,
    callback: onInit,
    jquery: $

The options are:

  • projectId: the ID of the Floorplanner project

  • box2d: the HTML element for the 2D floorplan rendering

  • box3d: the HTML element for the 3D floorplan rendering

  • theme: an object that allows to customize the way a floorplan looks, see more info below

  • callback: once the floorplan data is loaded, this function is called with the data of the project (including floor levels e.g.)

  • jquery: the jQuery object so the floorplan viewer doesn't have to use the global variable

5. Project data

When the Floorplanner project data has been loaded, the callback function is called with the project data.  The structure of the project object looks like this:

  "id": "number",
  "name": "string",
  "items" : {
    "floors": {
      "type": "array",
      "description": "The collection of floor levels in a project",
      "properties": {
        "id": "number",
        "name": "string",
        "level": "number",
        "items": {
          "designs": {
            "type": "array",
            "description": "The collection of design variants in a floor level",
            "properties": {
              "id": "number",
              "name": "string",
              ... much more data...

4. Add floor selection & view UI

With the project data you can create the UI for selecting floor levels and viewing them in 2D or 3D. This is done by calling fpViewer.display2D(design) or fpViewer.display3D(design). The design object is gotten from the project object.

For example:

function display() {
if (view == '3d') {
} else {

function renderFloor(floor) {
return $('<li>' + floor.name + '</li>').data('design', floor.designs[0]);

function onInit(project) {
design = project.floors[0].designs[0];
view = theme.view;

6. Cleanup HTML elements

If you want to clean the HTML elements the floorplan viewer uses, for whatever reason, you can call: