Making Network Requests

Plugin code runs in a sandbox that cannot make network requests directly. If you need data from external APIs in your plugin sandbox, make the request from your UI code and send the result to the sandbox.

For example, here's how you might fetch an SVG from an icon library API and import it into the scene.

1. Fetch from the plugin UI

The UI makes the API call using the standard fetch API:

// In plugin UI (App.tsx)
const response = await fetch(`https://api.iconlibrary.com/icons/${iconId}.svg`);
const svgContent = await response.text();

2. Send to the plugin sandbox

The UI sends the fetched data to the plugin using postMessage:

// In plugin UI (App.tsx)
parent.postMessage(
  {
    pluginMessage: {
      type: "import-svg",
      content: svgContent,
    },
  },
  "*"
);

3. Plugin sandbox receives and responds

The plugin receives the data and uses it — in this case, importing the SVG into the scene:

// In plugin sandbox (plugin.ts)
creator.ui.onMessage(async (msg) => {
  if (msg.type === "import-svg") {
    const svgLayer = await creator.activeScene.import({
      type: "SVG",
      content: msg.content,
    });
  }
});

Example

Network requests example →