Customers have installed this add-on in at least 6 active instances.
    by gentleface.comfor Confluence Cloud
    gentleface.com supports this add-on.

    Get support

    Free add-on

    Keep style guide of your user interface current and useful

    Keep style guide of your user interface current and useful

    Share the interface component code with your team

    Live preview complex components

    Edit your component code in Confluence

    Style guides are used to provide a consistent look and feel. They should be defined as part of usability and branding requirements and conformance should be monitored during development.

    Render the live fully functional interactive preview of your component using the component code and linked up to date JavaScript and CSS. Show HTML components as well as advanced SVG charts and JS based components.

    Edit your component code, change linked files URLs and development status in Confluence.

    More details

    • Share the formated interface component source code to be used by developers
    • List required dependancies (CSS and JavaScript)
    • Live preview the component using up to date published code and linked files
    • Explicitly set the component status

    User reviews

    (0)Sign in to write a review

    There are no reviews yet. Be the first to review this add-on.


    gentleface.com provides support for this add-on.

    Vendor support resources

    See existing Q&A in Atlassian CommunityAsk a question in the Atlassian Community

    Atlassian-hosted discussions connect you to other customers who use this add-on.


    Confluence Cloud Released 2017-05-04


    Implemented core features


    • Code editing
    • Functional live preview
    • Linking and using external CSS and JS


    1. Log into your Confluence instance as an admin.
    2. Click the admin dropdown and choose Add-ons. The Find new add-ons screen loads.
    3. Locate Component Guide for Design Systems.
    4. Click Install to download and install your add-on.
    5. You're all set! Click Close in the Installed and ready to go dialog.

    Similar add-ons