Frame

On This Page

Using Frame
Get started
Known limitations and issues

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:

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

Props

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

Name	Type	Required	Usage	Description
`resource`	`string`	Yes	Frame component	This is the key of the resource to be loaded in the `Frame`. The resource must be defined in the app’s `manifest.yml` file. If the resource key is missing or cannot be located in the `manifest.yml`, a `Not Found` message will appear within the `Frame` component. For more information on defining a resource, see here.

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

Tutorial: Logo designer app using the Frame component

The app in this example showcases a logo designer and renders a preview of the designed icon within the Frame component.

Explore example app

Repository: Clean slate Forge app with Frame component

This repository features a clean-slate Forge app, developed in JavaScript, for the Confluence global page module. It is provided as a starting point for Forge app development, utilizing the UI Kit Frame component.

Explore the repo

Known limitations and issues

Limitations

Only a single Frame component can be rendered per module to minimize potential performance impact.
The Frame component is only supported on Confluence, Jira and Compass.
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.