Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
Community Members
Community Events
Community Groups

Consuming Confluence Cloud API content in a React application


I was wondering what practises are available out there to transform a Confluence Cloud API call, say to fetch a specific page's content, into a React component. Basically:

  1. Confluence hosts content
  2. Application API fetches page from confluence through its API
  3. Application API forwards the response to the React application
  4. React application transforms the Confluence page's content into all the required components: tables, lists, paragraphs, images, etc

I have played around with the  `xml-js` library, but its implementation is quite messy. I was wondering if perhaps there was something better out there.

1 answer

0 votes
Zak Laughton Atlassian Team Feb 21, 2019

Hi Virginia,

The process of using the Confluence API in a React component should be similar to using any other API with React. The React documentation has some great info and details: React - AJAX and APIs.

As for parsing the page content, you could try just using .match() and regex. This StackOverflow post also has a pretty good suggestion to turn the JSON response string into an HTML DOM element, which you can then parse with .querySelector() (or .querySelectorAll()) to find whatever elements you're looking for.

I hope this helps!
– Zak

Thank you for your answer.


Although that method doesn't quite work for my use case. I am parsing a Confluence page that returns its content in XML into fully fledged React components.

Did you get help on this?

Suggest an answer

Log in or Sign up to answer

Atlassian Community Events