Skip to main content

Welcome to OpenPlans

OpenPlans is a powerful JavaScript library for creating 2D floor plans and architectural drawings using Three.js. Build interactive, web-based CAD applications with a simple and intuitive API.
OpenPlans is currently under heavy development. Expect frequent updates and breaking changes as we work towards a stable 1.0 release.

What is OpenPlans?

OpenPlans provides a comprehensive suite of tools for:
  • 2D Primitives: Lines, arcs, rectangles, and polylines for basic drawing operations
  • 3D Shapes: Cuboids, cylinders, and custom geometries for dimensional modeling
  • Architectural Elements: Doors, windows, slabs, and stairs with configurable parameters
  • Headless Generation: Generate floor plans programmatically from configuration data
  • Text Annotations: Dimension tools and glyph system for labeling and measurements

Core Features

Use Cases

OpenPlans is ideal for:
  • Real Estate Applications: Create interactive floor plan viewers for property listings
  • Architecture & Engineering: Build web-based design tools for preliminary layouts
  • Space Planning: Design office layouts and interior configurations
  • CAD Applications: Develop browser-based 2D/3D CAD tools without plugins

Two Ways to Use OpenPlans

1. Element Creation

Create and manipulate architectural elements programmatically:
const openPlans = new OpenPlans(container);
await openPlans.setupOpenGeometry();

// Create primitives
const wall = openPlans.polyline({
  points: [[0, 0, 0], [10, 0, 0], [10, 0, 8], [0, 0, 8], [0, 0, 0]],
  color: 0x000000
});

// Add architectural elements
const door = openPlans.baseDoor({
  doorPosition: [5, 0, 0],
  doorLength: 2,
  doorHeight: 1.2
});

2. Headless Floor Plan Generation

Generate floor plans programmatically by creating elements from data:
// Create elements from configuration data
const floorPlanData = {
  rooms: [
    { position: [0, 0, 0], width: 5, length: 4 }
  ],
  doors: [
    { position: [2.5, 0, 0], length: 1, height: 2.1 }
  ]
};

// Generate elements from data
floorPlanData.rooms.forEach(room => {
  openPlans.baseSlab({
    slabPosition: room.position,
    coordinates: [[0, 0, 0], [room.width, 0, 0], [room.width, 0, room.length], [0, 0, room.length]]
  });
});

floorPlanData.doors.forEach(door => {
  openPlans.baseDoor({
    doorPosition: door.position,
    doorLength: door.length,
    doorHeight: door.height
  });
});

Ready to Get Started?

About the Project

OpenPlans is part of the OpenGeometry ecosystem, a collection of open-source tools for computational geometry and architectural design.
OpenPlans is licensed under MIT and maintained by the OpenGeometry team. Contributions are welcome!

Last modified on March 7, 2026