- 04 May 2023
- 3 Minutes to read
- Print
- DarkLight
Create your own custom extensions with Airtable Blocks SDK
- Updated on 04 May 2023
- 3 Minutes to read
- Print
- DarkLight
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.
Looking for help with development? Check out the Custom Extensions section of our community forum.
Introduction
Plan availability | All 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.
- Navigate into an Airtable base
- Click the Extensions button on the far right of the base or use the CMDSHIFT\ shortcut
- Then click + Add an extension
- In the Marketplace pop-up, click the + Build a custom extension option to start building
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.
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.
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.
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.
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.
There are two primary ways that developers can use these devtools which are covered in more detail below.
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
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.
Unfortunately the React Devtools web browser extension can’t currently target iframes and therefore aren’t currently compatible with Custom extensions.
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.