Visualize Text Node
A React Flow node component for displaying text content with Markdown support and a resizable interface
Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
"use client";
import "@xyflow/react/dist/style.css";
import {
addEdge,
applyEdgeChanges,
applyNodeChanges,
Background,
type Connection,
type EdgeChange,
type Node,
type NodeChange,
type NodeTypes,
ReactFlow,
ReactFlowProvider,
} from "@xyflow/react";
import { useCallback, useState } from "react";
import { VisualizeTextNode } from "@/components/ui/flow/visualize-text-node";
const nodeTypes: NodeTypes = {
"visualize-text": VisualizeTextNode,
};
const initialNodes = [
{
id: "node-1",
type: "visualize-text",
position: { x: 0, y: -50 },
data: {
input: "### I support markdown\n\nVisualize text coming from other nodes\n\n- 1\n- 2\n- 3",
status: "success",
},
},
];
export function VisualizeTextNodeDemo() {
const [nodes, setNodes] = useState<Node[]>(initialNodes);
const [edges, setEdges] = useState([]);
// Add default viewport configuration
const defaultViewport = { x: 100, y: 75, zoom: 1 };
const onNodesChange = useCallback(
(changes: NodeChange<Node>[]) =>
setNodes((nds) => applyNodeChanges(changes, nds)),
[],
);
const onEdgesChange = useCallback(
(changes: EdgeChange<never>[]) =>
setEdges((eds) => applyEdgeChanges(changes, eds)),
[],
);
const onConnect = useCallback(
(connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
[],
);
return (
<div className="w-full h-full">
<ReactFlowProvider>
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
nodeTypes={nodeTypes}
defaultViewport={defaultViewport}
/* fitView */
>
<Background />
</ReactFlow>
</ReactFlowProvider>
</div>
);
}
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 @simple-ai/visualize-text-node
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)