XMind Mind Map Embedding Guide
Pure Front-End Viewing and Customization

What is XMind Viewer?

XMind Viewer is a purely front-end tool for viewing and exporting XMind mind map files, supporting the XMind 8 (XML) and XMind 2020+ (JSON) formats. It uses SVG vector rendering and offers rich interactions such as lossless zooming, multiple layouts, node dragging, and dark mode, and it can be embedded into any website as a single HTML file.

The project ships in two versions: a full version (with a GUI, for local use) and an embed version (for embedding into web pages as an iframe or component). This guide focuses on how to use the embed version.

Features

• Multiple layout modes: top-down, single-sided left-right, double-sided left-right, radial (including a force-directed gravity layout)
• Node collapse / expand: hierarchical folding with smooth animations
• Node dragging: child nodes follow automatically
• Canvas operations: zoom, pan, fit to screen, reset view
• Fullscreen mode: supports both in-page fullscreen and system fullscreen
• Dark mode: preferences are saved automatically, easy on the eyes
• Export: JSON, Markdown, XMind 2020+, SVG, PNG, plus the .embed.json data package designed specifically for embedding
• Lightweight embedding: a single HTML file that loads data via URL parameters or global configuration
• Responsive: adapts to desktop and mobile

Embed Version Tutorial

1. Prepare the Data File

The embed version needs to load a .embed.json data file, which contains the mind map's structure, styles, images (base64 encoded), and more. You can generate this file with the full version's export feature:

• Open XmindViewer_full.html and import your .xmind file.
• Click "Export" → choose "Embed data (.embed.json)".
• The tool automatically extracts the node tree, styles, relationships, and images, and generates a JSON file.

You can also build this JSON by hand, but generating it automatically with the full version is recommended.

Tip: the exported .embed.json file contains the base64 data of all images, so the embed version displays everything even if the image paths stop working.

2. How to Embed

Deploy XmindViewer_embed.html and your .embed.json to the same server (or allow cross-origin access), then embed it with <iframe>.

Basic iframe example:

<div class="xmind-embed-wrapper">
  <iframe
    src="/path/to/XmindViewer_embed.html?data=/path/to/your.embed.json"
    class="xmind-embed-iframe"
    frameborder="0"
    allowfullscreen
    loading="lazy"
  ></iframe>
</div>

//the style is already written into styles.css and can be used directly
<style>
  .xmind-embed-wrapper {
    width: 100%;
    margin: 1rem 0;
    border-radius: 14px;
    overflow: hidden;
    background: #e8ecf1;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  }
  .xmind-embed-iframe {
    display: block;
    width: 100%;
    height: 600px;
    border: none;
  }
</style>

Configure via URL parameters (the following are supported):

• src: required, XmindViewer_embed | XmindViewer_embed_forceDot (unoptimized but has the gravity layout).
• data: required, the URL pointing to the .embed.json file (relative or absolute).
• dark: optional, true | false, defaults to false.
• layout: optional, top-down | left-right-one | left-right-both | radial, defaults to top-down.
• linestyle: optional, ortho (orthogonal) | curve, defaults to ortho.

Example:

/Xmind/XmindViewer_embed.html?dark=true&layout=radial&linestyle=curve&data=/data/mindmap.embed.json

Via global configuration (suitable for embedding the script directly in the host page):

You can set the window.__EMBED_CONFIG__ object in the host page, then dynamically load the embed version.

<script>
  window.__EMBED_CONFIG__ = {
    dataUrl: '/data/mindmap.embed.json',
    darkMode: true,
    layout: 'radial',
    lineStyle: 'curve'
  };
</script>
<!-- then load the embed version the normal way -->
<iframe src="/XmindViewer_embed.html" ...></iframe>

3. Live Demo

Below is an embedded example running for real (data comes from /ToolBase/Xmind/JSON/example.embed.json):

Note: if the content inside the iframe fails to load, make sure the paths to XmindViewer_embed.html and the .embed.json are correct, and that the server allows cross-origin access (usually no problem on the same domain).

Full Version vs. Embed Version

Advanced Configuration

All Supported URL Parameters

• data: data file URL (required)
• dark: whether to enable dark mode (true/false)
• layout: layout type, one of top-down (vertical), left-right-one (single-sided horizontal), left-right-both (double-sided horizontal), radial (radial)
• linestyle: connector style, ortho or curve

If both URL parameters and window.__EMBED_CONFIG__ are used, the URL parameters take precedence.

Custom Embed Styles

You can control the iframe container's size, corner radius, background, and more via CSS, as shown in the examples above. The embed version adapts to the container's size on its own.

FAQ

1. How do I generate the .embed.json file?

Use the full version (XmindViewer_full.html) to import your .xmind, then click "Export" → "Embed data (.embed.json)" to generate it.

2. Which browsers does the embed version support?

All modern browsers (Chrome, Edge, Firefox, Safari) are supported, including on mobile.

3. What if images show up as broken?

Check whether the image data in the .embed.json contains complete base64 strings (exported data already has them embedded). If you build the file yourself, make sure the image fields are correct.

4. Can I implement node click events in the embed version?

The current version doesn't expose an external API, but you can communicate with the parent page via postMessage (requires your own extension).

5. Does the embed version support fullscreen?

Yes — via the iframe's allowfullscreen attribute, users can click the fullscreen button in the bottom-right corner of the canvas to enter system fullscreen.

License

MIT License © 2026 NW

🤝 Contributing & Feedback

Issues and Pull Requests are welcome. If you run into any problems using it, you can contact the author (see the blog sidebar).

Happy Viewing! 🎉