HTML Macro+ for Confluence: quick start

Get up and running with HTML Macro+ for Confluence in just a few steps.

Overview

HTML Macro+ for Confluence lets you embed fully custom HTML, CSS, and JavaScript directly inside any Confluence page. Build rich interactive widgets, branded layouts, data visualisations, embedded content, and more, without leaving Confluence. Admins can also keep shared variables, components and brand settings in a library that every macro on the site can use.

Want to see it before you install? The HTML Macro+ live demos are real Confluence pages built with the macro, including a sales dashboard, an interactive chart and a status page. Anyone can open them without logging in.

Prerequisites

Atlassian Confluence Cloud instance
App installed from Atlassian Marketplace
Confluence Space or Page edit permissions
An active subscription (free for sites with up to 10 users) or a Marketplace free trial. See Licensing.

Installed the app while it was free? A site admin approves the paid update once: see Update to the paid version. Until 28 February 2027, there's 25% off monthly and annual subscriptions.

Step 1: Install the app

Install HTML Macro+ for Confluence from the Atlassian Marketplace. See the Installation Guide for step-by-step instructions.

Step 2: Add the macro to a page

Open a Confluence page in edit mode
Type the slash command:
```
/html
```
Select HTML Macro+ for Confluence from the dropdown
The macro editor opens in a full-screen panel

Step 3: Write your content

The editor has three tabs: HTML, CSS, and JavaScript. Write your content across any combination of tabs and see it rendered live in the preview pane on the right.

Simple example:

<div class="card">
  <h2>Hello, Confluence!</h2>
  <p>This is custom HTML rendered inside a Confluence page.</p>
</div>

.card {
  background: #f4f5f7;
  border-radius: 8px;
  padding: 24px;
  font-family: -apple-system, sans-serif;
}

Step 4: Save

Click Save in the bottom toolbar. Your HTML is saved to the macro configuration and will render for every visitor to that page.

Use the library (optional)

If an admin has set up the library, use the Variables and Components buttons in the editor header to insert shared values such as {{companyName}} and ready-made components such as <ReleaseBanner />. Brand colours and fonts are available in your CSS, for example color: var(--brand-primary);.