Writing macro content

Use the Custom Code Macro HTML CSS JS macro when a Confluence page needs a self-contained interactive block. The macro source can include inline HTML, CSS, and browser JavaScript.

Create a macro

Edit the Confluence page.
Insert Custom Code Macro HTML CSS JS.
The full-screen configuration editor opens automatically.
Replace the starter source, set a maximum height, and select Save.
Publish or update the Confluence page.

The editor preserves the source as entered. It does not format, lint, preview, or validate your HTML, CSS, or JavaScript.

Normal macro source

The Normal macro treats its source as content for an HTML <body>. Write a fragment: do not include <!doctype html>, <html>, <head>, or <body> tags.

<style>
  .score-card {
    max-width: 28rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background: #e9f2ff;
    font: 16px/1.5 system-ui, sans-serif;
  }
</style>

<section class="score-card">
  <strong id="score">0</strong>
  <button type="button" id="add">Add point</button>
</section>

<script>
  const score = document.querySelector('#score');
  document.querySelector('#add').addEventListener('click', () => {
    score.textContent = String(Number(score.textContent) + 1);
  });
</script>

Keep styles scoped to a wrapper class where practical. This makes the source easier to maintain and avoids relying on document-wide defaults.

Advanced macro source

Custom Code Macro HTML CSS JS Advanced is retained for existing macros. It is not available for new insertion. If you edit an existing Advanced macro, its source is interpreted as a complete HTML document, so it may include <!doctype html>, <html>, <head>, and <body>.

The app adds its own runtime policy and sizing support when it renders the document. Do not rely on legacy Connect resources or on an AP global; they are not provided.

Authoring guidance

Keep everything required for the macro inside its source: markup, styles, and scripts.
Use standard DOM APIs such as querySelector, event listeners, and local state.
Design for the width available in a Confluence content column; responsive CSS is usually preferable to fixed widths.
Make interactive controls keyboard-accessible and use semantic HTML where possible.
Test the macro in the same Confluence page layout where it will be used.
Do not paste credentials, access tokens, or other secrets into the source. Macro source is Confluence page content.

For resource and platform restrictions, see Security and limitations.