Arrow icon
See all demos


The Planogram demo is a useful example of a visual application built with JointJS+. It uses some key plugins such as FreeTransform and PaperScroller to create an application that aims to help retailers better organize their brick-and-mortar stores and ultimately maximize sales.
Demo instructions
Re-organize the shelf layout by changing the positions of the products.

Made with JointJS+

The source code of this demo is available as part of the JointJS+ commercial license. Don't have a license yet? Start a trial and use the source code of this and many other demos for free, with no obligations, for 30 days.

Compatible with:

ReactAngularVueSvelteHTML5Salesforce Lightning

Made with JointJS+

All features required to build this demo are included in the commercial JointJS+ package. Don't have a license yet? Start a trial and build professional applications with ease.

Compatible with:

ReactAngularVueSvelteHTML5Salesforce Lightning

Made with JointJS

The source code of this demo is available in the JointJS open-source library which helps developers create simple visual applications in less time.

Compatible with:

ReactAngularVueSvelteHTML5Salesforce Lightning

Made with JointJS

All features required to build this demo application are included in our open-source library, JointJS. Download the package and create basic visual applications in no time.

Compatible with:

ReactAngularVueSvelteHTML5Salesforce Lightning

The role of JointJS in building a Planogram application

JointJS, a powerful diagramming library, helps developers and companies of any size build advanced visual applications and No-Code/Low-Code tools. It provides a wealth of ready-made demos and a wide range of prebuilt features that make creating applications such as Planogram software a breeze. 

We equip developers with all the plugins they need to save time and focus their energy elsewhere such as:

  • FreeTransform
  • PaperScroller
  • CommandManager
  • Validator
  • Stencil
  • GridLayout

New to this topic? Learn more about planograms👇

What is a Planogram?

If you've ever wondered while shopping why the most expensive products are placed right in front of your eyes and the cheapest ones right above the ground where it's almost impossible to see them, you've experienced the good work of a planogrammer. A planogram - a special type of diagram - is, as Shopify says, “a schematic tool retailers use to plan their store layout to maximize sales and customer experience”.

A planogram is a component of visual merchandising, which helps to display products in a way that makes their strengths stand out, and is a key factor in in-store sales and a better customer experience.

In our sample application, we focus on displaying products on the shelf, but there are other types of planograms that help to organize the entire store and thus determine the overall layout.


The main benefits

Needless to say, retailers are looking for ways to increase sales and improve customer satisfaction. Planograms are a good way to do that and more. Let's briefly go over the main benefits of planograms.

Maximize sales

We've talked about this a lot. By placing expensive or higher-margin products right in front of customers' eyes, or by placing products that are often bought together in a similar location, retailers actually achieve higher sales.

Standardize the store layout

Imagine a brand that has hundreds or thousands of stores across the country. 

A standardised approach to product display and store layout not only helps save costs, but also avoids customer confusion - everything is in the same (or similar) position no matter which store you visit.

Abide by the partner agreements

Retailers do not manufacture products themselves (at least not in most cases) but work with suppliers who, as part of the agreement, require compliance with certain rules as to how or where their products are displayed. Planograms help to prevent unmet partner requirements and breaches of partner relationships by giving retailers an overview and control over the layout of their stores.

Improve the customer experience

Last but not least, it is the customer who moves smoothly and pleasantly in the store, without long delays in finding the right product or wandering between the shelves. Customer experience is the cornerstone of increased sales and a successful brand/store.

Ready to take the next step?

Modern development is not about building everything from scratch. The JointJS team equips you with plenty of ready-to-use demo apps that can serve as a boilerplate and radically reduce your development time. Start a free 30-day JointJS+ trial, get the source code of the Planogram application, and go from zero to a fully functional app in no time.

Speed up your development with a powerful library