HTML

Embed HTML code directly into your Confluence Cloud pages, and set custom CSS styling with the Mosaic HTML Macro. This secure, lightweight editor lets you add HTML, CSS, and JavaScript (Advanced edition only) to your page, giving you precise control over layout and presentation.

The HTML Macro extends Confluence's native formatting tools, making it ideal for users who want flexible customisation options. With a live preview, a clean editing interface, and built-in sanitisation, you can safely craft and display custom content however you want.

In addition to the aesthetic benefits, the HTML macro provides an embedded code-editing environment within the Confluence editor. This allows technical users to produce structured content more efficiently by:

Interacting with a code editor interface rather than selecting formatting from the macro list.
Applying familiar formatting and syntax patterns which can be easily replicated.
Creating precise layouts and structures without additional workarounds.

Add an HTML Macro

Navigate to the page you would like to edit.
Click the Edit icon in the top-right of the page, or press `e` on your keyboard to display the page in Edit mode.
Type /html and select the HTML Mosaic macro.
In the macro editing window, you have the option to enter your HTML code under the HTML tab, CSS under the CSS tab, and JavaScript under the JS tab. You can view pre-made templates under the Library tab.
Alternatively, you can use the Import Code option to upload a file directly into the editor. The import code option lets you import a single combined file or individual HTML, CSS, and JS files. Code is automatically placed in the correct tab.
View the Preview pane to check how your code renders.
If part of your code is flagged by the sanitation rules, an error message will be displayed.
Click Save.
In the cloud editor, the HTML macro will render the code as expected.

Under the CSS tab, you can apply a custom style to a page. The style sheet can optionally be restricted to specific media types.

Edit the macro

To make changes to the macro HTML, CSS, or JavaScript, click the macro placeholder, then click the Edit icon. Make the required changes, then click Save.

Code Sanitisation

To keep your workspace secure, all HTML you add is automatically sanitised before the Macro can be saved. Sanitisation refers to cleaning your HTML code to remove any elements that could harm your site or other users. In the Mosaic HTML Macro, we ensure your site's safety by checking and filtering your HTML before saving it, ensuring only safe, supported tags and attributes have been entered. Sanitisation protects users against threats such as cross-site scripting (XSS).

Allow List

Category	Allowed	Allowed attributes (on specific tags)
Text & Layout	`p, div, span, h1–h6, ul, ol, li, pre, code, blockquote, hr, br`	Global: `id` (name-clobbering checked), `class, title`
Formatting	`strong, em, b, i`
Links & Media	`a, img`	`a: href` (protocol-filtered), `target, rel img: src` (protocol-filtered), `srcset` (protocol-filtered), `alt, width, height`
Tables	`table, thead, tbody, tr, th, td`	`td/th: colspan, rowspan`
CSS (Inline)	N/A (Via style attribute)	CSS Handling: Must be parsed and filtered against a specific property allow-list (layout, typography, color, spacing). `@import` and `url()` calls are blocked.

If you have entered code flagged as potentially malicious, the offending code is highlighted, and you are prevented from saving until the HTML meets all sanitisation rules.

Enable/Disable JavaScript

For enhanced security, administrators can control whether the HTML macro allows JavaScript execution. In the feature controls, admins may enable or disable JavaScript for Mosaic HTML macros. By default, JavaScript is disabled.

To configure HTML macro settings:

Navigate to the administrator cog.
Select Mosaic Feature controls from the left-hand navigation under Mosaic.
Toggle the JavaScript feature on and off here.

These settings are applied to the entire Confluence instance.

If an administrator disables JavaScript, any existing pages that use JavaScript in an HTML macro will no longer work as expected. We recommend you check your pages for JavaScript use before making changes to the settings. As a reminder, JavaScript is only available in Mosaic Advanced Edition.

Limitations

Any code entered into the HTML macro is page-specific and cannot be applied to spaces or a set of pages.
All code must pass the sanitisation rules to reduce threats.
To keep your Confluence environment safe, the HTML macro doesn't support full iframe embeds. Only Atlassian domains can be used for iframe functionality. For help with supported options or domain whitelisting, get in touch, or see here for information on how to insert an iframe using the Atlassian iFrame Macro.

Library

The library tab of the HTML macro houses pre-made full-page templates and reusable snippets, helping you build pages faster and with less need for manual coding. All templates and snippets go through full code sanitisation, ensuring your site's safety.

To view the library:

Navigate to the page you would like to edit.
Click the Edit icon in the top-right of the page, or press `e` on your keyboard to display the page in Edit mode.
Type /html and select the HTML Mosaic macro.
In the macro editing window, select the Library tab.
This tab displays a list of available templates and snippets.
Click the eye icon to preview a snippet from the library. This displays in the right-hand preview but is not added to your HTML or CSS code tabs.
To add a template to your page, click Add to editor. The code is now added to the HTML and CSS tabs where applicable.
Note that the template code is always added to the end of existing code. Once added to the editor, you can edit the template in the HTML and CSS tabs.
Click Save.

Examples

html
<body>
    <div class="image-card">
        <img src="https://images.unsplash.com/photo-1574158622682-e40e69881006?w=400&h=300&fit=crop"
            alt="Orange cat in blue background">
        <div class="image-card-content">
            <h3>Lorem ipsum title</h3>
            <p>This card includes <strong>ALT text</strong> for accessibility.</p>
        </div>
    </div>
</body>

css
body {
            font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            padding: 40px 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .image-card {
            background: #fff;
            gap: 30px;
            align-items: center;
            display: flex;
            width: 592px;
            padding: 16px;
            align-items: center;
            gap: 10px;
            border-radius: 20px;
            border: 1px solid #E1E1E1;
        }

        .image-card img {
            object-fit: cover;
            border-radius: 12px;
            width: 409px;
            height: 234px;
        }

        .image-card-content h3 {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 12px;
            color: #000;
        }

        .image-card-content p {
            font-size: 16px;
            color: #6b7280;
        }

        .image-card-content strong {
            color: #6b7280;
        }

        @media (max-width: 640px) {
            .image-card {
                flex-direction: column;
            }

            .image-card img {
                width: 100%;
            }
        }

html
<body>
  <div class="bullet-card">
          <div class="decorative-icons">
              <span class="icon-star">✦</span>
              <span class="icon-star">✦</span>
          </div>
          <h2>Lorem ipsum title</h2>
          <p class="subtitle">Lorem ipsum in two short bullets.</p>
          <ul>
              <li>Lorem ipsum</li>
              <li>Lorem ipsum</li>
          </ul>
      </div>
</body>

css
body {
            font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            padding: 40px 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .bullet-card {
            background: #fff;
            padding: 40px;
            border-radius: 20px;
            width: 100%;
            max-width: 600px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            position: relative;
        }

        .bullet-card h2 {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 4px;
            color: #000;
            border-bottom: 3px solid #6366f1;
            display: inline-block;
            padding-bottom: 4px;
        }

        .bullet-card .subtitle {
            font-size: 16px;
            color: #6b7280;
            margin-bottom: 24px;
        }

        .bullet-card ul {
            list-style: none;
        }

        .bullet-card li {
            font-size: 15px;
            color: #333;
            margin-bottom: 8px;
            padding-left: 20px;
            position: relative;
        }

        .bullet-card li:nth-child(1)::before {
            content: '';
            position: absolute;
            left: 0;
            top: 7px;
            width: 8px;
            height: 8px;
            background-color: #6366f1;
            border-radius: 50%;
        }

        .bullet-card li:nth-child(2)::before {
            content: '';
            position: absolute;
            left: 0;
            top: 7px;
            width: 8px;
            height: 8px;
            background-color: #10b981;
            border-radius: 50%;
        }

        .decorative-icons {
            position: absolute;
            right: 40px;
            top: 40px;
            display: flex;
            gap: 10px;
        }

        .icon-star {
            color: #6366f1;
            font-size: 48px;
            opacity: 0.6;
        }

        .icon-star:nth-child(2) {
            font-size: 36px;
        }TIME Card

html
<div class="timeline-card">
        <h4>Timeline</h4>
        <div class="timeline-item">
            <div class="timeline-dot blue"></div>
            <div class="timeline-content">
                <h5>Kickoff</h5>
                <p>Week 1</p>
            </div>
        </div>
        <div class="timeline-item">
            <div class="timeline-dot green"></div>
            <div class="timeline-content">
                <h5>Design</h5>
                <p>Weeks 2 - 3</p>
            </div>
        </div>
        <div class="timeline-item">
            <div class="timeline-dot red"></div>
            <div class="timeline-content">
                <h5>Launch</h5>
                <p>Week 4</p>
            </div>
        </div>
    </div>

css
body {
            font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            padding: 40px 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .timeline-card {
            background: #fff;
            padding: 30px;
            width: 100%;
            max-width: 600px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            border-radius: 20px;
            border: 1px solid #E1E1E1;
        }

        .timeline-card h4 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 24px;
            color: #000;
        }

        .timeline-item {
            display: flex;
            gap: 16px;
            margin-bottom: 20px;
            position: relative;
        }

        .timeline-item:not(:last-child)::after {
            content: '';
            position: absolute;
            left: 9px;
            top: 30px;
            width: 2px;
            height: calc(100% + 10px);
            background-color: #e5e7eb;
        }

        .timeline-dot {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .timeline-dot.blue {
            background-color: #6366f1;
        }

        .timeline-dot.green {
            background-color: #10b981;
        }

        .timeline-dot.red {
            background-color: #ef4444;
        }

        .timeline-content h5 {
            margin-bottom: 4px;
            color: #000;
            font-size: 16px;
            font-weight: 400;
            line-height: normal;
        }

        .timeline-content p {
            font-size: 12px;
            color: #6b7280;
        }

html
<div class="progress-card">
        <h4>Setup progress</h4>
        <div class="progress-bar-container">
            <div class="progress-bar">
                <div class="progress-fill"></div>
            </div>
            <span class="progress-percentage">65%</span>
        </div>
    </div>

css
body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            padding: 40px 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .progress-card {
            background: #fff;
            padding: 30px;
            border-radius: 20px;
            border: 1px solid #E1E1E1;
            width: 100%;
            max-width: 600px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .progress-card h4 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 16px;
            color: #000;
        }

        .progress-bar-container {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .progress-bar {
            flex: 1;
            height: 8px;
            background-color: #e5e7eb;
            border-radius: 10px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background-color: #6366f1;
            width: 65%;
            border-radius: 10px;
        }

        .progress-percentage {
            font-size: 14px;
            color: #6b7280;
            font-weight: 500;
        }