Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.yamuno.com/llms.txt

Use this file to discover all available pages before exploring further.

​
Quick Start Guide

​
Installation

  1. Go to the Atlassian Marketplace
  2. Search for “HTML Macro for Confluence”
  3. Click “Get it now” and select your Confluence Cloud instance
  4. Complete the installation

​
Add the Macro to a Page

  1. Open any Confluence page in edit mode
  2. Type /HTML Macro in the page body
  3. Select “HTML Macro for Confluence” from the suggestions
  4. The editor opens in a side panel

​
Write Your First Widget

The editor has three tabs — HTML, CSS, and JS. Write your code across tabs and see the output update in real time on the right. Example — a simple styled card: 
<div class="card">
  <h2>Hello from HTML Macro!</h2>
  <p>This renders inside Confluence.</p>
</div>

.card {
  background: #f0f4ff;
  border-left: 4px solid #504DC4;
  padding: 16px 20px;
  border-radius: 6px;
  font-family: sans-serif;
}
h2 { margin: 0 0 8px; color: #1E1B4B; }
p  { margin: 0; color: #444; }
  1. Click Save on the Confluence page — visitors see the rendered output

​
Use an External Library

To use a CDN library (e.g. Chart.js):
  1. Ask your Confluence admin to whitelist the CDN domain in Settings → HTML Macro → Security
  2. Include the script tag in your HTML:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart"></canvas>
<script>
  new Chart(document.getElementById('myChart'), {
    type: 'bar',
    data: { labels: ['A','B','C'], datasets: [{ data: [10,20,15] }] }
  });
</script>

​
Next Steps