Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Adaptive Card PreviewerNew to Visual Studio Code? Get it now.
Adaptive Card Previewer

Adaptive Card Previewer

Preview

Microsoft

microsoft.com
|
32,048 installs
| (0) | Free
A VS Code extension to preview adaptive cards for Microsoft 365 app
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Microsoft Adaptive Card Previewer

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.

ACP

Features

Adaptive Card Previewer supports:

  • Instant preview of adaptive cards in VS Code editor through CodeLens or Command Palette. previewCommands

    preview

  • Switch between different themes (Light/Dark/High-Contrast) to preview your cards so you can design with confidence. Theme

  • 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. image

  • Configure default theme through Visual Studio Code extension settings adaptiveCardPreviewer.defaultTheme. settings

Limitations

Some features of an Adaptive Card are not supported:

  • People picker
  • Dynamic type-ahead search
  • User mention
  • Image stage view
  • Full-width control

Please stay tuned for updates as we continue to expand the capabilities of Adaptive Card Previewer.

Feedback

  • Request a new feature
  • File an issue
  • Send an email to ttkfeedback@microsoft.com to chat with the product team
  • Report security issues and bugs to the Microsoft Security Response Center (MSRC) via secure@microsoft.com. Further information can be found in the Security TechCenter.

Support Policy

Adaptive Card Previewer will follow Modern Lifecycle Policy.

Telemetry

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.

Trademarks

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.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft