https://github.com/xmindltd/xmind-embed-viewer
Use XMind share to present your .xmind files on your blog or website.
https://github.com/xmindltd/xmind-embed-viewer
blog mindmap mindmap-viewer mindmaps viewer xmind
Last synced: 4 months ago
JSON representation
Use XMind share to present your .xmind files on your blog or website.
- Host: GitHub
- URL: https://github.com/xmindltd/xmind-embed-viewer
- Owner: xmindltd
- License: mit
- Created: 2022-04-18T07:42:33.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-07-24T02:53:34.000Z (almost 3 years ago)
- Last Synced: 2025-10-17T04:50:18.767Z (6 months ago)
- Topics: blog, mindmap, mindmap-viewer, mindmaps, viewer, xmind
- Language: TypeScript
- Homepage: https://xmindltd.github.io/xmind-embed-viewer/
- Size: 271 KB
- Stars: 129
- Watchers: 4
- Forks: 18
- Open Issues: 8
-
Metadata Files:
- Readme: readme.md
- License: LICENSE.md
Awesome Lists containing this project
README
# XMind Embed Viewer
Use XMind share to present your `.xmind` files on your blog or website.
[Demo](https://xmindltd.github.io/xmind-embed-viewer/)
## Quick start
### Install
As an npm module
```shell
npm i xmind-embed-viewer
```
Or alternatively from `unpkg`/`jsdelivr` with a script tag as a UMD bundle
```html
// window.XMindEmbedViewer are available now.
```
### Base usage
```typescript
const viewer = new XMindEmbedViewer({
el: '#container-or-iframe-selector', // HTMLElement | HTMLIFrameElement | string
// 如果在中国大陆境内速度慢，可以添加的参数 `region: 'cn'` 改为使用 xmind.cn 的图库作为依赖。
// region: 'cn' //optinal, global(default) or cn
})
fetch('test-1.xmind')
.then(res => res.arrayBuffer())
.then(file => viewer.load(file))
```
The example are using [HTTP Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
See also demo source code [here](./public/index.html).
### Methods
#### Get viewer state
```typescript
console.log('Current zoomscales: ', viewer.zoomScale)
console.log('Current activated sheet id: ', viewer.currentSheetId)
console.log('All Sheets: ', viewer.sheets)
```
#### Load file into viewer
`viewer.load` are only accept `ArrayBuffer` object.
```typescript
fetch('test-1.xmind')
.then(res => res.arrayBuffer())
.then(file => viewer.load(file))
```
#### ZoomScale Control
Use extract scale value, Range: `50` - `500`
```typescript
viewer.setZoomScale(100)
```
Auto-fits with container bounds
```typescript
viewer.setFitMap()
```
#### Sheet Control
You can use `viewer.sheets` to retrieve all sheet attribute.
```typescript
viewer.switchSheet('sheet-id')
```
#### Update iframe style
```typescript
viewer.setStyles({
'width': '100%',
// CSS styles are available here
})
```
### Events
#### Add listener
```typescript
const callback = (payload) => {
console.log('Event callback with payload', payload)
}
viewer.addEventListener('event-name', callback)
viewer.removeEventListener('event-name', callback)
```
#### Available events:
* `map-ready`
* `zoom-change`
* `sheet-switch`
* `sheets-load`
## License
This project is licensed under the MIT License - see [LICENSE.md](LICENSE.md) file for details.