Microsoft Adaptive Card Previewer enables you to preview Adaptive Cards when you refine the designs. It works with Teams Toolkit, allows you to preview Adaptive Cards created for Teams bot and message extension. You can open a side-by-side preview to observe live changes and switch between different themes.
Explore Adaptive Card Previewer
Adaptive Card Previewer provides faster and more reliable solutions to preview Adaptive Card designs. Adaptive Card Previewer supports the following features:
Teams Toolkit Integration: Enables Just-in-Time (JIT) installation of Adaptive Card Previewer when you update Adaptive Cards generated from a Teams Toolkit project.
Instant preview: Allows you to preview Adaptive Cards in the Visual Studio Code editor through CodeLens or the Command Palette.
You can select Preview Adaptive Card suggestion in the Adaptive Card template file to preview the Adaptive Card in the right pane.
You can use Adaptive Card: Open Preview to the Side or Adaptive Card: Open Preview to preview the Adaptive Card.
To preview Adaptive Card in the right pane, select Adaptive Card: Open Preview to the Side.
To preview Adaptive Card in a new window, select Adaptive Card: Open Preview.
Data separation: Enables you to separate 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, which generates an empty file where you can bind data to the Adaptive Card template.
Default theme configuration: Allows you to set a default theme through the Visual Studio Code extension settings Adaptive Card Previewer: Default Theme.
Switch themes: Allows you to switch between light, dark, and high contrast themes to preview your Adaptive Cards.
Advantages
The Adaptive Card Previewer offers the following benefits:
Quick updates: Allows you to preview Adaptive Card designs within their integrated development environment, eliminates the need to switch between tools constantly. You can create a bot or messaging extension with Teams Toolkit, open the Adaptive Card metadata file, and use CodeLens or a specific command to preview the card. Any update or changes to the card are reflected instantly through the Hot Reload feature in the preview.
Reliable previews: Uses the same rendering stack as Teams and Outlook to ensure accurate and consistent preview results are aligned with the actual card rendering.
Limitations
The Adaptive Card Previewer doesn't support the following Adaptive Card features:
Why do we have to use a new extension in Visual Studio Code? Can’t this extension be integrated into Teams Toolkit for Visual Studio Code?
Adaptive Card Previewer is a standalone extension because it uses a closed-source package to render the Adaptive Cards to ensure consistent rendering logic with the Teams platform. Teams Toolkit is an open-source project and doesn't include dependencies on packages that third-party developers can't access.
Does this extension support all Adaptive Card features in the Teams platform?
No. There are several limitations that Adaptive Card Previewer extension doesn't support.
The source for this content can be found on GitHub, where you can also create and review issues and pull requests. For more information, see our contributor guide.
Platform Docs feedback
Platform Docs is an open source project. Select a link to provide feedback:
Learn how to enhance the user experience of declarative agents by using Adaptive Cards to render API data visually. Create and configure Adaptive Card templates, integrate them into API plugins, and test the setup in Microsoft 365 Copilot. Learn the practical steps for building and previewing Adaptive Cards in Visual Studio Code.
This sample app shows how to create user-specific adaptive card views for Teams, enabling personalized content and auto-updating across various chat contexts.
Learn about Adaptive Cards and its types and how to design Adaptive Cards with Adaptive Card designer, Microsoft Teams UI Kit, and Adaptive Card templates.
Learn about card text formatting with Markdown and HTML, how to design responsive Adaptive Cards, and other elements to create actionable Adaptive Cards.
Learn about Sequential Workflows for Adaptive Cards using Universal Actions with code samples, invoke request received on bot side, and Adaptive Card response.
