Extension UI overview
Add UI to your extension and build a user experience that extends the Netlify UI and integrates with third-party services.
With extension UI, you can do the following:
- create an authenticated connection between a third-party service and a Netlify user account
- build custom UI that is rendered in the Netlify UI and allows a user to configure their site and a third-party service directly in context
- provide in-app documentation and guidance to users as they configure and use your extension
You can use the Netlify SDK commands to run, test, and build your extension as you work.
Once you publish your extension, it will be available for Netlify users to install on their teams.
What is extension UI
An extension UI is a single-page React application, rendered to an iFrame across different locations within the Netlify UI — locations that we call surfaces. You can select from surfaces across the team settings, site configuration, and Netlify Connect sections of the Netlify UI.
The Netlify SDK provides a toolkit based on Vite and React for building extension UI. The toolkit provides a rich set of components that provide the same look and feel as the Netlify UI and take care of low-level plumbing between the Netlify UI and your single-page application (your extension UI). At this time, this is the only supported framework.
The extension UI can also include serverless functions, called endpoints, that support your UI. Endpoints can perform API calls to external APIs and interact with the Netlify API to make changes to the user’s teams and sites on Netlify.
While you develop your extension, the SDK includes functionality that allows you to preview your extension UI locally and review how it will render and function in the Netlify UI.
Documentation
- Get started: a high-level guide on how to install the Netlify SDK and generate the boilerplate files for extension UI.
- Develop locally: learn how to start a local development server and preview your extension UI locally.
- Add a new surface: information about the available surfaces and how to add an additional surface to your extension UI.
- Call endpoints: learn how to call an endpoint from your extension UI and interact with Netlify APIs.
- Extension UI reference docs: while you develop your extension UI, refer to the React section of the reference docs.