---
source: https://www.jointjs.com/blog/demo-wednesday-microsoft-adaptive-cards
generated: 2026-04-09
format: markdown
---

We've published a new demo: [Microsoft Adaptive Cards](https://www.jointjs.com/demos/microsoft-adaptive-cards)

Today's demo shows how to **embed existing HTML** rendered by a third party library, e.g. Microsoft Adaptive Cards, **into a shape** in JointJS.

The example implements a custom view responsible for rendering interactive HTML cards inside foreign objects and synchronizing the size of the view and the model, since the size of the HTML may change over the lifetime of the card.

The demo also demonstrates the use of the **markdown language** inside the shapes using the *markdown-it* library.

See the Pen [JointJS: Microsoft Adaptive Cards](https://codepen.io/jointjs/pen/zYMxmrw/ca506a1ec796e572895ec2dde579afc0) by JointJS ([@jointjs](https://codepen.io/jointjs))
on [CodePen](https://codepen.io).

‍

In addition, we will share a detailed tutorial on how to create isometric diagrams using SVG on our blog. Stay tuned.

**Interested in using such a diagramming studio in your app?** [Start a free JointJS+ trial](/free-trial) and build visual and No-Code/Low-Code applications with easy and confidence.

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: