Build a hello world Confluence app.

Build a hello world Confluence app with images and headings and tooltips

Comment

Hello World from Every Continent – A Forge App Story

Inspiration

This project was born out of a simple idea: what if a "Hello World" app wasn’t so generic? I wanted to create a more personal, meaningful greeting experience that reflects different global regions—each styled and colored to evoke its own thematic feel. The Atlassian Forge platform, with its support for design tokens, personalized context, and secure backend logic, felt like the perfect canvas to experiment with themed storytelling.

What it does

This Forge app dynamically greets Confluence users with a personalized message that includes:

  • Hello World Greetings with different headers and colours from different continents(All headers contains tooltip).
  • Also we have added one GIF image to greet people with Hello World.(Contains tooltip)
  • The current space name
  • Theme-sensitive styling (dark/light mode)
  • It uses a backend resolver to return context-aware messages and a polished UI built with Atlaskit tokens and Forge React.

How we built it

The app is made up of three key parts:

  1. Frontend I used Forge's Custom UI with React to build an interface that dynamically:
  2. Welcomes users by greeting Hello World using the Confluence REST API
  3. Adjusts the theme based on light/dark mode
  4. Visually represents greetings from each continent using Box, Heading, and Tooltip components
  5. Renders styled messages with Lozenges , themed backgrounds, and tooltips for added interactivity

  6. Includes external GIFs (like the Tumblr "Hello Universe") using Forge’s component

  7. Backend (Resolvers) The resolver in index.js supports the frontend by handling invoke() calls. It sends back static or dynamic data and logs payloads for debugging purposes. This clean separation of logic let me future-proof for things like custom greetings or regional preferences.

  8. Manifest The manifest.yml defines:

  9. Custom content module for Confluence

  10. Scopes for fetching user data

  11. External resource permissions for embedding GIFs from Tumblr

  12. Tunnel configuration for local testing

  13. Clean, readable structure for maintainability

Built With

  • React + Forge UI – For building the frontend with themed components, tooltips, images, and layout primitives like Box, Stack, and Heading.
  • Forge Platform (Atlassian) – Provides the serverless runtime, hosting, app scaffolding, tunneling, and deployment infrastructure.
  • Custom UI Bridge (@forge/bridge) – Enables secure communication between frontend and backend functions.
  • Resolvers (@forge/resolver) – For writing backend logic that responds to invoke() calls from the frontend.
  • Confluence REST API v2 – Used to fetch personalized user information and display dynamic greetings.
  • Atlassian Design Tokens – For consistent theme-aware styling based on dark/light mode and accent colors.
  • Tumblr Media CDN – Hosts the GIFs embedded via Forge’s Image component.
  • Git + GitHub – Version control, remote collaboration, and project hosting.
  • Markdown + README – For documentation and storytelling around the project.

What I Learned

  • How to fetch and use Confluence user account data to personalize content
  • How to use Atlassian Design Tokens to adapt the experience based on theme and region
  • How @forge/react and @forge/bridge enable secure, cross-boundary communication between the frontend and Forge backend
  • The power of Tooltip, Box, Stack , and Image when used with storytelling in mind

Challenges we ran into

  • UI not rendering initially: I accidentally used unsupported HTML elements like "div" in Forge’s Custom UI and had to switch to "Stack" .
  • Spinning loader issue: The app was stuck loading due to a silent error—fixed by simplifying the component tree and testing with Text("Hello").
  • Egress URL scope detection: External images failed to load until I added the correct external URL (64.media.tumblr.com) and re-installed the app with --upgrade.
  • Confluence REST API quirks: Working with /wiki/api/v2/users-bulk required careful payload formatting and error handling.

Final Thoughts

This project was equal parts playful creativity and technical problem-solving. By giving each continent its own themed greeting, I explored personalization, theming, and storytelling—all within a Forge app. Now, it’s not just "Hello World"... it’s “Hello from Africa,” “Hello from Antarctica,” and beyond!

Production_APP_Link Production_APP_LINK

What's next for Build a hello world Confluence app.

  • Add per-space onboarding content powered by Forge Storage
  • Include animations or visual flair using Atlaskit components like Flags or Progress indicators
  • Support localization (i18n) for multilingual greetings
  • Let space admins customize welcome messages
  • Integrate analytics to track user engagement per space

Built With

Share this project:

Updates