Waldiez

import React from "react";
import ReactDOM from "react-dom/client";

import { Edge, Node, Viewport } from "@xyflow/react";

import { Waldiez, importFlow } from "@waldiez/react";
import "@waldiez/react/dist/@waldiez.css";

// starting with an empty flow
const nodes: Node[] = []
const edges: Edge[] = []
const viewport: Viewport = { x: 0, y: 0, zoom: 1 }

ReactDOM.createRoot(document.getElementById("root")!).render(
 <React.StrictMode>
   <Waldiez
     flowId="flow-0"
     storageId="storage-0"
     name="My Flow"
     description="A sample flow"
     tags={["example"]}
     requirements={[]}
     nodes={nodes}
     edges={edges}
     viewport={viewport}
   />
 </React.StrictMode>

import { Waldiez, importFlow, WaldiezProps } from "@waldiez/react";

// Import flow from an existing .waldiez file
// could be loaded from a backend or local storage
const flowJson = {
 // existing data
};

const flowData = importFlow(flowJson);

// Override specific properties
const overrides: Partial<WaldiezProps> = {
 onSave: (flow) => saveToBackend(flow),
 readOnly: isViewMode,
 skipImport: true,
};

function ExistingFlow() {
 return (
   <Waldiez
     {...flowData}
     {...overrides}
   />
 );
}