HTML Editor

The HTML editor is the authoring environment for your macro content. It opens in a full-screen panel when you add or edit an HTML macro on a Confluence page.

HTML Editor & Live Preview

Editor Layout

The editor is split into two resizable panels:

  • Left panel — code editor with HTML, CSS, and JavaScript tabs
  • Right panel — live preview of your rendered content

Drag the divider between panels to resize them to your preference.

Code Editor Tabs

HTML Tab

Write the markup for your content. Standard HTML5 is fully supported. You do not need to include <html>, <head>, or <body> tags — just write the body content directly.

<div class="announcement">
  <h2>📣 Team Update</h2>
  <p>The Q2 roadmap has been published. <a href="/wiki/spaces/PROD">View it here.</a></p>
</div>

CSS Tab

Write styles scoped to your macro. You have full access to CSS3 features including flexbox, grid, custom properties, animations, and media queries.

.announcement {
  background: #e3fcef;
  border-left: 4px solid #00875a;
  border-radius: 4px;
  padding: 16px 20px;
}

.announcement h2 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: #006644;
}

JavaScript Tab

Write vanilla JavaScript to add interactivity. Your script runs inside a sandboxed iframe. Standard browser APIs (document, fetch, localStorage, setTimeout, etc.) are all available.

document.querySelectorAll('.tab-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelector('.tab-btn.active').classList.remove('active');
    btn.classList.add('active');
  });
});

Note: External scripts loaded via <script src="..."> are subject to the CSP security settings configured by your admin.

Editor Settings

Click the Settings icon in the bottom toolbar to configure:

Setting Description
Theme Light (tomorrow) or dark (monokai) editor theme
Font Size Code font size in pixels
Tab Size Spaces per indentation level
Line Numbers Show or hide line numbers
Auto-complete Enable bracket/tag completion
Live Preview Toggle real-time preview updates
Auto-save Automatically save drafts on a timer

Toolbar Actions

Button Action
Save Save content and close editor
Cancel Discard changes and close editor
Export Download all three files as a .zip
Settings Open editor preferences

Keyboard Shortcuts

Shortcut Action
Ctrl/Cmd + S Save
Tab Indent selected lines
Shift + Tab Unindent selected lines
Ctrl/Cmd + / Toggle comment

Tips

  • Use the CSS tab instead of inline style="" attributes — your CSS is applied globally to everything in the HTML tab.
  • Separate concerns — keep layout in HTML, styling in CSS, and behaviour in JavaScript. This makes your macro much easier to maintain.
  • The preview is live — you don't need to save to see your changes. The preview pane updates as you type.