React Flow: crea editores visuales con nodos conectados en React

Si alguna vez has necesitado mostrar en tu aplicación web un gráfico con nodos conectados que se puedan arrastrar, soltar y personalizar, probablemente te hayas preguntado cómo construirlo desde cero. La buena noticia es que no tienes que hacerlo: existe una biblioteca llamada React Flow que resuelve todo ese trabajo pesado por ti.

En este artículo te voy a mostrar qué es React Flow, cómo instalarlo, cómo funcionan sus conceptos básicos y algunos ejemplos prácticos de personalización, incluyendo cómo apoyarte en IA para acelerar tu desarrollo.

¿Qué es React Flow?

React Flow es una biblioteca open source con licencia MIT que permite crear interfaces basadas en nodos dentro de aplicaciones React. En otras palabras, te da un canvas interactivo donde puedes:

• Crear nodos (las "cajitas" que contienen información).
• Conectarlos mediante aristas (edges).
• Arrastrarlos, soltarlos, hacer zoom y paneo.
• Personalizar cada nodo como un componente de React normal.

Si el estilo de interfaz te suena familiar, es porque proyectos como n8n usan React Flow para construir su editor de automatizaciones. También lo utilizan empresas como Stripe (en sus documentaciones con diagramas de secuencia), Typeform (para visualizar la lógica de sus encuestas) y DoubleLoop (para construir dashboards de métricas de negocio).

La idea principal es darle al usuario la posibilidad de arrastrar elementos y crear diagramas de forma visual, algo muy útil cuando necesitas representar gráficos de red, pipelines, flujos de trabajo o cualquier estructura conectada.

Patrocinador: Seenode

Antes de entrar en código, si estás buscando desplegar una aplicación web completa —ya sea con Node.js, Python, Go o incluso Elixir— junto con una base de datos como PostgreSQL o MySQL, y a un buen precio, te recomiendo conocer Seenode.

Es una plataforma que permite subir proyectos web de forma muy simple: solo conectas tu repositorio de GitHub o GitLab, eliges tu proyecto y en segundos tu aplicación queda en línea con una URL pública lista para usar.

Algunas características incluidas:

• Dominio personalizado con HTTPS automático.
• Logs en tiempo real.
• Soporte para WebSockets y HTTP/2.
• Variables de entorno.
• Soporte 24/7.

En cuanto a precios, puedes desplegar bases de datos PostgreSQL o MySQL desde precios bajos mensuales, y servidores backend también por una tarifa accesible. Es una opción ideal para proyectos pequeños, MVPs o clientes con bajo presupuesto. También tienen un trial gratuito de 7 días si quieres probarlo antes. Te dejo el enlace en la descripción del video.

Instalación

React Flow está pensado exclusivamente para proyectos de React. Para este ejemplo voy a crear un proyecto nuevo con Vite, aunque también puedes usar Next.js si lo prefieres.

Primero, creamos el proyecto base:

npm create vite@latest my-react-flow-app -- --template react
cd my-react-flow-app
npm install

Luego, instalamos React Flow como dependencia adicional:

npm install @xyflow/react

Y finalmente, ejecutamos el servidor de desarrollo:

npm run dev

Con eso ya tenemos la base. Ahora toca añadir el componente en el código.

Estructura básica: nodos y aristas

En el archivo App.jsx, reemplazamos el contenido con el ejemplo mínimo que trae la documentación:

import { useState, useCallback } from 'react';
import {
  ReactFlow,
  applyNodeChanges,
  applyEdgeChanges,
  addEdge,
} from '@xyflow/react';

import '@xyflow/react/dist/style.css';

const initialNodes = [
  { id: 'n1', position: { x: 0, y: 0 }, data: { label: 'Nodo 1' } },
  { id: 'n2', position: { x: 0, y: 100 }, data: { label: 'Nodo 2' } },
];

const initialEdges = [
  { id: 'n1-n2', source: 'n1', target: 'n2' },
];

export default function App() {
  const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState(initialEdges);

  const onNodesChange = useCallback(
    (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
    [],
  );
  const onEdgesChange = useCallback(
    (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
    [],
  );
  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [],
  );

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
      />
    </div>
  );
}

Si refrescas el navegador, verás un lienzo con dos nodos conectados que puedes arrastrar libremente. La biblioteca ya se encarga automáticamente del arrastre, la conexión y la detección de eventos.

¿Qué hace cada parte?

• initialNodes: arreglo con los nodos iniciales. Cada nodo necesita mínimo un id, una position (coordenadas x, y dentro del canvas) y un objeto data (donde va el contenido, por ejemplo una etiqueta).
• initialEdges: arreglo con las conexiones entre nodos. Se indica de qué nodo sale (source) y a cuál llega (target).
• onNodesChange: se dispara cuando un nodo cambia (se mueve, se selecciona, etc.). La función applyNodeChanges de la propia biblioteca aplica los cambios automáticamente.
• onEdgesChange: lo mismo pero para las aristas.
• onConnect: se dispara cuando el usuario dibuja una nueva conexión entre dos nodos. La función addEdge se encarga de añadirla al estado.

Básicamente, no estás implementando lógica propia, solo conectando los manejadores con las funciones que la biblioteca ya trae.

Añadiendo más nodos y conexiones

Supongamos que quieres un tercer nodo y que esté conectado al primero. Solo tienes que ampliar los arreglos iniciales:

const initialNodes = [
  { id: 'n1', position: { x: 0, y: 0 }, data: { label: 'Nodo 1' } },
  { id: 'n2', position: { x: 0, y: 100 }, data: { label: 'Nodo 2' } },
  { id: 'n3', position: { x: 200, y: 50 }, data: { label: 'Nodo 3' } },
];

const initialEdges = [
  { id: 'n1-n2', source: 'n1', target: 'n2' },
  { id: 'n1-n3', source: 'n1', target: 'n3' },
];

Al refrescar, verás el nuevo nodo y las dos conexiones que parten del Nodo 1. Así de sencillo: los datos son declarativos, por lo que puedes generarlos dinámicamente desde una API, una base de datos o incluso desde el estado de tu aplicación.

Personalización: crear tu propio tipo de nodo

Aquí está la parte más potente de React Flow: cada nodo es un componente de React, así que puedes poner dentro cualquier cosa — formularios, inputs, imágenes, botones, lo que necesites.

Vamos a crear un nodo personalizado con un input de texto. Primero, creamos un archivo TextUpdaterNode.jsx:

import { useCallback } from 'react';
import { Handle, Position } from '@xyflow/react';

function TextUpdaterNode({ data, isConnectable }) {
  const onChange = useCallback((evt) => {
    console.log(evt.target.value);
  }, []);

  return (
    <div style={{ background: '#000', color: '#fff', padding: 20 }}>
      <Handle
        type="target"
        position={Position.Top}
        isConnectable={isConnectable}
      />
      <div>
        <label htmlFor="text">Texto:</label>
        <input id="text" name="text" onChange={onChange} />
      </div>
      <Handle
        type="source"
        position={Position.Bottom}
        isConnectable={isConnectable}
      />
    </div>
  );
}

export default TextUpdaterNode;

Luego, en App.jsx, registramos este nuevo tipo de nodo y lo añadimos al arreglo inicial:

import TextUpdaterNode from './TextUpdaterNode';

const nodeTypes = { textUpdater: TextUpdaterNode };

const initialNodes = [
  { id: 'n1', position: { x: 0, y: 0 }, data: { label: 'Nodo 1' } },
  { id: 'n2', position: { x: 0, y: 100 }, data: { label: 'Nodo 2' } },
  {
    id: 'n3',
    type: 'textUpdater',
    position: { x: 200, y: 50 },
    data: { label: 'Nodo Texto' },
  },
];

Y en el componente ReactFlow, pasamos la propiedad nodeTypes:

<ReactFlow
  nodes={nodes}
  edges={edges}
  nodeTypes={nodeTypes}
  onNodesChange={onNodesChange}
  onEdgesChange={onEdgesChange}
  onConnect={onConnect}
/>

¡Listo! Ahora tienes un nodo completamente personalizado con un input interactivo, estilos propios y conexiones que siguen funcionando como cualquier otro nodo.

Los componentes Handle son los pequeños puntos de conexión que aparecen en los bordes del nodo. Puedes colocarlos arriba (Position.Top), abajo (Position.Bottom), a los lados o donde prefieras.

Acelerando el desarrollo con IA

Algo que muchos ya estamos haciendo en el día a día es apoyarnos en IA para construir más rápido. En mi caso uso Claude Code, aunque puedes usar Copilot o cualquier otro asistente.

Por ejemplo, en un proyecto propio tengo una interfaz tipo Railway: un canvas con nodos que representan programas instalados en un Raspberry Pi, y al hacer clic en cualquiera se abre un sidebar con detalles y configuración. Todo ese tipo de UI se puede prototipar pidiéndole a la IA algo como:

"Crea un canvas de red usando React Flow, donde cada nodo sea un dispositivo rectangular y al hacer clic se abra un modal con un formulario de configuración."

La IA entiende la idea y arma el esqueleto. Normalmente no acierta al 100 % con el diseño en el primer intento, pero te acerca muchísimo en cuestión de segundos, y a partir de ahí puedes iterar con cambios pequeños ("hazlos más rectangulares", "agrega iconos", etc.).

El punto es que toda esta información puede venir de una API o base de datos, por lo que tu aplicación real solo tiene que generar los arreglos de nodes y edges y pasárselos a React Flow. La biblioteca no hace más que eso.

Agrupaciones y funcionalidades avanzadas

React Flow también soporta agrupaciones: rectángulos grandes que contienen a otros nodos, útiles para organizar secciones lógicas del diagrama. Su funcionamiento es básicamente el mismo — es un nodo especial que contiene otros nodos como hijos.

Otras funcionalidades útiles que trae la biblioteca out-of-the-box:

• Minimap para navegar por canvas grandes.
• Controles de zoom y centrado.
• Background con patrones de puntos o líneas.
• Node Toolbar y Node Resizer para UIs más avanzadas.

Si quieres inspiración, su web tiene un Showcase con ejemplos reales de plataformas que la usan en producción.

¿Y React Flow Pro?

Existe también una versión de pago llamada React Flow Pro. Está pensada principalmente para empresas que necesitan:

• Plantillas premium.
• Soporte directo en issues.
• Trabajar con los desarrolladores del equipo de xyflow para armar canvas complejos.

Para la gran mayoría de proyectos —especialmente si eres un desarrollador independiente o estás construyendo un proyecto personal— el plan gratuito es más que suficiente.

Conclusión

React Flow es una biblioteca excelente cuando necesitas:

• Interfaces de red o diagramas conectados.
• Editores visuales tipo n8n, Zapier o similares.
• Mostrar pipelines, flujos de trabajo o esquemas.
• Cualquier UI donde tengas nodos que se conectan entre sí.

Lo mejor es que es gratuita, tiene una API sencilla, está perfectamente mantenida y te ahorra muchísimas horas de desarrollo que de otro modo gastarías reimplementando arrastre, zoom, panning y detección de conexiones.

Si tienes alguna idea interesante sobre qué construir con React Flow o alguna duda, déjame un comentario en el video. Y si quieres una asesoría personalizada sobre este u otro tema, puedes reservarla directamente en fazt.dev.

¡Nos vemos en el siguiente video! 👋