Home

Awesome

Adaptive Cards

logo

Adaptive Cards are a new way for developers to exchange content in a common and consistent way. Get started today by putting Adaptive Cards into Microsoft Teams, Outlook Actionable Messages, Cortana Skills, or Windows Timeline -- or render cards inside your own apps by using our SDKs.

Dive in

Install and Build

Adaptive Cards are designed to render anywhere that your users are. The following native platform renderers are under development right now.

PS: Latest Build Status is against main branch.

PlatformLatest ReleaseSourceDocsLatest Build Status
JavaScriptnpm installSourceDocsBuild Status
.NETNuget installSourceDocsBuild status
.NET WPFNuget installSourceDocsBuild status
.NET HTMLNuget installSourceDocsBuild status
Windows UWPNuget installSourceDocsBuild Status
AndroidMaven CentralSourceDocsBuild status
iOSCocoaPodsSourceDocsBuild status
Card Designernpm installSourceDocsBuild Status

Release schedule

We release the Adaptive Cards products on the third week of each month, assuming there are updates. Please see the table below for the most recent and upcoming release dates.

ProductLast Release DateNext Release Date
Website4/4/20245/29/2024
Designer5/1/20246/17/2024
JavaScript Renderer5/23/20246/17/2024
JavaScript Renderer Beta4/9/2023-
JavaScript Templating9/16/20226/17/2024
XAML Renderer2/2/20243/2/2024
XAML Object Model2/2/20243/2/2024
WinUI 3 Renderer2/2/20243/2/2024
WinUI 3 Object Model2/2/20243/2/2024
C++/WinRT Templating2/2/20243/2/2024
C#/WinRT Templating2/2/20243/2/2024
.NET Renderer12/1/20227/17/2023
.NET Templating3/7/20237/17/2023

Note: These release dates are subject to change based on availability and active development of each product.

Code format

We require the C++ code inside this project to follow the clang-format. If you change them, please make sure your changed files are formatted correctly.

Make sure clang-format version 12.0.0 and above version is used.

IDE integration

ClangFormat describes a set of tools that are built on top of LibFormat. It can support your workflow in a variety of ways including a standalone tool and editor integrations. For details, refer to https://clang.llvm.org/docs/ClangFormat.html

Format with script

Two scripts are provided to help you format files.

If it's the first time to run the script, make sure clang-format version 12.0.0 or above in the output. Otherwise you may need to upgrade Visual Studio or use your own clang-format binaries.

[clang-format] Version is:
clang-format version 12.0.0

Make sure npm install is run before.

Use Git pre-commit hook

git pre-commit hook is an optional process. When you run git commit, it will automatically do the format check and auto fix the format if error detected.

First make sure clang-format binary is installed in your dev enviroment. Then modify scripts/hooks/pre-commit to make sure clangFormat is point to the correct path. And finally setup the git hook.

Two ways to setup the hook:

  1. Copy scripts/hooks/pre-commit to .git/hooks
  2. git config --local core.hooksPath scripts/hooks

End User License Agreement for our binary packages

Consumption of the AdaptiveCards binary packages are subject to the Microsoft EULA (End User License Agreement). Please see the relevant terms as listed below:

NOTE: All of the source code, itself, made available in this repo as well as our NPM packages, continue to be governed by the open source MIT license.

Community SDKs

The following SDKs are lovingly maintained by the Adaptive Cards community. Their contributions are sincerely appreciated! 🎉

PlatformInstallRepoMaintainer
ReactNativenpm installGitHubBigThinkCode
Pic2CardGitHubBigThinkCode
Vue.jsnpm installGitHubTim Cadenbach

Contribute

There are many ways to contribute to Adaptive Cards.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Supported Features

FeatureSchema VersionPlatformParsingRendering
Action.OpenUrlv1.0All:white_check_mark::white_check_mark:
Action.ShowCardv1.0All:white_check_mark::white_check_mark:
Action.Submitv1.0All:white_check_mark::white_check_mark:
Columnv1.0All:white_check_mark::white_check_mark:
ColumnSetv1.0All:white_check_mark::white_check_mark:
Containerv1.0All:white_check_mark::white_check_mark:
Factv1.0All:white_check_mark::white_check_mark:
FactSetv1.0All:white_check_mark::white_check_mark:
Imagev1.0All:white_check_mark::white_check_mark:
ImageSetv1.0All:white_check_mark::white_check_mark:
Input.ChoiceSetv1.0All:white_check_mark::white_check_mark:
Input.Datev1.0All:white_check_mark::white_check_mark:
Input.Numberv1.0All:white_check_mark::white_check_mark:
Input.Textv1.0All:white_check_mark::white_check_mark:
Input.Timev1.0All:white_check_mark::white_check_mark:
Input.Togglev1.0All:white_check_mark::white_check_mark:
SelectActionv1.0All:white_check_mark::white_check_mark:
TextBlockv1.0All:white_check_mark::white_check_mark:
Explicit Image Dimensionv1.1All:white_check_mark::white_check_mark:
Background Colorv1.1All:white_check_mark::white_check_mark:
Vertical Content Alignmentv1.1All:white_check_mark::white_check_mark:
Action Iconv1.1All:white_check_mark::white_check_mark:
Action Stylev1.2All:white_check_mark::white_check_mark:
Toggle Visibilityv1.2All:white_check_mark::white_check_mark:
ActionSetv1.2All:white_check_mark::white_check_mark:
Fallbackv1.2All:white_check_mark::white_check_mark:
Container BackgroundImagev1.2All:white_check_mark::white_check_mark:
Container MinHeightv1.2All:white_check_mark::white_check_mark:
Container Bleedv1.2All:white_check_mark::white_check_mark:
Container Stylev1.2All:white_check_mark::white_check_mark:
Image Data Uriv1.2All:white_check_mark::white_check_mark:
Action Icon Data Uriv1.2All:white_check_mark::white_check_mark:
Input.Text Inline Actionv1.2All:white_check_mark::white_check_mark:
TextBlock FontTypev1.2All:white_check_mark::white_check_mark:
RichTextBlockv1.2All:white_check_mark::white_check_mark:
Input Labelv1.3All:white_check_mark::white_check_mark:
Input ErrorMessagev1.3All:white_check_mark::white_check_mark:
AssociatedInputsv1.3All:white_check_mark::white_check_mark:
RichTextBlock UnderLinev1.3All:white_check_mark::white_check_mark:
Action.Refreshv1.4All:white_check_mark::white_check_mark:
AdaptiveCard Authenticationv1.4All:white_check_mark::white_check_mark:
Action.Executev1.4All:white_check_mark::white_check_mark:
Action IsEnabledv1.5JS:white_check_mark::white_check_mark:
Action IsEnabledv1.5iOS:white_check_mark::white_check_mark:
Action IsEnabledv1.5Android:white_check_mark::white_check_mark:
Action IsEnabledv1.5XAML:white_check_mark::white_check_mark:
Action IsEnabledv1.5.NET:white_check_mark::x:
Action Modev1.5JS:white_check_mark::white_check_mark:
Action Modev1.5iOS:white_check_mark::white_check_mark:
Action Modev1.5Android:white_check_mark::white_check_mark:
Action Modev1.5XAML:white_check_mark::white_check_mark:
Action Modev1.5.NET:white_check_mark::x:
Action/SelectAction ToolTipv1.5JS:white_check_mark::white_check_mark:
Action/SelectAction ToolTipv1.5iOS:white_check_mark::white_check_mark:
Action/SelectAction ToolTipv1.5Android:white_check_mark::white_check_mark:
Action/SelectAction ToolTipv1.5XAML:white_check_mark::white_check_mark:
Action/SelectAction ToolTipv1.5.NET:white_check_mark::x:
Input.ChoiceSet Filtered Stylev1.5JS:white_check_mark::white_check_mark:
Input.ChoiceSet Filtered Stylev1.5iOS:white_check_mark::white_check_mark:
Input.ChoiceSet Filtered Stylev1.5Android:white_check_mark::white_check_mark:
Input.ChoiceSet Filtered Stylev1.5XAML:white_check_mark::white_check_mark:
Input.ChoiceSet Filtered Stylev1.5.NET:white_check_mark::x:
Input.Text Password Stylev1.5JS:white_check_mark::white_check_mark:
Input.Text Password Stylev1.5iOS:white_check_mark::white_check_mark:
Input.Text Password Stylev1.5Android:white_check_mark::white_check_mark:
Input.Text Password Stylev1.5XAML:white_check_mark::white_check_mark:
Input.Text Password Stylev1.5.NET:white_check_mark::x:
TextBlock Heading Stylev1.5JS:white_check_mark::white_check_mark:
TextBlock Heading Stylev1.5iOS:white_check_mark::white_check_mark:
TextBlock Heading Stylev1.5Android:white_check_mark::white_check_mark:
TextBlock Heading Stylev1.5XAML:white_check_mark::white_check_mark:
TextBlock Heading Stylev1.5.NET:white_check_mark::x:
RTLv1.5JS:white_check_mark::white_check_mark:
RTLv1.5iOS:white_check_mark::white_check_mark:
RTLv1.5Android:white_check_mark::white_check_mark:
RTLv1.5XAML:white_check_mark::white_check_mark:
RTLv1.5.NET:white_check_mark::x:
Tablev1.5JS:white_check_mark::white_check_mark:
Tablev1.5iOS:white_check_mark::white_check_mark:
Tablev1.5Android:white_check_mark::white_check_mark:
Tablev1.5XAML:white_check_mark::white_check_mark:
Tablev1.5.NET:white_check_mark::x:
Carouselv1.6JS:white_check_mark::white_check_mark:
Carouselv1.6iOS:x::x:
Carouselv1.6Android:x::x:
Carouselv1.6XAML:x::x:
Carouselv1.6.NET:x::x:
ImageSet Stacked Presentation Stylev1.6JS:white_check_mark::white_check_mark:
ImageSet Stacked Presentation Stylev1.6iOS:x::x:
ImageSet Stacked Presentation Stylev1.6Android:x::x:
ImageSet Stacked Presentation Stylev1.6XAML:x::x:
ImageSet Stacked Presentation Stylev1.6.NET:x::x:
Dynamic Type Ahead Searchv1.6JS:x::x:
Dynamic Type Ahead Searchv1.6iOS:white_check_mark::x:
Dynamic Type Ahead Searchv1.6Android:white_check_mark::x:
Dynamic Type Ahead Searchv1.6XAML:x::x:
Dynamic Type Ahead Searchv1.6.NET:x::x:
Label Positionv1.6JS:x::x:
Label Positionv1.6iOS:x::x:
Label Positionv1.6Android:x::x:
Label Positionv1.6XAML:x::x:
Label Positionv1.6.NET:x::x:
Inline Editable Input Stylev1.6JS:x::x:
Inline Editable Input Stylev1.6iOS:x::x:
Inline Editable Input Stylev1.6Android:x::x:
Inline Editable Input Stylev1.6XAML:x::x:
Inline Editable Input Stylev1.6.NET:x::x: