Browser-based retail shelf layout tool with built-in AI
About
The Planogram Editor is a full-featured browser application for creating and managing retail shelf layouts (planograms). Engineers place fixture bays and shelves in a workspace, then merchandise products across shelf positions with fine-grained control over blocks and regions.
The editor uses Three.js via Threlte for a real-time 2D/3D rendering pipeline, giving an accurate visual representation of the shelf layout as it's built.
The Consumer Decision Tree (CDT) defines how shoppers navigate a category — from the top-level decision (e.g. brand vs. format) down through sub-segments to individual products. The Sequence Editor then translates the CDT into a shelf flow, controlling the order in which segments and products appear across the fixture from left to right.
Plangela is the built-in AI assistant that can automate much of the planning process — analysing the current planogram, suggesting optimised layouts, applying CDT-driven sequences, and making targeted mutations via structured tool calls. She is AI provider and model agnostic: bring your own API key for OpenAI, Anthropic, or any compatible provider and model.
In action
Merchandise mode
Fixture layout mode
Consumer Decision Tree
Sequence Editor
Plangela — AI assistant
Features
Fixture Mode
Place and arrange bays and shelving units on a canvas workspace with snapping and alignment guides.
Merchandise Mode
Assign products (SKUs) to shelf positions, manage blocks and regions with drag-and-drop precision.
2D / 3D Rendering
Orthographic front view by default. Three.js powered rendering via Threlte for accurate spatial representation.
Consumer Decision Tree (CDT)
Model how shoppers navigate a category — from top-level decisions down through sub-segments to individual products — and use the CDT to drive shelf organisation automatically.
Sequence Editor
Translate the CDT into a precise shelf flow, controlling the order segments and products appear across the fixture from left to right.
Plangela — AI Assistant
Automate the planning process with a built-in AI assistant. Provider and model agnostic — bring your own API key for OpenAI, Anthropic, or any compatible provider.
Type-Safe Data Model
A fully typed domain model covering bays, shelves, positions, blocks and regions — derived from stored JSON.
Test Coverage
Vitest unit tests mirroring the source structure ensure the domain logic stays correct as the editor evolves.