> For the complete documentation index, see [llms.txt](https://help.felt.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.felt.com/developer-platform/extensions.md).

# Extensions

{% embed url="<https://youtu.be/0bB6JY-3SCc>" %}

Extensions let you add interactivity to your Felt map, whether that means enabling viewers to search, measure, or filter your data with pre-built tools like [Find](#find), [Measure](#measure), and [Spatial filter](#spatial-filter), or creating a complete application with [Custom extensions](#create-a-custom-extension-with-felt-ai). With extensions, you can transform your map into a purpose-built interactive experience tailored to specific workflows all without writing code.

{% hint style="success" %}
**Extensions** are available on the Enterprise plan. [Contact sales](https://felt.com/sales) to upgrade.
{% endhint %}

## Examples

#### Neighborhood comparison tool

<figure><img src="/files/5vGBhOHpPkRZONmGeibb" alt="" width="563"><figcaption><p><em>Build an application that compares neighborhoods and summarizes land use patterns</em></p></figcaption></figure>

#### Data animations

<figure><img src="/files/t69fPGpmm9xUWfPGmHBx" alt="" width="563"><figcaption><p><em>Animate the flow of the Mississippi River Basin from its headwaters to the Gulf of Mexico</em></p></figcaption></figure>

#### Interactive data

<figure><img src="/files/W0qTY4Ema3Dr1rf5fYak" alt="" width="563"><figcaption><p><em>Build a tool that draws lines to all destination counties on click with travel mode options and filters</em></p></figcaption></figure>

## Create a custom extension with Felt AI

1. Click **Developer Platform** (![](/files/BHpadoUiULoA8m5mCqRJ)) in the [toolbar](/getting-started/tour-the-interface.md#toolbar) and select the option for **Custom extension**
2. Extensions editor opens in a split view:

   1. **the left side** includes the AI prompt area where you describe what you want your custom extension to do, and a code editor that displays the generated code with the option to refine. You can view logs in the Console tab of the prompt area as you test your extension.
   2. **the right side** shows a live preview of your map with your custom extensions

   <figure><img src="/files/ouOWF6SXJfAB0SJztYrM" alt=""><figcaption></figcaption></figure>
3. Describe the specific interaction or workflow you want by typing in the prompt area. Examples:
   1. "Build an application that compares neighborhoods and summarizes land use patterns"
   2. "When someone clicks a point, show a popup with the nearest 3 schools"
   3. "Add a sidebar that plays an animation of the data over time."
4. After a prompt is submitted, Felt AI will generate code based on your prompt and you will see the code editor update.
   1. You can modify the code directly in the code editor and hit **Run** to see the updates in the preview map.
5. Click **Save** once you have a working extension.
6. The custom extension will appear in your map’s legend.

## Polished UI

Custom extensions let you go beyond [pre-built](#pre-built-extensions) ones to create complete, purpose-built applications with polished [UI components](https://developers.felt.com/js-sdk/ui-components) like:

* **Buttons:** Quick actions viewers can click
* **Panels:** Sidebars that display summaries, stats, or workflows
* **Forms:** Inputs for viewers to enter text or select options
* **Embedded content:** Charts or dashboards from other sites displayed in your panel

[UI elements](https://developers.felt.com/js-sdk/ui-components) automatically match Felt’s design so everything looks polished and integrated. They can be rendered as buttons in the legend or panels on the right side of the map, and can draw ephemeral data (ex: isochrones) on the map based on a user interaction like a click.

## Managing extensions

Clicking on the extension in the legend allows editors to reopen the editor, rename the extension, or access additional options like copy/duplicate/delete.

<figure><img src="/files/Rj9i5Gc2e1UutD1mMtHi" alt="" width="375"><figcaption></figcaption></figure>

## Debugging

* Test your extension by exiting edit mode on the map (click the pink **Done** button top-right). Extensions can only run when viewing the map in view mode
* Only members with editor permissions can see/modify the extension code to debug.
* To find a layer ID to feed into an extension, click on **···** next to the layer in the legend, then select **Actions** > **Copy ID for API**. Note: the same data on two different maps will have a unique layer ID per map.
* Errors will appear in the **`AI assistant`** tab with a brief summary of the issue. Use Felt AI to fix the errors by clicking the **`Fix errors`** option:
* The Console tab in the prompt area shows more detailed debugging and verbose logging
* Clipboard helpers in the editor let you easily copy your map’s viewport or layer IDs
* Click on **···** next to the extension in the legend to copy, cut, duplicate, and delete extensions.

## Tips

* **Saved extensions are automatically shared** when you share your map - viewers will see the interactive functionality without needing any special access.
* Extensions run when your map is in View mode only. While in Edit mode for your map, extensions are disabled so you can edit your map safely. You can still open the extensions editor at any time to edit your extension.
* The preview shows exactly how your custom extension will work before you save or share it
* The overflow menu in the editor offers helpful options like word wrap, auto-run, and delete
* Viewers won’t see your custom extension until you save it
* If you want to go further, see the [Felt SDK API reference](https://developers.felt.com/js-sdk-api-reference/) for details on everything the SDK can do

## Pre-built extensions

Felt provides three pre-built extensions you can add with just a few clicks.

### Find

The Find extension enables map viewers to search locations and layers by entering keywords in the search box.

<figure><img src="/files/DaSOhwpF3El1zgnRHds9" alt="" width="302"><figcaption></figcaption></figure>

To add Find:

* Click **Developer Platform** in the toolbar
* Give your find tool a title
* Choose whether results include search from all layers, specific layers, or locations (places and addresses).

<figure><img src="/files/BNSGpdxo5XnPNRqyaK3B" alt="" width="334"><figcaption></figcaption></figure>

### Measure

The Measure extension provides map viewers with tools to measure distances and areas directly on the map.

<figure><img src="/files/S5ZsZkJLxFD5vtwpQjma" alt="" width="375"><figcaption></figcaption></figure>

To add Measure:

* Click **Developer Platform** in the toolbar
* Optionally rename the tool.
* Choose which measurement types to offer map viewers: line, polygon, circle, driving, cycling, walking, or flight great arc.

<figure><img src="/files/SuO9tHa1FzkKc8CtWGcT" alt="" width="318"><figcaption></figcaption></figure>

### Spatial filter

The spatial filter extension enables viewers to filter layers and export the filtered results by drawing a shape on the map. Selecting a spatial filter shows the number of features filtered, along with details about the size and shape of the filtered region.

<figure><img src="/files/GH8QaD8kypnHYumWGheJ" alt="" width="375"><figcaption></figcaption></figure>

To add Spatial filter:

* Click **Developer Platform** in the toolbar
* Optionally rename the tool.
* Choose which shapes viewers can draw (polygon, circle, or both).
* Select which map layers the filter applies to.

<figure><img src="/files/vULrvKboB1iYhAfmduiY" alt="" width="331"><figcaption></figcaption></figure>

To let viewers export filtered results, turn on **Export data** in your [map’s settings](/dashboards-and-apps/map-settings.md). Once the setting is on, a download icon will be available to all logged-in viewers from the spatial filter panel.

* Logged-in viewers can download results as GeoPackage, GeoJSON, or CSV
* Logged-out viewers can filter interactively but cannot download data

Spatial filters work great alongside other [components](/dashboards-and-apps/components.md) set to “Update based on other filters”. In the image below, the statistic and bar chart components are set to update based on other filters, such that they show risk stats for the spatially-filtered region. Lines and polygons that partially intersect the spatial filter are fully counted in calculated statistics.

<figure><img src="/files/Ukdsbagh3znQDDbrdv3M" alt="" width="375"><figcaption></figcaption></figure>

## Frequently asked questions

<details>

<summary>What are extensions in Felt?</summary>

Extensions add custom interactivity to your Felt maps, transforming them into purpose-built interactive applications. You can build them by describing what you want in natural language — Felt AI generates the code — or by writing the JS SDK code yourself.

</details>

<details>

<summary>Do I need coding experience to build extensions?</summary>

No. You describe what you want in natural language, and Felt AI generates the necessary code using the JS SDK. You can edit the generated code directly if you want to, but you don't have to.

</details>

<details>

<summary>Who can access extensions?</summary>

This feature is only available to admins and editors who are using Felt on the Enterprise plan. To upgrade, you need to contact sales.

</details>

<details>

<summary>What happens when I share a map with a custom extension?</summary>

When you share your map, your custom application is live and ready for viewers to use immediately—no extra setup or deployment needed.

</details>

<details>

<summary>Can I modify the generated code?</summary>

Yes, you can modify the code directly in the code editor and click Run to see the updates in the preview map.

</details>

<details>

<summary>What are some example use cases for extensions?</summary>

* **Neighborhood comparison tool**: Compare neighborhoods and summarize land use patterns
* **Data animations**: Animate the flow of the Mississippi River Basin from headwaters to the Gulf of Mexico
* **Interactive data tools**: Draw lines to destination counties on click with travel mode options and filters

</details>

<details>

<summary>What technology powers extensions?</summary>

Extensions are built on Felt's JS SDK. Felt AI generates the SDK code from your natural language descriptions, and you can edit that code directly in the editor.

</details>

<details>

<summary>Where does my custom extension appear after saving?</summary>

The custom extension will appear in your map's legend when editing a map.

</details>

<details>

<summary>Where does the extension code run?</summary>

Everything happens right in Felt and runs on Felt's scalable cloud infrastructure. You can preview, adjust, and save your extension with no extra setup or deployment required.

</details>

<details>

<summary>I need to find a layer ID to feed into my prompt for an extension. Where can I find this layer ID?</summary>

Click on **···** for the layer in the legend, then select **Actions** > **Copy ID for API**. This will copy the unique identifier for the layer on the map you're building the extension.

<figure><img src="/files/s2YC4hYFwBk5qMQzynVC" alt="" width="375"><figcaption></figcaption></figure>

Note: the same data on two different maps will have a unique layer ID per map.

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.felt.com/developer-platform/extensions.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.