Example apps for Confluence

Before you begin exploring these example apps, you'll need to set up the Forge CLI first. Learn more about getting started.

Once the Forge CLI is up and running, clone an example app repository to explore and customize it locally. Each repository's README.md file contains quickstart instructions and other details about the app.

For more information, refer to our getting started guides for building Bitbucket, Confluence, Jira, and Jira Service Management apps. Our tutorials and guides also offer useful information for common tasks.

Question generator app with UI Kit and internationalization

A Confluence macro that displays questions in various languages based on a user’s locale. This app uses UI Kit and internationalization.

Details

• Code: Question generator app - i18n for UI Kit
• Products: Confluence
• Modules: macro
• Custom UI: none
• UI Kit 1: none
• UI Kit:
  • Text, Button, SectionMessage, Stack, Inline, Lozenge, Heading and Spinner components from @forge/react library
  • useTranslation function and I18nProvider React context provider from @forge/react library
  • useCallback and useState hooks from react library
• Runtime: none

Question generator app with Custom UI and and internationalization

A Confluence macro that displays questions in various languages based on a user’s locale. This app uses Custom UI and internationalization.

Details

• Code: Question generator app - i18n for Custom UI
• Products: Confluence
• Modules: macro
• Custom UI:
  • Text, Button, SectionMessage, Stack, Inline, Lozenge, Heading and Spinner components from @atlaskit library
  • i18n and view module from @forge/bridge library
  • useState, useCallback and useEffect hooks from react library
• UI Kit 1: none
• UI Kit: none
• Runtime: none

Page approver app with UI Kit

Allows the easy approval or rejection of a Confluence page through the Confluence content byline item module.

Details

• Code: Page Approver
• Products: Confluence
• Modules: confluence:contentBylineItem
• Custom UI: @forge/bridge
• UI Kit 1: none
• UI Kit:
  • Button and Text components from @forge/react library
  • useEffect and useState components and hooks from react library
• Runtime: @forge/resolver, @forge/api
• Other:
  • Uses Confluence content properties to store data.
  • Uses the dynamicProperties property.

Quiz app with UI Kit

A simple quiz app that uses Confluence page through the Global page module.

Details

• Code: Quiz
• Products: Confluence
• Modules: confluence:globalPage
• Custom UI: none
• UI Kit 1: none
• UI Kit:
  • Inline, Stack, Button, Heading, Image, Text
• Runtime: @forge/resolver, @forge/api

Dictionary app

Displays the definition of the selected text in an inline dialog. If the definition doesn't exist, the user can submit a new one.

Details

• Code: Dictionary repository
• Products: Confluence
• Modules: confluence:contextMenu
• Custom UI: none
• UI Kit 1:
  • InlineDialog, ContextMenu, Text, Form, TextArea components.
  • useProductContext, useState, useAction hooks.
• Other:
  • Uses Confluence content properties to store data.
  • Uses the Confluence REST API to read content properties from a page.

External authentication with various auth providers

Displays user profile information retrieved from various authentication providers, including AWS Cognito, Dropbox, Figma, GitHub, Google, Microsoft, and Slack, in a Confluence code block using external authentication for the API requests.

Details

• Code: External authentication with various auth providers repository
• Products: Confluence
• Modules: macro
• Custom UI: none
• UI Kit:
  • CodeBlock and Text components.
  • useState and useEffect hooks from react library
• Runtime:
  • @forge/resolver, @forge/api
• Other:
  • Uses external authentication to authenticate with the provider's REST APIs.
  • Shows how to retrieve user profile information from the provider.

External authentication with Google Photos

Displays photos from Google Photos in Confluence using external authentication for the API requests.

Details

• Code: External authentication with Google Photos
• Products: Confluence
• Modules: macro
• Custom UI: none
• UI Kit 1:
  • Heading, Image, Table, Row, Cell, Em, Button, Tab, Tabs, Text, ModalDialog and Code components.
  • useState, useEffect hook.

Page approver app with UI Kit 1

Allows the easy approval or rejection of a Confluence page using the Confluence content byline item module.

Details

• Code: Page approver repository
• Products: Confluence
• Modules: confluence:contentBylineItem
• Custom UI: none
• UI Kit 1:
  • ContentBylineItem, InlineDialog, Button, Select, and Text components.
  • useProductContext and useState hooks.
• Other:
  • Uses Confluence content properties to store data.
  • Uses the dynamicProperties property.

Simple sign-up app

Adds a sign-up form to a Confluence page.

Details

• Code: Simple sign-up repository
• Products: Confluence, Jira
• Modules: macro
• Custom UI: none
• UI Kit 1:
  • Button, Cell, Form, Fragment, Head, Row, Table, Text, and TextField components.
  • useContentProperty, useProductContext, and useState hooks.
• Other:
  • Shows a configuration view before displaying the result.
  • Uses Confluence content properties to store data.
  • Calls the Jira REST API with asUser to get information about the user.

Wheel of fortune app

Displays a wheel on a Confluence page that spins to make a random choice. You set the options for the wheel using a table on the page.

Details

• Code: Wheel of fortune repository
• Products: Confluence
• Modules: macro
• Custom UI: none
• UI Kit 1:
  • Fragment, Image, Option, Select, Text, and TextField components.
  • useAction, useContentProperty, and useState hooks.
• Other:
  • Uses the Confluence API to read values from a page.
  • Generates an SVG for animation.

DACI helper app

Adds a Confluence macro that inspects the page and identifies missing, inconsistent, or incorrect information based on the DACI Confluence template.

Details

• Code: DACI helper repository
• Products: Confluence
• Modules: macro
• Custom UI: none
• UI Kit 1:
  • Fragment, Image, and Text components.
  • useAction and useProductContext hooks.
• Other:
  • Implements a parser to read Atlassian Document Format (ADF) from a Confluence page.
  • Uses an SVG and the Image component to render results.