--- title: "Extension Starter Kit Template" slug: "extension-start-kit-template" description: "Explore the Extensions feature with the Extension Starter Kit Template, designed for Unqork developers to create and customize extensions." updated: 2025-10-28T13:46:05Z published: 2025-10-28T13:46:05Z canonical: "docs.unqork.io/extension-start-kit-template" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.unqork.io/llms.txt > Use this file to discover all available pages before exploring further. # Extension Starter Kit Template > [!NOTE] > The Extensions feature is currently in open beta. Please contact your Unqork representative for more details and access. The **Extension Starter Kit Template** provides Creators with example extension modules for understanding how to design and customize their own extensions. The starter kit includes two layout and design modules, and a demonstration module that contains extension-specific events and operations needed to begin creating an extension. > To learn more about extensions, view our [Introduction to Extensions](/v1/docs/introduction-to-extensions) article. > [!WARNING] > The Extensions feature is intended for developers who have a strong understanding of the Unqork Designer Platform, [Operations Builder](/v1/docs/introduction-to-the-operations-builder), and [Vega (v2.0) Runtime](/v1/docs/introduction-to-vega). ## Installing the **Extension Starter Kit** Template From the Unqork Marketplace To use the Extension Starter Kit Template, you must first install it in your company environment. If the starter kit has already been installed, move on to the [Creating an App From the Template](/v1/docs/extension-start-kit-template#creating-an-app-from-the-template) section. To add the Extension Starter Kit Template to your environment: 1. At the top right of the Unqork Designer Platform, click **Marketplace**. > [!NOTE] > You can also access the Unqork Marketplace at any time using the following link: [https://marketplace.unqork.io](https://marketplace.unqork.io/#/). 2. In the **Search the Listings Directory** field, enter **Extension Starter Kit**. 3. Click the **Extension Starter Kit** listing tile. 4. Click **Install to Environment**. > [!NOTE] > NOTE > > If you aren't logged in, you'll see a field for **Environment URL** and a **Login** button. Enter your environment's URL where you want to install the template. For example, `environmentname.unqork.io`. Click the **Login** button. Then, return to step four and click **Install to Environment** again. Follow the remaining steps as listed. 5. Click **Install** **Template**. Now, you can use your newly installed listing in your environment. ## Creating an App from the Template After installing the Extension Starter Kit Template from the Marketplace, Creators can generate a new application using the template tool. To create an Extension Starter Kit Template application: 1. At the top right of the Unqork Designer Platform, click **Library**. 2. Click **Templates**. The Template page displays. 3. Navigate to the **Extension Starter Kit** card. If your environment has many extensions, you might have to navigate through the paginated list. 4. Click **Create App from Template**. The Create App from Template modal displays. 5. Click the **Workspace** drop-down, select a workspace from the environment. 6. In the **App Name** field, enter a name for your Extension Starter Kit application. The **App Path** value populates based on the App Name field. 7. Click **Create App**. The new application page displays the four Extension Start Kit modules. Now, you can use your newly installed listing in your environment. ## How the Template Works The Extension Starter Kit template contains the following modules: - **Extension Design Layout Module**: An example of how an extension can be customized. Customization includes tab buttons and alignment for elements or text. - **Extension Layout Module**: The minimum design and layout required to build an extension. - **Extension Interaction Module**: A demo extension that enables Creators to view, edit, and update module JSON data. - **Extensions (Entrypoint) Module**: A placeholder module created during the templating process. This module does not affect the starter kit and can be deleted. Click on the tabs below to learn more about each module: Extension Interaction ModuleExtension Design Layout ModuleExtension Layout Module ## How the Extension Design Module Works The Extension Design module contains all the design and layout elements available to use in an extension. Creators can copy or manipulate these elements for their own extensions. Elements include: - **Horizontal Tabs**: Create two or more tabs to organize data for end-users. - **Element Alignment**: Align elements to the left, vertical center, or right. - **Element Distribution**: Distribute elements to the left, horizontal center, or right. - **Text Alignment**: Align text to the left, horizontal, or right in an element. - **Element Spacing**: Extra-Small through Extra-Large padding and gap elements. ![User interface displaying tab options for layout and spacing settings in a software application.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/extensions_designExamples.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A15Z&se=2026-11-09T04%3A51%3A15Z&sr=c&sp=r&sig=CpLZaF%2FJkZNn2q6psQlU%2BvQNkZRXm%2FlCHQzN0UAxjOI%3D) ## How the Extension Layout Module Works Every extension functions inside a modal. The Extension Layout module includes field groups for organizing and displaying an extension’s contents inside that modal. The module also includes a [Button](/v1/docs/button-component) component for closing the extension’s modal, preventing Creators from becoming stuck. ![User interface showing extension content and action buttons for interaction.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/extensions_layoutExample.webp?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A15Z&se=2026-11-09T04%3A51%3A15Z&sr=c&sp=r&sig=CpLZaF%2FJkZNn2q6psQlU%2BvQNkZRXm%2FlCHQzN0UAxjOI%3D) ## How the Extension Interaction Module Works This extension module contains examples of an extension that can retrieve, manipulate, and update data from the module it’s used on. It includes components that emit unique [events](/v1/docs/introduction-to-the-operations-builder#understanding-events) to retrieve, manipulate, and update module data. When end-users run the extension or click the extension’s buttons, the events are emitted. The Extension Interaction module includes the following functions: - Getting Component Data - Getting and Flattening (Unnesting) Component Data - Replacing Component Data - Updating Component Data - Displaying a Toast (On-Screen Notification) ### Getting (And Flattening) Component Data To manipulate a module in the Module Builder, an extension must first retrieve the module component data. For this extension example, Creators can retrieve component data as a JSON object using one of two different [Initializer](/v1/docs/initializer-component) components: - `InitGetComponents` **Initializer Component**: Uses the `EXTENSION_READY_FOR_COMPONENTS` [event](/v1/docs/introduction-to-the-operations-builder#understanding-events) to retrieve component data without modifying it. - `initGetComponentsFlat` **Initializer Component**: Uses the `EXTENSION_READY_FOR_COMPONENTS_FLAT` [event](/v1/docs/introduction-to-the-operations-builder#understanding-events) to retrieve flattened (unnested) component data. For example, components inside a [Panel](/v1/docs/panel-component) component are brought up a level. After one of the two Initializer components emits the component data as a JSON object, the `calcStringifyComponents` **Calculator** component converts the object to a string. #### Understanding the `InitGetComponents` Initializer Component This Initializer component triggers when an end-user clicks the `btnGetComponents` **Button** component. The Initializer component’s primary purpose is to retrieve the current module’s component data by using the following JSON Vega operation: ```json [  {    "name": "dataOut",    "type": "GET_PROPERTY",    "options": {      "targetKey": ["postEventTriggerKey"],      "property": "value"    }  },  {    "type": "EMIT_EVENT",    "options": {      "inputs": [        {          "targetKey": "",          "propertyPath": "",          "alias": "",          "required": false,          "silent": false,          "type": ""        }      ],      "targetKey": "",      "event": "EXTENSION_EVENT",      "payload": {        "event": "EXTENSION_READY_FOR_COMPONENTS",        "includeOperationContext": true      }    }  } ] ``` The operation includes the following parts: 1. The `GET_PROPERTY` (**Get Property**) operation targets module components using the `postEventTriggerKey` key. Then, it retrieves the component’s values. 2. The `EMIT_EVENT` (**Emit Event**) operation, which emits an [event](/v1/docs/introduction-to-the-operations-builder#understanding-events) called `EXTENSION_READY_FOR_COMPONENTS` (**Extension Ready For Components**), containing the module’s component data in its payload. 3. The payload containing the module’s data stores in the `componentsIn` **Hidden** component and becomes available to the rest of the extension. #### Understanding the `InitGetComponents` Initializer Component Similar to the **InitGetComponents** **Initializer** component, this component uses the `GET_PROPERTY` and `EMIT_EVENT` operations to retrieve component values. It uses the `EXTENSION_READY_FOR_COMPONENTS_FLAT` event to retrieve component data. Unlike the `EXTENSION_READY_FOR_COMPONENTS` [event](/v1/docs/introduction-to-the-operations-builder#understanding-events), this event flattens the structure of the component data, separating any nested components. For example, if a [Panel](/v1/docs/panel-component) component contains other components, flattening the data converts the contained (nested) components into a single-level key-value format. The Initializer component retrieves the current module’s component data by using the following JSON Vega operation: ```json [  {    "name": "dataOut",    "type": "GET_PROPERTY",    "options": {      "targetKey": ["postEventTriggerKey"],      "property": "value"    }  },  {    "type": "EMIT_EVENT",    "options": {      "inputs": [        {          "targetKey": "",          "propertyPath": "",          "alias": "",          "required": false,          "silent": false,          "type": ""        }      ],      "targetKey": "",      "event": "EXTENSION_EVENT",      "payload": {        "event": "EXTENSION_READY_FOR_COMPONENTS_FLAT",        "includeOperationContext": true      }    }  } ] ``` The operation includes the following parts: 1. The `GET_PROPERTY` (**Get Property**) operation targets module components using the `postEventTriggerKey` key. Then, it retrieves the component’s values. 2. The `EMIT_EVENT` (**Emit Event**) operation, which emits an [event](/v1/docs/introduction-to-the-operations-builder#understanding-events) called `EXTENSION_READY_FOR_COMPONENTS_FLAT` (**Extension Ready For Flattened Components**), containing the module’s flattened component data in its payload. 3. The payload containing the module’s data stores in the `componentsIn` **Hidden** component and becomes available to the rest of the extension. #### Understanding the `calcStringifyComponents` Calculator This component converts the `componentsIn` [Hidden component's](/v1/docs/hidden-component) JSON object data into a string that follows JSON syntax. This enables the data to be stored as text that can be edited by Creators in the `extentionModuleComponents` [Text Area component](/v1/docs/text-area-component). ### Replacing Component Data Creators use this part of the extension to replace all component data in the module they are editing. This method is similar to an API action in that it does not update existing data, but replaces it entirely. #### Understanding the `initReplaceComponents` Initializer The `initReplaceComponents` Initializer component performs four functions: 1. Retrieves the stringified JSON data from the `extensionModuleComponentsReplace` **Text Area** component. 2. Converts the stringified JSON into a JSON object. 3. Emits the JSON object in the `EXTENSION_READY_TO_REPLACE_COMPONENTS` [event's](/v1/docs/introduction-to-the-operations-builder#understanding-events) payload. 4. Stores the payload in the `componentsOut` [Hidden component](/v1/docs/hidden-component). The `componentsOut` key replaces the current module’s component with the value entered into the `extensionModuleComponentsReplace` **Text Area** component. The Initializer component replaces the current module’s component data by using the following JSON Vega Operation: ```json [  {    "name": "dataOut",    "type": "GET_PROPERTY",    "options": {      "targetKey": ["componentsOut"],      "property": "value"    }  },  {    "type": "EMIT_EVENT",    "options": {      "targetKey": "",      "event": "EXTENSION_EVENT",      "payload": {        "event": "EXTENSION_READY_TO_REPLACE_COMPONENTS",        "includeOperationContext": true      }    }  } ] ``` The operation breaks down into the following parts: 1. The `GET_PROPERTY` (**Get Property**) operation prepares the `EMIT_EVENT` operation to emit an event to the `componentsOut` **Hidden** component. 2. The `EMIT_EVENT` (**Emit Event**) operation, which emits an [event](/v1/docs/introduction-to-the-operations-builder#understanding-events) called `EXTENSION_READY_TO_REPLACE_COMPONENTS` (**Extension Ready To Replace Components**). This event contains the component data payload. 3. The payload containing the module’s data stores in the `componentsOut` **Hidden** component. ### Updating Component Data Instead of replacing component data, Creators can update existing values of the module’s component data. This method is similar to an API PATCH action; it updates existing data instead of replacing it. #### Understanding the `initUpdateComponents` Initializer Component Similar to the `initReplaceComponents` **Initializer** component, the `initUpdateComponents` **Initializer** component converts stringified JSON into a JSON object. Then, it emits the object in an [event](/v1/docs/introduction-to-the-operations-builder#understanding-events) (`EXTENSION_READY_TO_UPDATE_COMPONENTS`). Instead of replacing the components, this event updates the components’ individual values. The `initUpdateComponents` **Initializer** component performs the following functions: 1. Retrieves the stringified JSON data from the `extensionModuleComponentsUpdate` **Text Area** component. 2. Converts the stringified JSON into a JSON object. 3. Emits the JSON object in the `EXTENSION_READY_TO_UPDATE_COMPONENTS` [event's](/v1/docs/introduction-to-the-operations-builder#understanding-events) payload. 4. Stores the payload in the `componentsOut` [Hidden](/v1/docs/hidden-component) component. The `componentsOut` key updates the current module’s component with the value entered into the `extensionModuleComponentsReplace` **Text Area** component. The Initializer component updates the current module’s component data by using the following JSON Vega operation: ```json [  {    "name": "dataOut",    "type": "GET_PROPERTY",    "options": {      "targetKey": [        "componentsOut"      ],      "property": "value"    }  },  {    "type": "EMIT_EVENT",    "options": {      "inputs": [        {          "targetKey": "",          "propertyPath": "",          "alias": "",          "required": false,          "silent": false,          "type": ""        }      ],      "targetKey": "",      "event": "EXTENSION_EVENT",      "payload": {        "event": "EXTENSION_READY_TO_UPDATE_COMPONENTS",        "includeOperationContext": true      }    }  } ] ``` The operation includes the following parts: 1. The `GET_PROPERTY` (**Get Property**) operation prepares the `EMIT_EVENT` operation to emit an event to the `componentsOut` [Hidden](/v1/docs/hidden-component) component. 2. The `EMIT_EVENT` (**Emit Event**) operation, which emits an [event](/v1/docs/introduction-to-the-operations-builder#understanding-events) called `EXTENSION_READY_TO_UPDATE_COMPONENTS` (**Extension Ready To Replace Components**). This event contains the component data payload. 3. The payload containing the module’s data stores in the `componentsOut` **Hidden** component. ## Creating a Toast Notification A toast notification displays a bar of text at the bottom of the [Module Builder](/v1/docs/introduction-to-the-module-builder) page. This example uses a Text Field component to create the notification’s value, and an Initializer component to process that value into an [event](/v1/docs/introduction-to-the-operations-builder#understanding-events) payload. The event payload displays as a text notification at the bottom of the Module Builder screen. The `initUpdateComponents` **Initializer** component performs the following functions: 1. Retrieves the `toastContent` **Text Field** component’s value. 2. Emits the text value using an Event (`EXTENSION_READY_TO_SHOW_TOAST`) payload. ```json [  {    "name": "dataOut",    "type": "GET_PROPERTY",    "options": { "targetKey": ["toastContent"], "property": "value" }  },  {    "type": "EMIT_EVENT",    "options": {      "inputs": [        {          "targetKey": "",          "propertyPath": "",          "alias": "",          "required": false,          "silent": false,          "type": ""        }      ],      "targetKey": "",      "event": "EXTENSION_EVENT",      "payload": {        "event": "EXTENSION_READY_TO_SHOW_TOAST",        "includeOperationContext": true      }    }  } ] ``` The operation includes the following parts: 1. The `GET_PROPERTY` (**Get Property**) operation retrieves the `toastContent` **Text Field** component’s value. 2. The `EMIT_EVENT` (**Emit Event**) operation emits an [event](/v1/docs/introduction-to-the-operations-builder#understanding-events) called `EXTENSION_READY_TO_SHOW_TOAST` (**Extension Show Toast**). This event contains the toast’s text value payload. 3. The payload displays at the bottom of the page when the Creators click the `btnPopToast` **Button** component. ## Testing the Template After installing and configuring a module extension, Creators can test the example configuration in the Module Builder. ### Access the Extensions Drawer To access extensions from the Application page: 1. Open a module in the Module Builder. 2. Click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(33).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A15Z&se=2026-11-09T04%3A51%3A15Z&sr=c&sp=r&sig=CpLZaF%2FJkZNn2q6psQlU%2BvQNkZRXm%2FlCHQzN0UAxjOI%3D) (**ellipsis**) button. 3. Click **Extensions**. The Extensions drawer displays. [extensionsAccess.webm](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/extensionsAccess.webm?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A15Z&se=2026-11-09T04%3A51%3A15Z&sr=c&sp=r&sig=CpLZaF%2FJkZNn2q6psQlU%2BvQNkZRXm%2FlCHQzN0UAxjOI%3D) > [!TIP] > To learn more about Module Builder Settings, view our [Module Builder Settings Sidebar Option](https://docs.unqork.io/Content/A01-ModEditor-General/A01015-ModEditor_Settings_Sidebar_Options.htm) article. ### Run the Extension To run an extension from the [Extension Drawer](/v1/docs/module-extensions): 1. Navigate to or search for one of the three starter extensions in the list. 2. Click **Run**. The extension displays a modal or executes the extension’s module contents. [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/extensions_runExtension.webm?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A15Z&se=2026-11-09T04%3A51%3A15Z&sr=c&sp=r&sig=CpLZaF%2FJkZNn2q6psQlU%2BvQNkZRXm%2FlCHQzN0UAxjOI%3D) ### Test the Extension Test every setting and field of the extension to verify each function performs as expected. If an error or issue occurs, return to the extension’s module and adjust the configuration. Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. A modal is a window that appears on top of the content you are currently viewing. JSON (JavaScript Object Notation) is an open standard file and data interchange format. Unqork uses JSON for submission (record) data. End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. A key-value pair is a fundamental data structure where a unique "key" is associated with a specific "value," used for organizing and retrieving data efficiently, like in dictionaries or databases. An object is a type of data structure that represents a single, self-contained entity that acts as a container for the characteristics of that entity. APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. ## Related - [Introduction to Extensions](/introduction-to-extensions.md) - [Module Extensions Drawer](/module-extensions.md)