Microsoft Adaptive Card Previewer for VS Code

The Microsoft team is delighted to announce the debut preview of the Microsoft Adaptive Card Previewer, a valuable addition to the developer toolbox. Lightweight yet profound, Adaptive Cards have become a key element for Bots and Message extensions on the Microsoft Teams platform. Their design enables developers to generate User Interface (UI) effortlessly by defining properties in JSON objects, which simplifies the UX creation process.

▶︎ Adaptive Cards Templating

▶︎ Adaptive Card Previewer (Microsoft Marketplace)

The process of creating these cards involves a tool named Adaptive Card Designers. However, the process required the developer to often switch contexts, pasting the JSON files of the card into code editors and back, making the process somewhat cumbersome.

With the introduction of the Microsoft Adaptive Card Previewer, which is an extension for Visual Studio Code that uses the most recent rendering stack for Microsoft Teams, developers can appreciate a more precise preview of Adaptive Cards. It manifests changes live, enabling developers to toggle between different themes, including light, dark, and high contrast.

Key Features of Adaptive Card Previewer for Visual Studio Code

• Gain an instant preview of adaptive cards within VS Code editor using CodeLens or Command Palette.

• Design with confidence by switching between distinct themes (Light / Dark/ High Contrast) to preview your adaptive cards.

• A unique Adaptive Card template language feature, which separates the data from the layout.

• Teams Toolkit offers a seamless integration with Just-In-Time installation of the Adaptive Card Previewer.

• The option to configure the default theme in Visual Studio Code is through the extension settings of the adaptiveCardPreviewer.defaultTheme.

However, it is crucial to note that the Adaptive Card Previewer is currently does not support a number of features such as People picker, Dynamic type-ahead search, User mention, Image stage view and Full-width control.

Microsoft is eager for you to give the Adaptive Card Previewer a try and share your experiences. It's readily available for download from the marketplace or you can peruse through their documentation for more information. Possible feedback and suggestions for new features can easily be communicated via GitHub or directly by reaching out to their dedicated team at ttkfeedback@microsoft.com.

A Deeper Dive Into The Previewer

The Adaptive Card Previewer, Microsoft’s latest tool, is a significant advancement in developers’ hands. Developers, UI/UX designers, and all others who take part in the creative process of an application will find the features it offers, such as instant previews, theme switch, template language, and seamless integration with Teams Toolkit, are a boon. Its contribution can be best understood as a bridge that helps navigate between design and code effortlessly without constant switching, thereby providing a more efficient way to iterate UI/UX design. Its limitations are minor, and it is expected that Microsoft will address them as technology evolves. Thus, the Adaptive Card Previewer represents a leap forward in UI/UX design in the digital age.