UI Extension

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

https://github.com/caisy-io/react-ui-extension-example
https://github.com/caisy-io/caisy-extension-code-editor

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

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.

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.

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