streaming-mindmap-rendering

name	Streaming Mindmap Rendering
description	Implement real-time streaming mindmap rendering using Mind Elixir in web applications. Supports streaming text parsing and incremental updates.

Streaming Mindmap Rendering

This skill guides you through implementing a streaming mindmap renderer using mind-elixir. This technique allows you to display a mindmap that grows in real-time as data is generated by an AI model or fetched from a stream.

Prerequisites

• React (or any frontend framework, examples use React)
• mind-elixir library

1. Install Dependencies

First, ensure you have mind-elixir installed.

npm install mind-elixir

2. Component Structure

Create a wrapper component for mind-elixir to handle the lifecycle and updates.

import MindElixir, { type MindElixirData, type MindElixirInstance } from 'mind-elixir'
import { useEffect, useRef } from 'react'

export function MindmapRenderer({ data }: { data: MindElixirData | null }) {
  const elRef = useRef<HTMLDivElement>(null)
   meRef = useRef< | >()

  ( {
     (!elRef.) 

    meRef. =  ({
      : elRef.,
      : .,
    })

    
    meRef..(data || { : { : , :  } })

      {
      
    }
  }, [])

  
  ( {
     (meRef. && data) {
      
      meRef..(data)
    }
  }, [data])

   
}