UI Extension

Here is a public open source example of a UI extension:


You can use any HTML output as a UI Extension by pasting the public URL into the field UI Extension

caisy screenshot interface code injection ui extension
caisy screenshot interface ui extensions settings


To access the surrounding context or write data to the field, use the @caisy/ui-extension-react library for React.

import { useCaisyField } from "@caisy/ui-extension-react";
const { value, setValue, context, loaded } = useCaisyField();

The value and setValue functions behave like a normal useState in React, but the state is preserved in caisy.

The value and context are undefined until loaded is true .

The context contains the following parameters: documentId blueprintFieldId projectId localeCode token

This context information can then be utilized further to make calls using the SDK.

Working with local dev server

Let's assume you run your server locally on port 3000 and you use the path /extension/sample.

A method to debug extensions locally is to use a tunneling tool that proxies webhooks in real-time to your local development server. For example, you can use ngrok. To start your proxy server, run:

ngrok http 3000

You will receive a secure HTTPS URL from ngrok. All traffic from this ngrok address will be redirected to your local development server while ngrok is running. To view the results, open the ngrok address with your extension path in your browser.

https://8cd2-91-49-126-216.eu.ngrok.io/extension/sample -> http://localhost:3000/extension/sample

Then you can use the new ngrok URL in your extension URL.

caisy screenshot interface ui extensions settings url

Don't forget to include the path as well. Also, once you are done developing, you should change the extension URL to point to your deployed URL.

As an alternative to ngrok, you can also use localtunnel, which works in a similar manner: https://github.com/localtunnel/localtunnel