Frame

Frame component acts as a container for rendering static frontend applications, such as HTML, CSS, and JavaScript, ensuring seamless integration with the UI Kit. It provides flexibility in implementing desired user interfaces and supports communication with the main app through the Events API, allowing bidirectional and broadcast communication.

Using Frame

To add the Frame component to your app:

Copy
1
import { Frame } from '@forge/react';

Props

The Frame component has the following properties that need to be considered:

Example

1
2
import React from 'react';
import ForgeReconciler, { Text, Frame } from '@forge/react';

const App = () => {
  return (
    <>
      <Text>[UI Kit] Hello world!</Text>
      <Frame resource="example-frame-resource" />
    </>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Get started

Custom content security policies

By default, Atlassian blocks any policies that may be considered unsafe when rendering Frame. To include capabilities, such as inline CSS, you will need to declare these permissions in the manifest.yml file of your app in the permissions.content section.

For example, to allow inline CSS in your app, use the following configuration:

1
2
permissions:
  content:
    styles:
      - 'unsafe-inline'

Here’s an another example for allowing scripts from specific sources using a script-src style configuration in your manifest.yml:

1
2
permissions:
  external:
    scripts:
      - 'https://www.example-dev.com/script.js'

See content security policies and egress controls for other permissions that can be added to Frame.

Known limitations and issues

Limitations

• Only a single Frame component can be rendered per module to minimize potential performance impact.
• Only modules that currently support Custom UI will support Frame.
• If the Frame component does not resize correctly within the application upon layout updates, we recommend checking and confirming that the sizing properties of the root container are defined using non-viewport-related units such as %, px, em, and so on. This limitation is because the Frame component's root container does not well support viewport-based relative sizing units like vh and vw.