---
source: https://www.jointjs.com/blog/demo-wednesday-circular-rectangular-layout
generated: 2026-04-20
format: markdown
---

We've published a new demo: [Circular](https://www.jointjs.com/demos/circular-layout) & [Rectangular Layout](https://www.jointjs.com/demos/rectangular-layout)

Do you want the elements in the diagram **to form a circle or rectangle**? Do you want the **position of the elements** to be **automatically** calculated based on the number of elements? Let’s take a look at [Circular Layout](https://codepen.io/jointjs/pen/QWxjjdz) and [Rectangular Layout](https://codepen.io/jointjs/pen/zYaxzxB) CodePens.

- Circular Layout: <https://codepen.io/jointjs/pen/QWxjjdz>
- Rectangular Layout: <https://codepen.io/jointjs/pen/zYaxzxB>

For more examples of JointJS and JointJS+, see our [CodePen profile](https://codepen.io/jointjs) and our [official documentation](https://resources.jointjs.com/?_ga=2.157485114.162715808.1653039446-2112624975.1653039446).

To see all the awesome demos we've created so far, check out our [Github Discussions](https://github.com/clientIO/joint/discussions?discussions_q=label%3A%22Demo+Wednesday%22).

Every Wednesday we share diagramming tips, interesting features and news in JointJS. Learn with us, get content delivered straight to your inbox and become a real diagramming pro: