Last updated Apr 14, 2025

Building your frontend with Forge

In the novice level, you learned about the basics of building apps with Forge for Atlassian products and created a basic Forge app for either Jira or Confluence which included a user interface.

Now, it’s time to learn a little more about how user interfaces are built in Forge.

How to build your app Frontend

Building your base app using the Forge CLI, as you did in Novice: Build your first app does a lot of the hard work for you - but before you do that you'll need to make a few decisions about how you want your app to look:

Identify how you want your app to surface within Atlassian products

Magnifying glass

When building apps for Atlassian products like Jira and Confluence, Modules are used to define how Forge apps extend and interact with the Atlassian product the app is installed in.

Identify what User Interface framework you will use

Sign post

Forge offers two options for building the user interface of your apps: Custom UI and the UI Kit.

In Forge Quest the tutorials and guides focus on building apps using UI Kit - allowing you to use a wide variety of existing building blocks, known as components that will align with the Atlassian Design System automatically - so your app will fit with Atlassian Products.

If you'd like to learn about building Custom UI apps, see Extend the UI with custom options

Familiarise yourself with React

open book

React is a JavaScript library used for building user interfaces, particularly for web applications, by breaking down the UI into reusable components.

React has the benefit of dynamically handing rendering the relevant UI components when the state of a component changes. The state and lifecycle are controlled with the use of hooks.

Hooks are special functions that allow you to access state and lifecycle features of React easily. You can recognise when a function is a Hook as it will usually start with use.

In the Novice level tutorial, you used the useState and useEffect hooks provided by React.

useEffect hooks are used to connect or synchronize with external systems, including via the network.

In the Novice tutorial, useEffect was used to invoke (or call) a resolver function - that is a function that runs through the Forge FaaS backend, hosted by Atlassian.

useState hooks let a component remember data, and has two additional benefits to a regular variable. First, the data is retained between renders and Second, changes to state variables trigger automatic re-renders of the component.

In the Novice tutorial, the useState variable was used to store the result of the invoke function - so that when the asynchronous response was received by the component, it was automatically refreshed to display the value in the browser.

For more information about built in React Hooks, see the React Hooks Reference official page.

UI Kit allows you to use a range of standard React hooks, as well as some prebuilt custom hooks that allow with common tasks.

To learn more about React, see the official React Quick Start guide.

Create your Components

integrations

UI Kit offers more than 50 components to build your application, most of the components let you add content to your app - like buttons, tables, text and so forth.

The latest version of UI Kit offers native rendering, with all frontend functions running directly in the browser to ensure quick response times, and uses the React runtime enabling you to use any React hooks that do not rely on an underlying DOM node or depend on any synchronous operations in the browser’s event loop.

In addition, the latest version of UI Kit includes special components that allow you to change the appearance of the other components.

Layout Components

Inline - An inline manages the horizontal layout of direct children using flexbox.

Stack - A stack manages the vertical layout of direct children using flexbox.

Styling Components

Box - Box is a general-purpose container that allows for controlled use of design tokens.

XCSS - XCSS is a styling API that utilizes Atlassian Design Tokens to style primitive components safely with tokens.

Both of the tutorials in the Apprentice level use a combination of the above components to build more complex layouts. Why not try a tutorial now?

To learn more about Forge UI, see the User Interface guide in the Forge documentation.