Rotatable Node

This example shows how to implement a custom node that can be rotated using CSS transforms.

import React from 'react';
import { ReactFlow, Background } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
 
import RotatableNode from './RotatableNode';
import { nodes, edges } from './initialElements';
 
const nodeTypes = {
  rotatableNode: RotatableNode,
};
 
function Flow() {
  return (
    <ReactFlow
      nodeTypes={nodeTypes}
      defaultNodes={nodes}
      defaultEdges={edges}
      fitView
      style={{ backgroundColor: "#F7F9FB" }}
    >
      <Background />
    </ReactFlow>
  );
}
 
export default Flow;

Feature Overview Dark Mode