npm install adaptivecards

Adaptive Cards Javascript library for HTML Clients

About adaptivecards

Adaptive Cards are a revolutionary tool for developers looking to enhance their applications with a consistent and interactive user interface. This open-source library allows for the creation of card-based UI elements that can easily be integrated across different platforms, ensuring a seamless user experience. The key purpose of the Adaptive Cards module is to provide a straightforward way to design and implement interactive cards that can display content and accept user input, without having to worry about the underlying platform-specific details. This flexibility not only speeds up development processes but also improves the maintainability and scalability of applications.

To begin using Adaptive Cards in your project, you can simply run the command npm install adaptivecards. This command integrates the Adaptive Cards library into your Node.js application, making it ready to use immediately. With Adaptive Cards installed, developers can leverage a wide range of features like customizable elements, dynamic content, and input forms, all of which are designed to operate across different devices and operating systems. This capability makes it an ideal choice for projects requiring a high level of interaction and user engagement, such as chatbots, notification systems, and more complex data-driven applications.

One of the most significant benefits of using Adaptive Cards is their compatibility with major industry leaders and services, such as Microsoft Teams, Outlook, and more. This compatibility ensures that developers can deploy Adaptive Cards in environments where their applications are most likely to reach their target audience. Moreover, Adaptive Cards support a schema that allows developers to specify exactly how cards are rendered, thus maintaining visual consistency across different platforms. This approach not only enhances the user experience but also aligns with modern design principles, making applications more appealing and accessible to users worldwide.

More from microsoft

microsoft npm packages

Find the best node modules for your project.

Search npm

tslib

Runtime library for TypeScript helper...

Read more
,

typescript

TypeScript is a language for application scale JavaScript...

Read more
,

pyright

Type checker for the Python...

Read more
,

adaptivecards

Adaptive Cards Javascript library for HTML...

Read more
,

react-native-macos

React Native for...

Read more
,

@microsoft/tiktokenizer

Tokenizer for OpenAI large language models...

Read more

Documentation

A README file for the adaptivecards code repository. View Code

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.

Platform Latest Release Source Docs Latest Build Status
JavaScript npm install Source Docs Build Status
.NET Nuget install Source Docs Build status
.NET WPF Nuget install Source Docs Build status
.NET HTML Nuget install Source Docs Build status
Windows UWP Nuget install Source Docs Build Status
Android Maven Central Source Docs Build status
iOS CocoaPods Source Docs Build status
Card Designer npm install Source Docs Build 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.

Product Last Release Date Next Release Date
Website 3/18/2024 4/22/2024
Designer 1/31/2023 7/17/2023
JavaScript Renderer 6/23/2023 7/17/2023
JavaScript Renderer Beta 4/9/2023 7/17/2023
JavaScript Templating 9/16/2022 7/17/2023
XAML Renderer 2/2/2024 3/2/2024
XAML Object Model 2/2/2024 3/2/2024
WinUI 3 Renderer 2/2/2024 3/2/2024
WinUI 3 Object Model 2/2/2024 3/2/2024
C++/WinRT Templating 2/2/2024 3/2/2024
C#/WinRT Templating 2/2/2024 3/2/2024
.NET Renderer 12/1/2022 7/17/2023
.NET Templating 3/7/2023 7/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! 🎉

Platform Install Repo Maintainer
ReactNative npm install GitHub BigThinkCode
Pic2Card GitHub BigThinkCode
Vue.js npm install GitHub Tim 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

Feature Schema Version Platform Parsing Rendering
Action.OpenUrl v1.0 All :white_check_mark: :white_check_mark:
Action.ShowCard v1.0 All :white_check_mark: :white_check_mark:
Action.Submit v1.0 All :white_check_mark: :white_check_mark:
Column v1.0 All :white_check_mark: :white_check_mark:
ColumnSet v1.0 All :white_check_mark: :white_check_mark:
Container v1.0 All :white_check_mark: :white_check_mark:
Fact v1.0 All :white_check_mark: :white_check_mark:
FactSet v1.0 All :white_check_mark: :white_check_mark:
Image v1.0 All :white_check_mark: :white_check_mark:
ImageSet v1.0 All :white_check_mark: :white_check_mark:
Input.ChoiceSet v1.0 All :white_check_mark: :white_check_mark:
Input.Date v1.0 All :white_check_mark: :white_check_mark:
Input.Number v1.0 All :white_check_mark: :white_check_mark:
Input.Text v1.0 All :white_check_mark: :white_check_mark:
Input.Time v1.0 All :white_check_mark: :white_check_mark:
Input.Toggle v1.0 All :white_check_mark: :white_check_mark:
SelectAction v1.0 All :white_check_mark: :white_check_mark:
TextBlock v1.0 All :white_check_mark: :white_check_mark:
Explicit Image Dimension v1.1 All :white_check_mark: :white_check_mark:
Background Color v1.1 All :white_check_mark: :white_check_mark:
Vertical Content Alignment v1.1 All :white_check_mark: :white_check_mark:
Action Icon v1.1 All :white_check_mark: :white_check_mark:
Action Style v1.2 All :white_check_mark: :white_check_mark:
Toggle Visibility v1.2 All :white_check_mark: :white_check_mark:
ActionSet v1.2 All :white_check_mark: :white_check_mark:
Fallback v1.2 All :white_check_mark: :white_check_mark:
Container BackgroundImage v1.2 All :white_check_mark: :white_check_mark:
Container MinHeight v1.2 All :white_check_mark: :white_check_mark:
Container Bleed v1.2 All :white_check_mark: :white_check_mark:
Container Style v1.2 All :white_check_mark: :white_check_mark:
Image Data Uri v1.2 All :white_check_mark: :white_check_mark:
Action Icon Data Uri v1.2 All :white_check_mark: :white_check_mark:
Input.Text Inline Action v1.2 All :white_check_mark: :white_check_mark:
TextBlock FontType v1.2 All :white_check_mark: :white_check_mark:
RichTextBlock v1.2 All :white_check_mark: :white_check_mark:
Input Label v1.3 All :white_check_mark: :white_check_mark:
Input ErrorMessage v1.3 All :white_check_mark: :white_check_mark:
AssociatedInputs v1.3 All :white_check_mark: :white_check_mark:
RichTextBlock UnderLine v1.3 All :white_check_mark: :white_check_mark:
Action.Refresh v1.4 All :white_check_mark: :white_check_mark:
AdaptiveCard Authentication v1.4 All :white_check_mark: :white_check_mark:
Action.Execute v1.4 All :white_check_mark: :white_check_mark:
Action IsEnabled v1.5 JS :white_check_mark: :white_check_mark:
Action IsEnabled v1.5 iOS :white_check_mark: :white_check_mark:
Action IsEnabled v1.5 Android :white_check_mark: :white_check_mark:
Action IsEnabled v1.5 XAML :white_check_mark: :white_check_mark:
Action IsEnabled v1.5 .NET :white_check_mark: :x:
Action Mode v1.5 JS :white_check_mark: :white_check_mark:
Action Mode v1.5 iOS :white_check_mark: :white_check_mark:
Action Mode v1.5 Android :white_check_mark: :white_check_mark:
Action Mode v1.5 XAML :white_check_mark: :white_check_mark:
Action Mode v1.5 .NET :white_check_mark: :x:
Action/SelectAction ToolTip v1.5 JS :white_check_mark: :white_check_mark:
Action/SelectAction ToolTip v1.5 iOS :white_check_mark: :white_check_mark:
Action/SelectAction ToolTip v1.5 Android :white_check_mark: :white_check_mark:
Action/SelectAction ToolTip v1.5 XAML :white_check_mark: :white_check_mark:
Action/SelectAction ToolTip v1.5 .NET :white_check_mark: :x:
Input.ChoiceSet Filtered Style v1.5 JS :white_check_mark: :white_check_mark:
Input.ChoiceSet Filtered Style v1.5 iOS :white_check_mark: :white_check_mark:
Input.ChoiceSet Filtered Style v1.5 Android :white_check_mark: :white_check_mark:
Input.ChoiceSet Filtered Style v1.5 XAML :white_check_mark: :white_check_mark:
Input.ChoiceSet Filtered Style v1.5 .NET :white_check_mark: :x:
Input.Text Password Style v1.5 JS :white_check_mark: :white_check_mark:
Input.Text Password Style v1.5 iOS :white_check_mark: :white_check_mark:
Input.Text Password Style v1.5 Android :white_check_mark: :white_check_mark:
Input.Text Password Style v1.5 XAML :white_check_mark: :white_check_mark:
Input.Text Password Style v1.5 .NET :white_check_mark: :x:
TextBlock Heading Style v1.5 JS :white_check_mark: :white_check_mark:
TextBlock Heading Style v1.5 iOS :white_check_mark: :white_check_mark:
TextBlock Heading Style v1.5 Android :white_check_mark: :white_check_mark:
TextBlock Heading Style v1.5 XAML :white_check_mark: :white_check_mark:
TextBlock Heading Style v1.5 .NET :white_check_mark: :x:
RTL v1.5 JS :white_check_mark: :white_check_mark:
RTL v1.5 iOS :white_check_mark: :white_check_mark:
RTL v1.5 Android :white_check_mark: :white_check_mark:
RTL v1.5 XAML :white_check_mark: :white_check_mark:
RTL v1.5 .NET :white_check_mark: :x:
Table v1.5 JS :white_check_mark: :white_check_mark:
Table v1.5 iOS :white_check_mark: :white_check_mark:
Table v1.5 Android :white_check_mark: :white_check_mark:
Table v1.5 XAML :white_check_mark: :white_check_mark:
Table v1.5 .NET :white_check_mark: :x:
Carousel v1.6 JS :white_check_mark: :white_check_mark:
Carousel v1.6 iOS :x: :x:
Carousel v1.6 Android :x: :x:
Carousel v1.6 XAML :x: :x:
Carousel v1.6 .NET :x: :x:
ImageSet Stacked Presentation Style v1.6 JS :white_check_mark: :white_check_mark:
ImageSet Stacked Presentation Style v1.6 iOS :x: :x:
ImageSet Stacked Presentation Style v1.6 Android :x: :x:
ImageSet Stacked Presentation Style v1.6 XAML :x: :x:
ImageSet Stacked Presentation Style v1.6 .NET :x: :x:
Dynamic Type Ahead Search v1.6 JS :x: :x:
Dynamic Type Ahead Search v1.6 iOS :white_check_mark: :x:
Dynamic Type Ahead Search v1.6 Android :white_check_mark: :x:
Dynamic Type Ahead Search v1.6 XAML :x: :x:
Dynamic Type Ahead Search v1.6 .NET :x: :x:
Label Position v1.6 JS :x: :x:
Label Position v1.6 iOS :x: :x:
Label Position v1.6 Android :x: :x:
Label Position v1.6 XAML :x: :x:
Label Position v1.6 .NET :x: :x:
Inline Editable Input Style v1.6 JS :x: :x:
Inline Editable Input Style v1.6 iOS :x: :x:
Inline Editable Input Style v1.6 Android :x: :x:
Inline Editable Input Style v1.6 XAML :x: :x:
Inline Editable Input Style v1.6 .NET :x: :x: