Visualize Text Node

Overview

The Visualize Text Node is a simple React Flow component that displays text content from other nodes with Markdown support. It provides:

• A resizable container for displaying text
• Markdown rendering for formatted text display
• A single input handle to receive text from other nodes
• Visual status feedback for different states

Components Used

This node is built using several React Flow Components:

• Base Node - For the core node structure and styling
• Node Header - For the node's header section
• Labeled Handle - For the input connection point

It also uses our Markdown Content component for rendering markdown-formatted text.

Installation

pnpm dlx shadcn@latest add https://simple-ai.dev/r/visualize-text-node.json

Usage

The Visualize Text Node is designed to display text content from other nodes. Here's how to implement it in your React Flow application:

// Example usage of the Visualize Text Node
const nodes = [
  {
    id: "visualize-1",
    type: "visualize-text",
    position: { x: 0, y: 0 },
    data: {
      input: "### Markdown Example\n\nDisplaying text with:\n- Markdown formatting\n- From other nodes",
      status: "success"
    }
  }
];
 
// Register the node type
const nodeTypes = {
  "visualize-text": VisualizeTextNode,
};

The node provides the following connection point:

• Input:
  • input: Receives text content to be displayed

The node's features include:

• Markdown rendering support
• Resizable display area
• Text selection enabled
• Status indication (idle, processing, error, success)