nocodb/packages/noco-docs/docs/160.developer-resources/.030.extensions/010.developing-extensions.md

title	description	tags	keywords
Developing Extensions	Learn how to build extensions for NocoDB.	[Extension Developer]	[NocoDB extension create extension build extension]

NocoDB Extensions

NocoDB extensions allow users to customize and expand the platform to meet specific needs, enabling seamless integration with third-party services and the addition of custom functionalities. Extensions can be built using JavaScript & Vue.js, providing a flexible way to add new features to your NocoDB instance.

Getting Started

To start building extensions for NocoDB, you need to set up a local development environment. Follow the Development Setup guide to get everything configured. Once your environment is ready, you can begin creating your first extension.

Creating a New Extension

Extensions are frontend components loaded into NocoDB. You can create a new extension by following these steps:

1. Create the Extension Directory

Create a new folder inside the packages/nc-gui/extensions directory. This folder will host all the files related to your extension.

2. Define the Manifest File

In your new folder, create a manifest.json file that describes the extension and stores all the metadata about it. Here's a sample manifest.json file:

{
  "id": "nc-data-exporter",
  "title": "Data Exporter",
  "subTitle": "Asynchronous CSV downloads with real-time notifications.",
  "description": "data-exporter/description.md",
  "entry": "data-exporter",
  "version": "0.1",
  "iconUrl": "data-exporter/assets/icon.svg",
  "publisher": {
    "name": "NocoDB",
    "email": "contact@nocodb.com",
    "url": "https://www.nocodb.com",
    "icon": {
      "src": "data-exporter/assets/publisher-icon.svg",
      "width": 24,
      "height": 24
    }
  },
  "links": [
    {
      "title": "Documentation",
      "href": "https://docs.nocodb.com/extensions/data-exporter"
    }
  ],
  "config": {
    "modalSize": "sm",
    "contentMinHeight": "310px"
  }
}

Manifest File Properties

1. id (string, required)

   • A unique identifier for the extension (e.g., "nc-data-exporter").

2. title (string, required)

   • The name of the extension as it will appear within NocoDB (e.g., "Data Exporter").

3. subTitle (string, optional)

   • A brief subtitle providing additional context or details, such as functionality or usage (e.g., "Asynchronous CSV downloads with real-time notifications.").

4. description (string, required)

   • Path to a Markdown file that provides a detailed description of the extension (e.g., "data-exporter/description.md").

5. entry (string, required)

   • The entry point for the extension, usually matching the folder name (e.g., "data-exporter").

6. version (string, required)

   • The version number of the extension. (e.g., "0.1").

7. iconUrl (string, required)

   • The path to the extension's main icon, typically a .png or .svg file (e.g., "data-exporter/assets/icon.svg").

8. publisher (object, required)

   • Contains information about the extension publisher.
   • name (string, required): Publisher's name (e.g., "NocoDB").
   • email (string, required): Publisher’s contact email (e.g., "contact@nocodb.com").
   • url (string, optional): Publisher’s website (e.g., "https://www.nocodb.com").
   • icon (object, optional): Contains additional icon properties for the publisher:
     • src (string, required): Path to the publisher icon file (e.g., "csv-import-ee/assets/publisher-icon.svg").
     • width and height (integer, optional): Dimensions for the icon display.

9. links (array of objects, optional)

   • Array of additional links related to the extension. Each link object can include:
     • title (string, required): Title of the link (e.g., "Documentation").
     • href (string, required): URL of the linked resource (e.g., "https://docs.nocodb.com/extensions/data-exporter").

10. config (object, optional)

• Configuration settings for the extension’s UI.
• modalSize (string, optional): Sets the modal size (e.g., 'xs' | 'sm' | 'md' | 'lg').
• contentMinHeight (string, optional): Specifies minimum height for content within the modal (e.g., "310px").

3. Create the Component File

Inside your extension folder, create an index.vue file. This file contains the Vue component that defines the UI and functionality of your extension.

The index.vue file should include the standard sections for a Vue component: , , and . Here’s a basic example to get you started:

<script setup lang="ts">
const { extension } = useExtensionHelperOrThrow();
</script>

<template>
  <div>
    <h1>{{ extension.title }}</h1>
  </div>
</template>

<style lang="scss" scoped></style>

4. Use the Helper State

NocoDB provides a helper state that you can use to interact with the NocoDB API, manage the extension state, and access various helper functions. To use the helper state in your extension, you can import it as shown in the example above.

Available Properties in the Helper State

fullscreen: Boolean value indicating if the extension is in fullscreen mode. collapsed: Boolean value indicating if the extension is collapsed. extension: The extension object containing metadata. tables: An array of table objects in the active base. getViewsForTable(tableId): Returns an array of views for a given table. getData(params): Fetches all data for a table or a view. getTableMeta(tableId): Returns the metadata for a table. $api: An instance of the NocoDB API client for interacting with the API. insertData(params): Inserts data into a table. updateData(params): Updates data in a table. upsertData(params): Upserts data into a table. reloadData(): Triggers a reload of the active view data. reloadMeta(): Triggers a reload of the active view metadata. You can find a sample extension in the packages/nc-gui/extensions/json-exporter directory to use as a reference when building your own extensions.

Testing the Extension

After building your extension, test it by running NocoDB. It will automatically load the extension, and you’ll see it in the Extensions panel. Add the extension to your base and interact with it to ensure all functionality works as expected.

Publishing the Extension

Once your extension is built and tested, you can publish it to the NocoDB extension store. To do this, create a pull request in the NocoDB repository with your extension code. Ensure your code follows NocoDB’s contribution guidelines, includes proper documentation, and is ready for other users to install.