npm install @contentstack/app-sdk

The Contentstack App SDK allows you to customize your Contentstack applications.

About @contentstack/app-sdk

The Contentstack App SDK is an essential tool for developers aiming to tailor and enhance their Contentstack applications. It is specifically designed to simplify the customization process, enabling developers to integrate unique functionalities and features into their Contentstack environment efficiently. With this SDK, users can create custom widgets, dashboards, and other components that are seamlessly integrated into the Contentstack UI, providing a more personalized and optimized content management experience. The flexibility and ease of use make it a valuable asset for developers looking to extend the capabilities of their Contentstack applications without compromising on performance.

To begin using the Contentstack App SDK in your project, you can easily integrate it by running the command npm install @contentstack/app-sdk. This installation process is swift and sets up your development environment to leverage the SDK's features immediately. Once installed, developers can access a wide range of APIs and tools provided by the SDK to develop custom application solutions, enhance existing functionalities, or even integrate third-party services. This makes it incredibly straightforward to not only install but also to start reaping the benefits of enhanced customization and functionality in your Contentstack projects.

The Contentstack App SDK offers developers a robust set of tools and APIs to effectively customize and extend the functionalities of their Contentstack applications. By leveraging this SDK, developers can ensure that their content management systems are not only more aligned with their operational needs but also more engaging and user-friendly for editors and content managers. The ability to create tailored solutions that can integrate seamlessly with Contentstack’s core features allows for a more streamlined and efficient content management process, ultimately enhancing productivity and user experience. This SDK is an indispensable tool for any developer looking to push the boundaries of what can be achieved with Contentstack’s modular architecture.

More from contentstack

contentstack npm packages

Find the best node modules for your project.

Search npm

contentstack

Contentstack Javascript...

Read more
,

@contentstack/utils

Contentstack utilities for...

Read more
,

@contentstack/live-preview-utils

Contentstack provides the Live Preview SDK to establish a communication channel between the various...

Read more
,

@contentstack/management

The Content Management API is used to manage the content of your Contentstack...

Read more
,

@contentstack/json-rte-serializer

This Package converts Html Document to Json and vice-versa...

Read more
,

@berlitz/gatsby-source-contentstack

Gatsby source plugin for building websites using Contentstack as a data...

Read more
,

@contentstack/cli-cm-import

Contentstack CLI plugin to import content into...

Read more
,

@contentstack/cli-command

Contentstack CLI plugin for...

Read more
,

@contentstack/ui-extensions-sdk

The Extensions SDK allows you to extend Contentstack’s UI by helping you create Custom Fields,...

Read more
,

gatsby-source-contentstack

Gatsby source plugin for building websites using Contentstack as a data...

Read more
,

@contentstack/app-sdk

The Contentstack App SDK allows you to customize your Contentstack applications...

Read more
,

@contentstack/cli-cm-export

Contentstack CLI plugin to export content from...

Read more

Dependencies

Core dependencies of this npm package and its dev dependencies.

loader-utils, post-robot, wolfy87-eventemitter, @babel/core, @babel/preset-env, @testing-library/jest-dom, @types/chai, @types/jest, @types/react, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, babel-loader, chai, css-loader, eslint, eslint-plugin-only-warn, husky, jest, lint-staged, react, slate, ts-jest, ts-loader, ts-node, typedoc, typedoc-plugin-rename-defaults, typescript, webpack, webpack-cli, webpack-dev-server

Documentation

A README file for the @contentstack/app-sdk code repository. View Code

Contentstack App SDK Readme

The Contentstack App SDK allows you to customize your applications. This document will help you integrate the App SDK with your application.

Getting started

To include the App SDK in your project, you need to run the following command:

npm install @contentstack/app-sdk

Alternatively, you can use the following command within the script tag to install the App SDK:

<script src="https://unpkg.com/@contentstack/app-sdk@2.0.0/dist/index.js"></script>

Initializing the App SDK

To Initialize the App SDK you need to run the following command:

ContentstackAppSdk.init().then(function (appSdk) {
    // add code here
});

For more information, please refer to our App SDK API Reference document.

Download the Boilerplate

You can extend or customize the functionality of Contentstack CMS with Marketplace apps. To simplify and speed up the building process, boilerplates describe repetitive elements in a project. This boilerplate will help you build custom applications for your organization or stack.

Download the boilerplate.

UI Locations and Examples

UI Locations allow you to extend Contentstack's functionality. Through these UI locations, you can customize Contentstack's default behavior and UI. Integration of third-party applications is possible using different UI locations.

The Contentstack App SDK currently supports the following UI Locations:

Custom Field Location

Custom Field Location allows you to create custom fields that can be used in your content types. You can integrate with various business applications, such as Bynder, Cloudinary, Shopify, by adding them as a custom field to your stack's content type.

Dashboard Location

With the Dashboard Location, you can create widgets for your stack dashboard. Integration with Google Analytics provides meaningful insights about your website.

Asset Sidebar Location

Using the Asset Sidebar Location, you can create customized sidebar widgets to extend the functionality of your assets.

Manage, transform, and optimize your stack's assets efficiently using the Image Preset Builder.

App Config Location

App Config UI Location allows you to manage all the app settings centrally. Once configured, all other locations (where the app is installed) can access these settings.

RTE Location

The RTE Location allows you to create custom plugins to expand the functionality of your JSON Rich Text Editor. Using the Audience and Variables plugin, you can tailor your content as per your requirements.

Sidebar Location

The Sidebar Location provides powerful tools for analyzing and recommending ideas for your entry. Use the Smartling sidebar location to help translate your content.

Field Modifier Location

The Field Modifier Location is a type of UI location which extends the capabilities of entry fields. With the Field Modifier UI location, you can allow the different apps to appear on defined field data types such as Text, Number, JSON, Boolean, File, Reference fields etc.

Full Page Location

The Full Page location is a type of UI location that lets you view full page apps such as Release Preview within your stack.

Using Contentstack styles

Install the Venus UI library package to style your app according to the Contentstack UI:

npm i @contentstack/venus-components --save

For more information on styling your application, refer to our style guide.

More information

App SDK v2.0.0 Migration Guide

This guide provides instructions for migrating your application to App SDK version 2.0.0. It covers changes in metadata responses, field modifier and full page location updates, and the transition from the _extension property to _uiLocation. If you are upgrading your app to the latest version, make sure to follow these steps for a smooth transition.

Read the Migration Guide

License

Licensed under MIT.