{"id":15980,"date":"2023-11-02T09:01:32","date_gmt":"2023-11-02T16:01:32","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=15980"},"modified":"2023-11-02T09:39:31","modified_gmt":"2023-11-02T16:39:31","slug":"announcing-public-preview-for-microsoft-adaptive-card-previewer","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/announcing-public-preview-for-microsoft-adaptive-card-previewer\/","title":{"rendered":"Announcing public preview for Microsoft Adaptive Card Previewer"},"content":{"rendered":"<p>Adaptive Cards are used heavily across the Microsoft Teams platform as a primary user interface for Bots and Message extensions. Their lightweight design enabled developers to simplify craft UX by defining properties in JSON objects.<\/p>\n<p>Developers iterate over the design of cards through <a href=\"https:\/\/adaptivecards.io\/designer\/\">Adaptive Card Designers<\/a>. Developers must constantly switch contexts and copy and paste the card JSON files into code editors and Adaptive Card Designers.<\/p>\n<p>Now, we\u2019re excited to announce the first preview of the Microsoft Adaptive Card Previewer extension, available in the VS Code Marketplace.<\/p>\n<p><img decoding=\"async\" width=\"1357\" height=\"904\" class=\"wp-image-16106\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/word-image-15980-1.png\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/word-image-15980-1.png 1357w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/word-image-15980-1-300x200.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/word-image-15980-1-1024x682.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/word-image-15980-1-768x512.png 768w\" sizes=\"(max-width: 1357px) 100vw, 1357px\" \/><\/p>\n<p>The Microsoft Adaptive Card Previewer is an extension for Visual Studio Code and 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, and toggle between light, dark, and high-contrast themes.<\/p>\n<h2>Key capabilities in Adaptive Card Previewer<\/h2>\n<ul>\n<li>Instant preview of adaptive cards in VS Code editor through CodeLens or Command Palette.<\/li>\n<\/ul>\n<p><img decoding=\"async\" width=\"2500\" height=\"1199\" class=\"wp-image-16107\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/word-image-15980-2-scaled.gif\" \/><\/p>\n<ul>\n<li>Switch between different themes (Light \/ Dark\/ High Contrast) to preview your cards so you can design with confidence.<\/li>\n<\/ul>\n<p><img decoding=\"async\" width=\"1252\" height=\"875\" class=\"wp-image-16109\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/word-image-15980-4.gif\" \/><\/p>\n<ul>\n<li>Separation of <strong>data<\/strong> from the <strong>layout<\/strong> in an Adaptive Card <a href=\"https:\/\/learn.microsoft.com\/adaptive-cards\/templating\/\">template language<\/a>. Use the command <code>Adaptive Card: New Data File<\/code> to add a data file for a template. This will generate an empty file where you can bind data to your adaptive card template.<\/li>\n<li>Seamless integration with Teams Toolkit allows a Just-In-Time installation of Adaptive Card Previewer when you are iterating on adaptive cards generated from Teams Toolkit project creation.<\/li>\n<\/ul>\n<p><img decoding=\"async\" width=\"1163\" height=\"443\" class=\"wp-image-16110\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/a-screenshot-of-a-computer-description-automatica.png\" alt=\"A screenshot of a computer Description automatically generated\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/a-screenshot-of-a-computer-description-automatica.png 1163w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/a-screenshot-of-a-computer-description-automatica-300x114.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/a-screenshot-of-a-computer-description-automatica-1024x390.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/a-screenshot-of-a-computer-description-automatica-768x293.png 768w\" sizes=\"(max-width: 1163px) 100vw, 1163px\" \/><\/p>\n<ul>\n<li>Configure default theme through Visual Studio Code extension settings <code>adaptiveCardPreviewer.defaultTheme<\/code>.<\/li>\n<\/ul>\n<p><img decoding=\"async\" width=\"1270\" height=\"565\" class=\"wp-image-16111\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/a-screenshot-of-a-computer-description-automatica-1.png\" alt=\"A screenshot of a computer Description automatically generated\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/a-screenshot-of-a-computer-description-automatica-1.png 1270w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/a-screenshot-of-a-computer-description-automatica-1-300x133.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/a-screenshot-of-a-computer-description-automatica-1-1024x456.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/a-screenshot-of-a-computer-description-automatica-1-768x342.png 768w\" sizes=\"(max-width: 1270px) 100vw, 1270px\" \/><\/p>\n<h2>Limitations of Adaptive Card Previewer<\/h2>\n<p>If you have used any of the following features in your adaptive card, it\u2019s not currently supported in the Adaptive Card Previewer yet:<\/p>\n<ul>\n<li><a href=\"https:\/\/learn.microsoft.com\/microsoftteams\/platform\/task-modules-and-cards\/cards\/people-picker\">People picker<\/a><\/li>\n<li><a href=\"https:\/\/learn.microsoft.com\/microsoftteams\/platform\/task-modules-and-cards\/cards\/dynamic-search\">Dynamic type-ahead search<\/a><\/li>\n<li><a href=\"https:\/\/learn.microsoft.com\/microsoftteams\/platform\/task-modules-and-cards\/cards\/cards-format?tabs=adaptive-md%2Cdesktop%2Cconnector-html#sample-adaptive-card-with-a-mention\">User mention<\/a><\/li>\n<li><a href=\"https:\/\/learn.microsoft.com\/microsoftteams\/platform\/task-modules-and-cards\/cards\/cards-format?tabs=adaptive-md%2Cdesktop%2Cconnector-html#stage-view-for-images-in-adaptive-cards\">Image stage view<\/a><\/li>\n<li><a href=\"https:\/\/learn.microsoft.com\/microsoftteams\/platform\/task-modules-and-cards\/cards\/cards-format?tabs=adaptive-md%2Cdesktop%2Cconnector-html#full-width-adaptive-card\">Full-width control<\/a><\/li>\n<\/ul>\n<h2>Get started<\/h2>\n<p>We are excited for you to try the Adaptive Card Previewer and share your experience with us. Visit our <a href=\"https:\/\/aka.ms\/acp-docs\">documentation<\/a> and download the extension from <a href=\"https:\/\/aka.ms\/acp-marketplace\">the marketplace<\/a> to get started today. You can <a href=\"https:\/\/github.com\/OfficeDev\/acpreviewer\/issues\/new?assignees=&amp;labels=&amp;projects=&amp;template=feature_request.md&amp;title=\">request a new feature<\/a> in GitHub to build with us, share feedback <a href=\"https:\/\/github.com\/OfficeDev\/acpreviewer\/issues\/new?assignees=&amp;labels=&amp;projects=&amp;template=bug_report.md&amp;title=\">as an issue<\/a>, or email our team directly at <a href=\"mailto:ttkfeedback@microsoft.com\">ttkfeedback@microsoft.com<\/a>.<\/p>\n<p>Please stay tuned for updates as we continue to expand the capabilities of Adaptive Card Previewer &#8211; follow us on <a href=\"http:\/\/www.twitter.com\/microsoft365dev\">X \/ @Microsoft365Dev.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn more about this extension for Visual Studio Code that uses the latest rendering stack for Microsoft Teams to provide a more accurate preview of Adaptive Cards.<\/p>\n","protected":false},"author":43243,"featured_media":16116,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[128],"tags":[273,257,44],"class_list":["post-15980","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-teams","tag-adaptive-card-previewer","tag-adaptive-cards","tag-visual-studio-code"],"acf":[],"blog_post_summary":"<p>Learn more about this extension for Visual Studio Code that uses the latest rendering stack for Microsoft Teams to provide a more accurate preview of Adaptive Cards.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/15980","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/43243"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=15980"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/15980\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/16116"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=15980"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=15980"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=15980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}