Svelte Mindmap

Overview

SvelteMindmap is a Svelte component that allows users to create mindnode maps. Inspired by the react-mindmap library, it provides a simple and intuitive way to visualize and organize information. The component is available under the MIT License and can be found on npm. It is compatible with Svelte v3.

Features

• Array of objects used to render nodes
• Array of objects used to render connections
• Array of objects used to render subnodes
• Editor mode for moving around nodes

Installation

To install SvelteMindmap, you can use a bundler like Webpack or Rollup. Here is an example of how to do it:

1. Install the package via npm:

npm install svelte-mindmap

2. Import the component in your project:

import { Mindmap } from 'svelte-mindmap';

3. Use the component in your Svelte file:

<script>
  import { Mindmap } from 'svelte-mindmap';

  let nodes = [
    { text: 'Node 1' },
    { text: 'Node 2' }
    // Add more nodes here
  ];

  let connections = [
    { source: 'Node 1', target: 'Node 2' }
    // Add more connections here
  ];

  // Add more subnodes if needed
  let subnodes = [];

  let editable = false; // Set to true for editor mode
</script>

<Mindmap {nodes} {connections} {subnodes} {editable} />

Summary

SvelteMindmap is a powerful component that allows users to create mindnode maps in their Svelte projects. It provides essential features such as rendering nodes, connections, and subnodes. Additionally, it offers an editor mode for easy manipulation of the nodes. With its intuitive API and compatibility with popular bundlers, SvelteMindmap is a great tool for visualizing and organizing information.