HTML Macro for Confluence Cloud: Introducing HTML Macro+

HTML Macro+ for Confluence is now available on the Atlassian Marketplace, and it's free.

Confluence is great for documentation, but sometimes you need more than the built-in macros offer. HTML Macro+ lets you put your own HTML, CSS and JavaScript on a Confluence Cloud page: interactive charts, branded sections, custom embeds and small tools for your team.

Does Confluence Cloud Have an HTML Macro?

No. Confluence Server and Data Center shipped an HTML macro (disabled by default, because raw HTML on a page is a security risk), plus an HTML Include macro for pulling in another page. Confluence Cloud has neither. If you paste HTML code into a Cloud page it shows up as plain text, and pages migrated from Server show the old macros as Error loading the extension! (or Unknown macro in the editor).

To use HTML in Confluence Cloud you need a Marketplace app that adds the macro back. HTML Macro+ is one of them. It renders your code in a sandboxed iframe, so it can't touch the rest of the page. For a broader, app-neutral walkthrough with copy-paste examples, read 5 ways to use HTML in Confluence Cloud.

Key Features

Code Editor with Live Preview

The macro opens a full-screen editor with three tabs (HTML, CSS and JavaScript) and syntax highlighting. A resizable split panel shows the rendered output as you type, and the preview runs the same code visitors will see.

Version History

Every save is recorded. Click History in the editor to see the last 10 versions of a macro, who saved each one and when, preview any of them and restore it. If someone else has the same macro open, the editor shows them, and tells you when they save, so two people don't silently overwrite each other. See version history and collaboration.

CSP Security Controls

Admins choose how external content is handled across the site:

• Block all: no external resources load. Only inline content and data URIs work.
• Whitelist only: resources load only from domains you approve. With an empty whitelist, nothing external loads.
• Allow all: any domain, subject to the allowed protocols. Meant for testing or fully trusted environments.

Security is enforced twice: the HTML is sanitised before rendering, and a Content Security Policy is injected into the iframe so the browser blocks anything outside the policy. That lets teams use Chart.js, maps or video embeds by whitelisting only the domains they trust. Admins can also set the allowed URL protocols and a maximum content size per macro. See security settings.

Editor Permissions for Users and Groups

Not everyone who can edit a page should be able to change embedded code. Admins can turn on Restrict editing to whitelisted users and groups and pick individual users, Confluence groups, or both. Group membership is checked each time someone opens the editor. Confluence admins always keep access. Everyone else still sees the rendered output, but not the source. See permissions.

Automatic Height

The macro's iframe adjusts its height to match the content, so there are no fixed heights to set and no blank space below your widget.

Usage Overview

The Usage tab lists every page that contains the macro, with totals for pages, published pages and spaces, and a sortable, searchable table with links to each page. It's handy for security reviews and cleanup.

HTML from Attachment

A second macro renders a complete .html file you upload in the macro editor, such as an exported report or a generated dashboard, with its styles kept. To update it, upload the new file. See HTML from Attachment.

Legacy Server/DC Macros

Pages migrated from Server or Data Center that used the HTML or HTML Include macros, or Macro Toolbox's HTML macro, render again as soon as HTML Macro+ is installed. Hover one in view mode and click Migrate to enable editing, or migrate whole spaces from the app's Migrate tab. Details are in Legacy Server/DC Macros.

Built on Atlassian Forge

HTML Macro+ runs on Atlassian Forge, with no servers of our own. Your HTML, CSS and JavaScript are stored with the macro inside your Confluence site. Content you write can still load external resources, such as a CDN script, an image or an API call, but only from domains your admin allows. In Block all mode, nothing external loads.

What Can You Build?

• Interactive charts using Chart.js or D3.js
• Branded space landing pages with custom CSS layouts
• Embedded maps and videos inside your own layout
• Tables with sorting and filtering
• Onboarding checklists and simple forms
• Status banners and countdowns

For working code, see 5 things you can build with HTML Macro+, charts in Confluence and how to build a status dashboard.

How to Add HTML to a Confluence Cloud Page

1. Install the app from the Atlassian Marketplace.
2. Open a Confluence page in edit mode, type /html and select HTML Macro+ for Confluence.
3. Write your markup in the HTML tab, styles in CSS and scripts in JavaScript.
4. Check the live preview as you type.
5. Click Save and publish the page.

A minimal example you can paste in to check it works:

<div class="status ok">All systems operational</div>

.status { padding: 12px 16px; border-radius: 8px; font-weight: 600; }
.ok { background: #e3fcef; color: #006644; }

Embed an HTML File, Web Page or iframe

Not everything starts as a snippet. A few common cases:

• Render an HTML file. Use the /HTML from Attachment macro and upload an .html file, such as an exported report or a generated dashboard, in the macro editor. Its styles are kept, so it looks the way it does in a browser. To update it, open the editor and upload the new version. See HTML from Attachment.
• Embed a web page or video. Confluence Cloud's built-in iFrame macro can show a page by URL, but it can't run your own code and many sites refuse to be framed. In HTML Macro+ you put the <iframe> in the HTML tab alongside your own markup. An admin adds the site's domain to the whitelist first, so only approved sites load.
• Paste embed code from another tool. Embed codes from form builders, maps or analytics widgets go in the HTML tab as they are, again with their domains whitelisted.

Custom CSS and Div Layouts

Confluence Cloud has no div macro and no way to add page-level CSS. Inside HTML Macro+ you can use any <div>, class and stylesheet you like: branded headers, callout boxes, two-column layouts or status badges. Styles stay inside the macro's frame, so they never leak into the rest of the page. For ready-made examples, see 5 things you can build with HTML Macro+.

Free on the Marketplace

HTML Macro+ for Confluence is free, with every feature included.

• Install HTML Macro+ for Confluence
• Read the documentation

Frequently Asked Questions

Can you use HTML in Confluence Cloud?

Not natively. Confluence Cloud has no HTML macro and treats pasted HTML code as text. You need an app such as HTML Macro+ that adds an HTML macro to the editor.

How do I embed HTML code in a Confluence page?

Install HTML Macro+, type /html on the page, select HTML Macro+ for Confluence, put your code in the HTML, CSS and JavaScript tabs and save. The page shows the rendered result.

Can I upload an HTML file and have Confluence render it?

Yes, with the HTML from Attachment macro that comes with HTML Macro+. Upload the .html file in the macro editor and it renders on the page with its styles.

Can I use JavaScript and external libraries?

Yes. Write JavaScript in the JavaScript tab. To load libraries such as Chart.js from a CDN, an admin whitelists the CDN's domain. See how to embed interactive charts.

Can I restrict editing to a team?

Yes. Add the team's Confluence group to the editor permissions, alongside any individual users.

---

Questions or feedback? Reach out via our support portal. We'd love to hear what you build with it.