# Build your first “Hello, world” extension

This tutorial walks you through creating your very first Interface Extension in Airtable.
> 📘 Before you begin, make sure you’ve followed the [Getting started guide](https://airtable.com/developers/interface-extensions/guides/getting-started.md) to install the CLI and set up your development environment.

## Create a new Interface Extension

Head to the [Builder Hub](https://airtable.com/create/extensions) and click **Create new extension**.

If prompted to choose an extension type, select **Interface**.

From there, you'll see a few starter projects you can base your extension on:

* Hello world (Javascript)
* Hello world (Typescript)
* Heatmap
* Sliding Bar Chart

Select one of the hello world examples to start.

Fill out the fields (all are required) and click **Create extension**. For the purposes of this example, name the extension `test-extension-hello-world`.

## Set up the extension

After creating your extension, you’ll land on a setup page with everything you need to run your extension locally. You'll recognize the `Setup local environment` steps from the Getting Started guide.

**Note:** You do not have to do this set up again.

## Develop your extension
These are also listed in the setup page you landed on, so you can follow along there or here.

1.  In the terminal, initialize your extension. Copy the command from Builder Hub, as you'll need the ID that was created with your extension. The example below uses a made-up ID:

```
$ block init NONE/blk1234567890 --template=https://github.com/Airtable/interface-extensions-hello-world test-extension-hello-world
```

2. Your extension's code will be initialized in the local directory `test-extension-hello-world`. Navigate into it:

```
$ cd test-extension-hello-world
```

3. Then, you can run your extension:

```
$ block run
```
Next, you'll add your extension to an Airtable interface.

## Preview your extension in Airtable

In the Airtable base where you'd like to install the extension, select the **Interfaces** tab in the top menu. Interface extensions can be installed as either a full page of their own, or as an element in a Dashboard layout.

### Full page layout
Create a new interface. Choose the `Custom` layout and click `Next`. Choose your extension from the list and click `Finish`.

### Dashboard

Create a new **Dashboard** interface.

Click the **+** button to add a new element to your layout. In the dropdown menu, choose **Custom**—you should now see your extension listed there.

### Output
In both cases, you'll see `This extension does not have any releases yet`. This means that you've installed the extension successfully!

## Setting up Development mode

Click on the extension; the properties panel will show up on the page's right side. Click the `</> Develop` button to load your locally running extension.

If it's your first time developing an Airtable extension, you may see an error that prevents your extension from loading. Follow the instructions in the properties panel to allow self-signed certificates. Once that's done, click the `Reload extension` button and your extension will load correctly.

### You’ve just built and loaded your first Interface Extension! 🎉
Next up: try customizing it by editing the code in your local environment. When running the extension in Development mode, you’ll see live updates as you save changes locally.