The Microsoft Adaptive Card Previewer is an extension for Visual Studio Code. It uses the latest rendering stack for Microsoft Teams to provide a more accurate preview of Adaptive Cards. You can open a side-by-side preview to view changes live, toggle between light, dark, and high-contrast themes.
Adaptive Card Previewer supports:
Instant preview of adaptive cards in VS Code editor through CodeLens or Command Palette.
Switch between different themes (Light/Dark/High-Contrast) to preview your cards so you can design with confidence.
Separation of data from the layout in an Adaptive Card template language. Use the command Adaptive Card: New Data File
to add a data file for a template. This will generate an empty file where you can bind data to your adaptive card template.
Seamless integration with Teams Toolkit that allows a Just-In-Time installation of Adaptive Card Previewer when you are iterating on adaptive cards generated from Teams Toolkit project creation.
Configure default theme through Visual Studio Code extension settings adaptiveCardPreviewer.defaultTheme
.
Some features of an Adaptive Card are not supported:
Please stay tuned for updates as we continue to expand the capabilities of Adaptive Card Previewer.
Adaptive Card Previewer will follow Modern Lifecycle Policy.
Adaptive Card Previewer collects usage data and sends it to Microsoft to help improve our products and services. Read our Privacy Statement and Data Collection Notice to learn more. Learn more in our FAQ.
This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.