StackBlitz for Confluence

Preview your web-based code with the official StackBlitz add-on for Confluence

Connect to existing StackBlitz projects

100% compatible with StackBlitz Enterprise

Interactive examples facilitate learning

Create context for your readers by embedding StackBlitz projects directly in Confluence with the relevant details needed to communicate the idea effectively.

Connect StackBlitz for Confluence to your organization's private instance of StackBlitz for collaboration behind the firewall.

Only owners of the StackBlitz project can modify the code, but all Confluence users with read-only access to the page can experiment with the embedded project - changes are not persisted/saved.

Common Use cases

  • Rapid learning & documentation- show best practices in web-based development and provide enough context & detail as your audience needs. Viewers can interact with the code with no possibility to persist changes.

👉 Interact with our live example

  • Iterate quickly - Socialize a web-based prototype within Confluence. Allow stakeholders to see the idea and provide feedback before the team spends numerous hours implementing functionality that may or may not be valuable.

👉 Interact with our live example

Installing Guide

Install StackBlitz for Confluence

  1. Navigate to your site settings by clicking the (Administration) Settings on the top Confluence menu.

  2. Click Find new apps in the Atlassian Marketplace section of the Confluence sidebar.

  3. Type StackBlitz for Confluence into the search field & search.

  4. Click on StackBlitz for Confluence.

  5. Click Try it free.

  6. Click Start free trial.

  7. Confluence will let you know when StackBlitz for Confluence is successfully installed. 

Configuration

After installation, StackBlitz for Confluence is ready to use.

The default configuration supports embedding existing StackBlitz projects into your Confluence pages using the StackBlitz Project macro.

If your organization has StackBlitz Enterprise, you may opt to only connect your organization's private instance of StackBlitz to keep collaboration behind the firewall or choose to add both (your private instance & StackBlitz.com) to the add-on's whitelist.

Navigate to StackBlitz for Confluence Admin Configuration

  1. Navigate to your site settings by clicking the (Administration) Settings on the top Confluence menu.

  2. Click Manage apps in the Atlassian Marketplace section of the Confluence sidebar.

  3. Within User-installed apps, locate StackBlitz for Confluence

  4. Click Configure.

  5. Click Save to keep any changes.

Set the Whitelist of Allowed StackBlitz Servers

The default configuration, https://stackblitz.com allows users to embed projects from StackBlitz.com.

To collaborate behind the firewall, enter the name of your StackBlitz Enterprise server. To allow multiple servers to the whitelist, separate each with a comma.

Set Default Layout

Users will be able to modify the Theme, View, and Height of the StackBlitz Project Macro on their own, however, it is helpful to optimize for both performance and aesthetic as the admin.

Using the StackBlitz Project Macro

Common Use-cases

  • Rapid learning & documentation- show best practices in web-based development and provide enough context & detail as your audience needs. Viewers can interact with the code with no possibility to persist changes.

👉 Interact with our live example

  • Iterate quickly - Socialize a web-based prototype within Confluence. Allow stakeholders to see the idea and provide feedback before the team spends numerous hours implementing functionality that may or may not be valuable.

👉 Interact with our live example

Adding StackBlitz Project Macro

  1. From your Confluence page, add the macro StackBlitz Project.

  2. On the Edit 'StackBlitz Macro' Screen: within Project URL, paste the URL associated with your existing StackBlitz project.

  3. Default values for the look & feel are populated based on Admin Configuration. Change the default theme, view, & height, if desired.

  4. Optionally, click Hide Explorer to remove StackBlitz's navigation panel on the left side of the macro.

  5. Optionally, click Click to load to prevent Confluence from automatically running the StackBlitz for Confluence macro. This option is best used when several StackBlitz projects are displayed on one page.

 

Interacting with the StackBlitz Project Macro

Even Confluence users with read-only access can interact with the StackBlitz Project Macro. Choose to display the code as an editor, web preview, or both, depending on your interest.

For more information on StackBlitz functionality, check out StackBlitz's documentation.

 

 Technical users

  • View the web-based code in Editor mode & even try out something different. None of your tests are persisted. Check out the impact of your changes in the Preview mode. Refresh the page to start again.

  • Optionally, navigate directly to StackBlitz to examine the project further. None of your tests are persisted. Only an owner of the project can modify the project's code. 

  • Optionally, fork the example in StackBlitz. 

Business Users

  • Use StackBlitz's Preview mode to interact with the team's prototype.

  • Provide feedback directly in confluence to help the team iterate faster. 

More Information on StackBlitz 

For more information on StackBlitz functionality, check out StackBlitz's documentation.

For more information about StackBlitz collaboration behind the firewall, visit us at Expium.com

Search