A Strong Performer in The Forrester Wave™: Digital Experience Platforms, Q4 2025
CS-log-dark.svg

Developer Tools App Installation Guide

The Contentstack Developer Tools app enhances your development workflow by providing code snippets for content types and entries directly within the CMS.

This app supports two UI locations; the Entry Sidebar and the Content Type Sidebar. With the Content Type Sidebar, you can generate TypeScript code for content types and receive type definitions for API responses.

In the Entry Sidebar, you can select your preferred programming language to generate SDK code snippets for individual entries or retrieve snippets for all entries within a content type. Additionally, the app provides a JSON View, offering a clear and structured visualization of the API response, making it easier to analyze and work with the data.

The Contentstack Marketplace lets you install the Developer Tools app and use it in the content type and entries of a content type within the stack.

Prerequisites

This is a step-by-step guide to install and configure Developer Tools within your stack.

Steps for Execution

  1. Install and Configure Developer Tools in Marketplace
  2. Use Developer Tools within your Stack

  1. Install and Configure Developer Tools in Marketplace

    To install the app, log in to your Contentstack account and follow the steps:

    1. In the left navigation panel, click the Marketplace icon.
      Click to enlarge
    2. Click Apps from the left panel.
    3. Within the Marketplace, you can see the available apps. Hover over the Developer Tools app and click Install.
      Click to enlarge
    4. In the popup window, select the stack where you want to install the Developer Tools app, accept the Terms of Service, and click the Install button.
      Click to enlarge
    5. On the UI Locations tab, you can see the predefined app locations. You can use the toggle button corresponding to each UI location to enable or disable it based on your requirements.
      Click to enlarge

      Additional ResourceFor more information, refer to the Entry Sidebar and Content Type Sidebar UI Locations documentation.

    6. Click Open Stack to start using the Developer Tools app.

      NoteNo additional configuration is required.

  2. Use Developer Tools within your Stack

    To use the Developer Tools app within your stack, follow the steps given below:

    1. Content Type Sidebar

      To use the Developer Tools app in the Content Type Sidebar, open your existing content type or create a new one.

      NoteIf you add or remove fields in the content type, then save the content type before generating the code.

      1. In the right navigation panel, click Apps, and then select the Developer Tools app.
        Click to enlarge
      2. In the Content Type Sidebar, you can generate the code by clicking the Generate code button. The code format is set as Typescript.
        Click to enlarge
      3. The code gets generated. You can also view the time when the code was generated.
        Click to enlarge
      4. If you want to regenerate the code, click the Regenerate Code button.
        Click to enlarge

        You can scroll and view the code by clicking the Scroll to Top and Scroll to Bottom icons, and click the Copy icon to copy the code.

        Click to enlarge

        You can also view the code block by clicking the Expand view icon.

        Click to enlarge

    2. Entry Sidebar

      To use the Developer Tools app in the Entry Sidebar, open your existing entry or create a new one.

      NoteIf you add, edit, or remove any data in the entry, make sure to save it before copying the code.

      1. In the right navigation panel, select Apps and then select Developer Tools.
        Click to enlarge
      2. In the Entry Sidebar, you can view the code for the current entry and all entries of the content type, by default, in the API Details mode.
        Click to enlarge
      3. Click the Select Platform drop-down to select a programming language of your choice.
        Click to enlarge
      4. To copy the code of the current entry, click the Copy icon in the Get this Entry section.
        Click to enlarge
      5. To copy the code for all entries of the content type, click the Copy icon in the Get all Entries section.
        Click to enlarge
      6. Click the JSON View tab to view the current entry code in the JSON format. To copy the JSON code, click the Copy icon.
        Click to enlarge
      7. The code samples are updated based on the environments. Click the App Settings icon to modify the environments for the code snippets.
        Click to enlarge

        You can also expand the code view by clicking the Expand View icon.

        Click to enlarge