DEV Community

Cover image for Embed Custom HTML, CSS & JavaScript in Confluence — Introducing HTML Macro for Confluence
Yamuno for Yamuno Software

Posted on • Originally published at yamuno.com

Embed Custom HTML, CSS & JavaScript in Confluence — Introducing HTML Macro for Confluence

Introducing HTML Macro for Confluence

We're thrilled to announce that HTML Macro for Confluence is now live on the Atlassian Marketplace — and it's free!

Confluence is great for documentation, but sometimes you need more than what native macros can offer. Now you can embed fully custom HTML, CSS, and JavaScript directly inside any Confluence page — interactive charts, branded sections, custom embeds, you name it.

HTML Macro for Confluence Banner

What Is HTML Macro for Confluence?

HTML Macro for Confluence is a Forge-native Confluence Cloud app that lets you insert a rich code editor directly into any page. Write HTML, CSS, and JavaScript with syntax highlighting, see a live preview as you type, and publish polished interactive content — all without leaving Confluence.

Key Features

Code Editor with Live Preview

The macro opens a three-tab editor (HTML, CSS, JS) with syntax highlighting. A resizable split panel shows the rendered output in real time as you type — no more guessing how your code will look once saved.

Live Preview Editor

Enterprise-Grade CSP Security

Security is built in, not bolted on. Admins choose from three Content Security Policy modes:

  • Block All — no external resources allowed (strictest, default)
  • Whitelist — only domains you explicitly approve can load resources
  • Allow All — unrestricted, for trusted internal environments

This means you can let teams use Chart.js, Google Maps, or YouTube embeds safely — by whitelisting only the domains you trust.

Editor Access Control

Not everyone on a page should be able to edit embedded code. HTML Macro lets admins whitelist specific users who can open the code editor. Everyone else sees only the rendered output — source code stays private.

Automatic iframe Height

The macro auto-adjusts its iframe height to match the content — no fixed heights to set, no awkward blank space below your widget.

Macro Usage Analytics

Admins get a dashboard showing every Confluence page using the HTML Macro across the entire instance, with space breakdowns and direct page links. Understand adoption and audit usage in seconds.

Runs Entirely on Atlassian Forge

HTML Macro for Confluence is 100% Forge-native. All content is stored inside Atlassian's infrastructure. Nothing is sent to external servers — ever.

What Can You Build?

Here are a few things teams are already building with HTML Macro for Confluence:

  • Interactive dashboards using Chart.js or D3.js
  • Branded internal landing pages with custom CSS layouts
  • Embedded maps via Google Maps or Leaflet
  • Video embeds (YouTube, Vimeo) with custom styling
  • Custom tables and data grids with sorting and filtering
  • Onboarding checklists and interactive forms
  • Countdown timers and status banners

If you can build it with HTML, CSS, and JavaScript — you can put it in Confluence.

Getting Started

  1. Install the app from the Atlassian Marketplace
  2. Open any Confluence page and type /HTML Macro
  3. Write your HTML, CSS, and JavaScript in the editor
  4. See the live preview update as you type
  5. Save and publish — your content is live

Free on the Marketplace

HTML Macro for Confluence is available for free. Install it today and start building richer Confluence pages in minutes.

👉 Install HTML Macro for Confluence

👉 Read the Documentation


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

Top comments (0)