How to Design Adaptive Cards
Step-by-step guide to building and previewing Microsoft Adaptive Cards using the DevHexLab Adaptive Cards Designer.
Tool Used
Adaptive Cards Designer
1
Open the Adaptive Cards Designer
Navigate to /tools/developer/adaptive-cards-designer.
2
Build or paste a card payload
Either drag card elements from the element palette to design a card visually, or paste an existing Adaptive Card JSON payload directly into the editor.
3
Preview the card
The live preview panel shows exactly how the card will render in Teams, Outlook, or other host applications. Switch between host app themes to test different rendering contexts.
4
Copy the JSON
Click Copy JSON to grab the card payload. Paste it into your Power Automate flow, bot, or any application that accepts Adaptive Card payloads.
All done!
You are ready to use Adaptive Cards Designer like a pro.