JsMind.Blazor
A Blazor JSInterop wrapper for jsMind
Install / Use
/learn @StefH/JsMind.BlazorREADME
jsMind.Blazor
A Blazor JSInterop wrapper for jsMind.
Live Demo
https://stefh.github.io/jsMind.Blazor
Supported Functionality
See Wiki : Supported-Functionality
Usage
Install the NuGet
PM> Install-Package jsMind.Blazor
Add the required javascripts and stylesheet to _Host.cshtml (Server) or index.html (WebAssembly)
<head>
. . .
+ <script type="text/javascript" src="_content/jsMind.Blazor/jsmind.min.js"></script>
+ <script type="text/javascript" src="_content/jsMind.Blazor/jsmind-interop.min.js"></script>
+ <link type="text/css" rel="stylesheet" href="_content/jsMind.Blazor/jsmind.min.css" />
</head>
Add the required imports to the _Imports.razor
. . .
@using Microsoft.JSInterop
+ @using JsMind.Blazor.Components
+ @using JsMind.Blazor.Models
+ @using JsMind.Blazor.Events
+ @using JsMind.Blazor.Constants
Use the MindMapContainer
razor-html
@page "/"
<!-- Add the component -->
<MindMapTreeContainer @ref="_myTreeNodeContainer"
Options="@_options"
Data="@_treeData"
OnShow="@OnShowTree"
style="border:solid 1px blue; background:#f4f4f4;" />
razor - @code
{
private MindMapTreeContainer _myTreeNodeContainer;
// Define the MindMapOptions
readonly MindMapOptions _options = new MindMapOptions
{
Editable = false,
Theme = MindMapThemes.Primary
};
// Define some MindMapTreeData
readonly MindMapTreeData _treeData = new MindMapTreeData
{
RootNode = new MindMapTreeNode
{
Id = "root",
Topic = "-Root-",
Children = new List<MindMapTreeNode>
{
new MindMapTreeNode
{
Id = "sub1.0",
Topic = "sub1.0-right"
},
new MindMapTreeNode
{
Id = "sub1.1",
Topic = "sub1.1-right",
Children = new List<MindMapTreeNode>
{
new MindMapTreeNode
{
Id = "sub1.1a",
Topic = "sub1.1a-right"
}
}
},
new MindMapTreeNode
{
Id = "sub2",
Topic = "sub2-left",
Direction = MindMapNodeDirection.Left
}
}
}
};
async Task OnShowTree(EventArgs args)
{
// When the MindMap is displayed, expand all nodes
await _myTreeNodeContainer.Expand();
}
}
Sponsors
Entity Framework Extensions and Dapper Plus are major sponsors and proud to contribute to the development of jsMind.Blazor.
Related Skills
node-connect
347.9kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
108.7kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
347.9kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
347.9kQQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。
