HTML Macro in Confluence
🚀 Overview
HTML Macro in Confluence macro that gives you a code editor directly inside the page configuration dialog. Write HTML structure and CSS styles in two separate code panes, see a live preview update as you type, and publish the result as a rendered content block on your Confluence page.
The editor is split into two halves: a stacked panel of two code panes on the left (HTML and CSS) and a live preview canvas on the right. A snippet library drawer slides in on demand, pre-filtered to the language you were last editing.
✨ Key Features
🖊️ Two dedicated code panes — separate HTML and CSS editors, each collapsible independently
👁️ Real-time live preview — the preview canvas updates as you type (280 ms debounce)
📱 Responsive viewport switcher — preview content at Desktop (full width), Tablet (768 px), and Mobile (375 px)
📚 Built-in snippet library — 13 pre-built code blocks (8 HTML, 6 CSS) organized by category, searchable by name, inserted at cursor position
🔢 Line-number gutter — synchronized scrolling line numbers in each code pane
⌨️ Tab key indentation — Tab inserts two spaces instead of jumping focus
🔒 HTML sanitization — user HTML is sanitized via DOMPurify before rendering; scripts, event-handler attributes, and unsafe tags/URL schemes are stripped
🎨 CSS scoping — user CSS is automatically scoped to the macro container so styles cannot leak into the Confluence page chrome
💾 Download HTML — export the HTML + CSS panes combined into a single self-contained HTML file
📄 ADF export support — plain-text content is extracted from your HTML and embedded in the ADF document, making macro content searchable and included in Confluence PDF exports
🕐 Last-saved indicator — the status bar shows the exact date and time the macro was last saved
🛠️ How to Insert the Macro
Edit a Confluence Page — open the page and click Edit
Insert the Macro — type
/and search for the macro (listed as HTML Macro in Confluence)Write Your Content — the configuration dialog opens with two stacked code panes on the left and a live preview canvas on the right. Type or paste your HTML and CSS — the preview updates automatically
Save — the rendered output appears on your Confluence page exactly as it looks in the preview
⚙️ Configuration Options
Code Panes
Pane | Color | Purpose |
|---|---|---|
HTML | Red | Structural markup — headings, paragraphs, divs, tables, forms, SVG |
CSS | Blue | Visual styles — layout, typography, colors, animations |
Click a pane's header to collapse or expand it, giving the other pane more vertical room.
Keyboard shortcuts inside a pane
Key | Action |
|---|---|
Tab | Insert 2 spaces at cursor (does not move focus) |
Any key | Updates preview after a 280 ms debounce |
Utility Bar
Control | Description |
|---|---|
Snippets | Opens the snippet library drawer, pre-filtered to the language of the pane you last edited |
Desktop / Tablet / Mobile | Segmented viewport switcher for the preview device frame |
Status Bar
Indicator | Description |
|---|---|
Active pane | Which pane (HTML or CSS) was most recently edited |
Unsaved changes | A dot and label shown when you have edits not yet saved |
Last saved | The date and time the macro was last successfully saved |
📚 Snippet Library
Open with the Snippets button in the utility bar. Filter chips: All / HTML / CSS. A search field filters by name across both groups. Clicking a snippet inserts it at the cursor in the matching pane, auto-expanding that pane if collapsed, then closes the drawer and returns focus.
Available snippets
Group | Snippet |
|---|---|
HTML · Alerts | Info alert, Warning alert, Success alert |
HTML · Layout | Two columns, Three columns |
HTML · Cards | Pricing card |
HTML · Forms | Form skeleton |
HTML · Tables | Table |
CSS · Components | Alert styles, Card, Button |
CSS · Layout | Grid columns |
CSS · Forms | Form styles |
CSS · Animation | Fade-in animation |
🎯 Common Use Cases
Styled reference tables — build a table in HTML, style it with alternating row colors in CSS. (Sorting/interactivity is no longer possible without JS.)
Static dashboards — use the two/three-column layout snippets to build a KPI-style grid with color-coded status pills.
Animated announcements — combine the Fade-in animation CSS snippet with an alert/card HTML snippet for an attention-grabbing static callout.
Static form prototypes — use the Form skeleton + Form styles + Button snippets to mock up a form's visual layout (no submit handling, since JS is unavailable).
Custom callout boxes — brand-color alert boxes using the Alert styles CSS snippet with the HTML alert snippets.
⚠️ Best Practices
✔ Use the viewport switcher before saving — check Tablet and Mobile widths, especially for multi-column layouts
✔ Collapse the pane you're not actively editing to reduce scrolling
✔ Grab snippets first, then customize — editing a correct snippet is faster than starting from a blank pane
✔ Scope your CSS intentionally — user CSS is auto-scoped to the macro container, so write CSS as if you own the whole document
✔ Use the Download HTML button to share or archive a self-contained HTML+CSS file with someone who doesn't have Confluence access
✔ Do not embed secret data in the HTML or CSS pane — macro content is visible to anyone with page-view access
📞 Support & Feedback
Documentation: linked in-app via the Footer's "Documentation" link
Email: support@rvsoftwares.in