Race out of the gate with Forge UI: a new way of building UI extensions for Atlassian products. In this session, Forge UI Developer Experience lead Peter Gleeson will demonstrate how build an Editor macro from scratch! Attendees will learn about Forge foundational concepts such as the FaaS dev loop, Forge CLI, and how to construct UIs from Forge UI components. This session provides a great introduction to the Forge platform for any developer looking to get productive with editor apps and Forge UI.

1. PETE GLEESON | FORGE UI DX LEAD | ATLASSIAN | @PETE_GLEESON
Let’s build an Editor Macro with
Forge UI

2. Forge UI &
Editor
Macros
Let’s build a
Macro
What’s
next?
Agenda

3. Forge UI &
Editor
Macros
Let’s build a
Macro
What’s
next?
Agenda

4. FORGE UI
A declarative way
of building UI
inside Atlassian
products

5. Cross platform declaration
Say what your App does once, have it rendered
on multiple platforms.
No web views or iframes
Native implementation means your App is
seamlessly rendered in our products.
Benefit from platform wins
Your App improves as our products do.
Use Forge UI
to declare
what your
App does

6. Cross platform declaration
Say what your App does once, have it rendered
on multiple platforms.
No web views or iframes
Native implementation means your App is
seamlessly rendered in our products.
Benefit from platform wins
Your App improves as our products do.
Use Forge UI
to declare
what your
App does

7. Cross platform declaration
Say what your App does once, have it rendered
on multiple platforms.
No web views or iframes
Native implementation means your App is
seamlessly rendered in our products.
Benefit from platform wins
Your App improves as our products do.
Use Forge UI
to declare
what your
App does

8. Cross product
Forge UI Macros will be
available where the Editor is
Forge UI Macros
The Atlassian Editor is the first
place to get Forge UI
FORGE UI MEET THE EDITOR
Your workflow
Personalise your Confluence
experience with Forge UI Macros

9. THE MAGIC OF FORGE UI
CONFLUENCEFORGE UI FAAS
<APP />
EVENT

10. Forge UI &
Editor
Macros
Let’s build a
Macro
What’s
next?
Agenda

12. (<APP />, { COUNT: 0 })
CONFLUENCE
FORGE UI
(<APP />, { COUNT: 0 })INITIALISE

13. (<APP />, { COUNT: 0 })(<APP />, { COUNT: 1 })
CONFLUENCE
FORGE UI
(<APP />, { COUNT: 1 })(EVENT, { COUNT: 0 })

14. (<APP />, { COUNT: 1 })
CONFLUENCE
FORGE UI
(<APP />, { COUNT: 2 })(EVENT, { COUNT: 1 })
(<APP />, { COUNT: 2 })

15. (<APP />, { COUNT: 2 })
CONFLUENCE
FORGE UI

16. Forge UI &
Editor
Macros
Let’s build a
Macro
What’s
next?
Agenda

17. Richer set of components
THE FUTURE

18. Tighter product integration
THE FUTURE

19. More places to show Forge UI
THE FUTURE

20. Forge UI &
Editor
Macros
Let’s build a
Macro
What’s
next?
Recap

21. Let’s make some magic 🙌