Manim for Confluence — User Documentation
What is Manim for Confluence?
Manim for Confluence is a Confluence macro that lets you embed live mathematical animations directly in any Confluence page. You write animation code using the Manim scene API, configure the canvas, and the animation renders right inside your page — no external tools, no exports, no uploads.
Installation
Manim for Confluence is installed from the Atlassian Marketplace.
- In your Confluence site, go to Settings (gear icon, top right).
- Select Manage apps from the left sidebar.
- Click Find new apps and search for Manim for Confluence.
- Click Install on the app listing and follow the prompts.
- Once installed, the macro is immediately available on all pages in your site — no per-space setup required.
You need Confluence Administrator permissions to install apps.
Adding the Macro to a Page
Manim for Confluence registers as a Confluence macro. Here's how to find and insert it:
- Open or create a Confluence page and enter Edit mode.
- Click the + (Insert) button in the editor toolbar, or type
/in the page body to open the macro browser. - Search for Manim and select Manim for Confluence from the results.
- The macro configuration panel opens automatically — see the next section for how to configure it.
- Click Save in the config panel to insert the macro, then publish your page.
The animation will render inline on the published page wherever you placed the macro.
Configuring the Macro
When you insert the macro (or click the macro on an existing page and choose Edit), the full-screen configuration panel opens. It has three main areas:
Top Bar
| Control | Description |
|---|---|
| Logo | Identifies the app — no action. |
| ? (Help) | Opens the user documentation in a popup panel inline. |
| Cancel | Closes the config panel without saving any changes. |
| Save | Saves your configuration and inserts/updates the macro on the page. |
Toolbar
The toolbar sits below the top bar and gives you quick access to the most common settings.
| Control | Description |
|---|---|
| Width (px) | Canvas width in pixels. Default: 800. Range: 100–10000. |
| Height (px) | Canvas height in pixels. Default: 450. Range: 100–1000. |
| Background | Colour picker for the canvas background. Default: #1C1C1C (near-black). |
| Templates | Quick-start buttons that load a ready-made animation into the code editor. |
Available templates:
- Basic — Creates, transforms, and fades shapes (circle → square → triangle).
- Manim Logo — Recreates the Manim CE logo using grouped shapes and LaTeX.
- Sine Curve — Animates a dot tracing a sine wave with a rotating circle.
- Moving Angle — Animates an angle label using a ValueTracker.
- Boolean Ops — Demonstrates union, intersection, and difference of ellipses.
- Point Trace — A dot that leaves a visible trail as it moves.
Clicking a template immediately loads its code into the editor and refreshes the preview.
Preview Panel
The preview panel shows a live render of your animation as you configure it. It updates automatically whenever you change the canvas size, background colour, or code. Use it to verify your animation looks correct before saving.
Code Editor
The bottom half of the config panel is a full Monaco code editor (the same engine as VS Code) with JavaScript syntax highlighting.
Write your animation using the Manim scene API. All Manim exports are available as global variables — you do not need to import anything. The scene object is injected automatically.
Basic example:
const circle = new Circle({ radius: 1.5, color: BLUE });
await scene.play(new Create(circle));
await scene.wait(1);
await scene.play(new FadeOut(circle));
The editor supports standard keyboard shortcuts (Ctrl/Cmd+Z for undo, etc.).
Advanced Settings
Advanced settings are not currently exposed in the toolbar UI but are stored in the macro configuration. They control playback behaviour:
| Setting | Description | Default |
|---|---|---|
| Autoplay | Whether the animation plays automatically when the page loads. | true |
| Playback speed | Multiplier for animation speed (0.25×, 0.5×, 1×, 1.5×, 2×). | 1 |
| Controls auto-hide delay | Milliseconds before player controls fade out. 0 = always visible. | 2500 |
| Controls position | Where the player controls appear on the canvas (top-left, top-right, bottom-left, bottom-right). | bottom-right |
| Controls theme | Light or dark player controls. | dark |
Viewing the Animation on a Page
Once the macro is saved and the page is published, the animation renders automatically in the page body. Visitors do not need any plugins or extensions — the animation runs entirely in the browser.
If autoplay is enabled, the animation starts as soon as the page loads. Otherwise, use the player controls overlaid on the canvas to play, pause, or scrub through the animation.
Editing an Existing Macro
- Open the Confluence page in Edit mode.
- Click on the Manim macro block in the page body.
- Click the Edit (pencil) icon that appears.
- The configuration panel reopens with your previously saved settings.
- Make your changes and click Save.
Troubleshooting
The animation doesn't appear on the page. Make sure the page has been published after saving the macro. The animation only renders on the published view, not in the editor preview.
I see "Loading animation…" but nothing plays. This usually means the macro hasn't been configured yet. Click the macro to edit it, add some code, and save.
My code throws an error in the preview.
Check the browser console for details. Common causes are typos in class names (e.g. Circel instead of Circle) or missing await before scene.play() calls.
The preview doesn't update after I change the code. The preview refreshes automatically on code changes. If it appears stuck, try changing the canvas width by 1px and back — this forces a full remount.
I can't open external links from the help popup. Forge apps run in a sandboxed iframe that blocks new tabs. The help button intentionally opens docs inline in a popup for this reason.