React Sandbox for Confluence

React Sandbox for Confluence is a quick and easy way for developers to write, edit, preview, and collaborate on react code with teammates all from within Confluence cloud.

Comment

Inspiration

As a development team we spend a lot of time reading documentation, collaborating on ideas, and demonstrating products. Often we need to share design ideas or demonstrate a piece of code with our teammates and currently this would mean adding a link to a third party site to host or demo code which slows down the flow of work between teams.

We believe development teams everywhere would benefit from a quick, easy, and lightweight solution to collaborating on React code and demonstrating design concepts with teammates. React Sandbox for Confluence was developed from the need to quickly write and share simple React components with team members in existing collaboration tools such as Confluence which is packed with powerful collaboration features and lends itself perfectly to this challenge.

What it does

React Sandbox for Confluence enables you to easily write, edit, preview, and collaborate on react code within Confluence pages. It leverages the power of Forge to provide you with a secure, high performing code editor right within your Atlassian software.

The React Sandbox for Confluence offers an intuitive UI to make it easy for users who are just starting to dive into the world of React and uses the react-live library to let you style and compose components freely, with editable source code and live preview.

Features include:

  • Live preview - quickly view your react code and components live with the live preview mode
  • Edit / view modes - easily toggle between edit and preview mode at the click of a button
  • Upload existing projects - easily upload .txt/.js/.jsx text files to React Sandbox for Confluence
  • Aligns with page permissions - prevent accidental changes by leveraging Confluence’s built in permissions and keep restricted content secure
  • Build from templates - choose from a range of component templates include examples from Atlaskit

How we built it

React Sandbox for Confluence is Built with Forge, React, at Atlaskit. We leveraged the Forge storage API and Forge bridge to manage data and interact with the Confluence API.

Challenges we ran into

Learning how to work with Atlassian Forge and implementing a custom UI were the biggest challenges. The Forge platform has incredible power and comes with a learning curve we enjoyed tackling.

Accomplishments that we're proud of

We managed to build this app within a short period of time, so getting it to an acceptable state and being able to publish it is a huge accomplishment for us.

We are happy to have developed seamless and easy way for developers to share and demonstrate React code using the new Forge framework while being faced with the challenge of remote working. As a team we are proud to have seen the evolution of the App and are excited for the future of the product.

What we learned

We learned how to develop cloud apps with the Atlassian Forge framework. Using a custom UI we were able to leverage the power of forge to develop quickly as a team and meet the product requirements.

What's next for Code Sandbox

We plan to improve React Sandbox by adding the following features:

  • Add a range of React libraries to pick from to allow the user to demonstrate a wider range of components
  • Add multiple component per sandbox support so the user can choose to write imperative code
  • Add a third view option so a user can see both the code and the rendered components side by side

Built With

Share this project:

Updates