Contents x
    Create your own custom extensions with Airtable Blocks SDK
    • 04 May 2023
    • 3 Minutes to read
    • Print
    • Dark
      Light
    Contents

    Create your own custom extensions with Airtable Blocks SDK

    • Updated on 04 May 2023
    • 3 Minutes to read
    • Print
    • Dark
      Light
    Article Summary

    Learn the basics about Airtable's Blocks SDK and use React and to create your own real-time, interactive extensions that live in Airtable. We host your code, so you don't have to worry about servers or setup. You can create your extension in your own development environment and import your favorite npm packages.

    The full API Reference and tutorial guides for the Blocks SDK can be found on our developers' site.

    NOTE

    Looking for help with development? Check out the Custom Extensions section of our community forum.


    Introduction

    Plan availabilityAll plan types
    Permissions

    Owners/Creators - You'll likely want to utilize your own workspace to test and develop custom extensions.

    Platform(s)Web/Browser, Mac app, and Windows app
    Related reading

    The developers' guide to Blocks SDK - Technical, in-depth documentation about creating custom extensions

    Airtable terminology

    Extensions -

    Extensions are modular components that add visuals or functionality to a base. Users can create custom extensions, or they can use extensions created by Airtable or other open source extensions.


    Getting started with Custom Extensions

    To get your development environment ready for building custom extensions with React, view our Getting started guide on the developer documentation site.

    360086465054Image2020-08-26at55534am.png

    To build a new extension:
    1. Navigate into an Airtable base
    2. Click the Extensions button on the far right of the base or use the CMDSHIFT\ shortcut
    3. Then click + Add an extension
    4. In the Marketplace pop-up, click the + Build a custom extension option to start building
    Click here for some more getting started ideas

    The best way to understand how to build a custom extension is to try out the Hello world tutorial and the To-do list tutorial in the developer documentation. Once you've gone through the basics of setting up your devlopment environment, there are more advanced guides that cover topics like reading and writing data in your Airtable base and running your extension in multiple bases. The API reference section details classes, method names, and UI components that are specific to the Airtable Blocks SDK.

    360086465134Image2020-08-26at60027am.png


    Exploring examples

    The custom extensions platform comes with example extensions that you can use as a starting point for your own extension. The example extensions built by Airtable are available in the "Build an extension" modal — if you'd like to start from scratch, select the "Hello World" example. Otherwise, choose an example extension that is most similar to what you'd like to build, or one that has functionality you'd like to replicate in your own extension.

    If you want to start from a custom extension that someone else has built, you can use the "Remix from GitHub" option and paste in the link to the GitHub repository.

    360091306393Image2020-09-13at114635am.png

    A few of the example extensions have also been added to the extensions gallery if you would like to explore their functionality. You must have a Pro plan to install these published versions of the extensions.

    Custom extension examples


    React Devtools for custom extensions

    React Devtools is a popular and common utility for developing apps, and is now available for Airtable developers to use when building Custom extensions. This article will detail how to open React Devtools and start using them in your development process.

    How to access devtools

    Devtools can be accessed from an open custom extension in your extensions dashboard. Start by opening your custom extension and locating the bottom toolbar. Both the “Components” and “Profiler” tabs are part of React Devtools.

    1500001460061devtools.png

    There are two primary ways that developers can use these devtools which are covered in more detail below.

    Inspecting the running application

    Using the components tab allows you to:

    • See “props” or “state” and the heirarchy of react components that are currently rendered
    • Edit props or state to see changes in real time
    • Inspect which React components correspond to which elements in the UI
    Profiling performance of the application

    By using the “Profiler” tab, you can inspect the performance of your custom extension. This will give you critical information such as why components re-render, and how much time is spent re-rendering any given component. This allows you to see why an application might feel slow and determine how to fix it.

    For more information please see the blog post from Facebook introducing the React Devtools Profiler.


    FAQs

    If you have questions about getting started or what you can do with custom extensions, take a look at our Custom Extensions FAQ.

    Can I use my web browser extension instead of React Devtools?

    Unfortunately the React Devtools web browser extension can’t currently target iframes and therefore aren’t currently compatible with Custom extensions.

    Is there support for the standalone version of React Devtools?

    This would require always opening a local network request from Airtable (and causes conflicts if you have multiple development sessions open at the same time). Custom userscripts (e.g. Tampermonkey) can be used to get such a solution working - but isn’t supported by Airtable.

    Was this article helpful?
    What's Next