+>(({ className, ...props }, ref) => (
+ [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+ HTMLTableCaptionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>({
+ size: "default",
+ variant: "default",
+})
+
+const ToggleGroup = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, variant, size, children, ...props }, ref) => (
+
+
+ {children}
+
+
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, children, variant, size, ...props }, ref) => {
+ const context = React.useContext(ToggleGroupContext)
+
+ return (
+
+ {children}
+
+ )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/apps/ui-components/components/ui/toggle.tsx b/apps/ui-components/components/ui/toggle.tsx
new file mode 100644
index 000000000..c50c2733f
--- /dev/null
+++ b/apps/ui-components/components/ui/toggle.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+ "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+ {
+ variants: {
+ variant: {
+ default: "bg-transparent",
+ outline:
+ "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+ },
+ size: {
+ default: "h-9 px-3",
+ sm: "h-8 px-2",
+ lg: "h-10 px-3",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+const Toggle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, variant, size, ...props }, ref) => (
+
+
+
+
+ );
+}
diff --git a/apps/ui-components/registry/components/animated-svg-edge/index.tsx b/apps/ui-components/registry/components/animated-svg-edge/index.tsx
new file mode 100644
index 000000000..435fd9298
--- /dev/null
+++ b/apps/ui-components/registry/components/animated-svg-edge/index.tsx
@@ -0,0 +1,247 @@
+import type { Edge, EdgeProps, Position } from "@xyflow/react";
+import {
+ BaseEdge,
+ getBezierPath,
+ getStraightPath,
+ getSmoothStepPath,
+} from "@xyflow/react";
+
+export type AnimatedSvgEdge = Edge<{
+ /**
+ * The amount of time it takes, in seconds, to move the shape one from end of
+ * the edge path to the other.
+ */
+ duration: number;
+ /**
+ * The direction in which the shape moves along the edge path. Each value
+ * corresponds to the following behaviour:
+ *
+ * - `forward`: The shape moves from the source node to the target node.
+ *
+ * - `reverse`: The shape moves from the target node to the source node.
+ *
+ * - `alternate`: The shape moves from the source node to the target node and
+ * then back to the source node.
+ *
+ * - `alternate-reverse`: The shape moves from the target node to the source
+ * node and then back to the target node.
+ *
+ * If not provided, this defaults to `"forward"`.
+ */
+ direction?: "forward" | "reverse" | "alternate" | "alternate-reverse";
+ /**
+ * Which of React Flow's path algorithms to use. Each value corresponds to one
+ * of React Flow's built-in edge types.
+ *
+ * If not provided, this defaults to `"bezier"`.
+ */
+ path?: "bezier" | "smoothstep" | "step" | "straight";
+ /**
+ * The number of times to repeat the animation before stopping. If set to
+ * `"indefinite"`, the animation will repeat indefinitely.
+ *
+ * If not provided, this defaults to `"indefinite"`.
+ */
+ repeat?: number | "indefinite";
+ shape: keyof typeof shapes;
+}>;
+
+/**
+ * The `AnimatedSvgEdge` component renders a typical React Flow edge and animates
+ * an SVG shape along the edge's path.
+ */
+export function AnimatedSvgEdge({
+ id,
+ sourceX,
+ sourceY,
+ targetX,
+ targetY,
+ sourcePosition,
+ targetPosition,
+ data = {
+ duration: 2,
+ direction: "forward",
+ path: "bezier",
+ repeat: "indefinite",
+ shape: "circle",
+ },
+ ...delegated
+}: EdgeProps) {
+ const Shape = shapes[data.shape];
+
+ const [path] = getPath({
+ type: data.path ?? "bezier",
+ sourceX,
+ sourceY,
+ sourcePosition,
+ targetX,
+ targetY,
+ targetPosition,
+ });
+
+ const animateMotionProps = getAnimateMotionProps({
+ duration: data.duration,
+ direction: data.direction ?? "forward",
+ repeat: data.repeat ?? "indefinite",
+ path,
+ });
+
+ return (
+ <>
+
+
+ ),
+
+ package: ({ animateMotionProps }) => (
+
+
+ ),
+} satisfies Record;
+
+/**
+ * Chooses which of React Flow's edge path algorithms to use based on the provided
+ * `type`.
+ */
+function getPath({
+ type,
+ sourceX,
+ sourceY,
+ targetX,
+ targetY,
+ sourcePosition,
+ targetPosition,
+}: {
+ type: "bezier" | "smoothstep" | "step" | "straight";
+ sourceX: number;
+ sourceY: number;
+ targetX: number;
+ targetY: number;
+ sourcePosition: Position;
+ targetPosition: Position;
+}) {
+ switch (type) {
+ case "bezier":
+ return getBezierPath({
+ sourceX,
+ sourceY,
+ targetX,
+ targetY,
+ sourcePosition,
+ targetPosition,
+ });
+
+ case "smoothstep":
+ return getSmoothStepPath({
+ sourceX,
+ sourceY,
+ targetX,
+ targetY,
+ sourcePosition,
+ targetPosition,
+ });
+
+ case "step":
+ return getSmoothStepPath({
+ sourceX,
+ sourceY,
+ targetX,
+ targetY,
+ sourcePosition,
+ targetPosition,
+ borderRadius: 0,
+ });
+
+ case "straight":
+ return getStraightPath({
+ sourceX,
+ sourceY,
+ targetX,
+ targetY,
+ });
+ }
+}
+
+/**
+ * Construct the props for an `
+
+
+
+ );
+}
diff --git a/apps/ui-components/registry/components/annotation-node/index.tsx b/apps/ui-components/registry/components/annotation-node/index.tsx
new file mode 100644
index 000000000..3673d7e2a
--- /dev/null
+++ b/apps/ui-components/registry/components/annotation-node/index.tsx
@@ -0,0 +1,32 @@
+import { type Node, type NodeProps } from "@xyflow/react";
+import { CSSProperties } from "react";
+
+type AnnotationNode = Node<{
+ label: string;
+ level: number;
+ arrow: string;
+ arrowStyle: CSSProperties;
+}>;
+
+export function AnnotationNode({ data }: NodeProps) {
+ return (
+
+
{data.level}.
+
{data.label}
+ {data.arrowStyle && (
+
+ {data.arrow}
+
+ )}
+
+ A node with two handles
+
+ );
+});
+
+CustomNode.displayName = "BaseHandleDemo";
+
+export default CustomNode;
diff --git a/apps/ui-components/registry/components/base-handle/index.tsx b/apps/ui-components/registry/components/base-handle/index.tsx
new file mode 100644
index 000000000..34807e51d
--- /dev/null
+++ b/apps/ui-components/registry/components/base-handle/index.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import { Handle, HandleProps } from "@xyflow/react";
+import { cn } from "@/lib/utils";
+
+export const BaseHandle = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes & HandleProps
+>(({ className, ...props }, ref) => (
+
+ <>
+ {data.label}
+
+ );
+}
+
+export default function Demo() {
+ return (
+
+
+
+
+ );
+}
diff --git a/apps/ui-components/registry/components/base-node/index.tsx b/apps/ui-components/registry/components/base-node/index.tsx
new file mode 100644
index 000000000..ac0848392
--- /dev/null
+++ b/apps/ui-components/registry/components/base-node/index.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+export const BaseNode = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes & { selected?: boolean }
+>(({ className, selected, ...props }, ref) => (
+
+));
+BaseNode.displayName = "BaseNode";
diff --git a/apps/ui-components/registry/components/base-node/registry.json b/apps/ui-components/registry/components/base-node/registry.json
new file mode 100644
index 000000000..23dc46d98
--- /dev/null
+++ b/apps/ui-components/registry/components/base-node/registry.json
@@ -0,0 +1,16 @@
+{
+ "name": "base-node",
+ "type": "registry:component",
+ "dependencies": ["@xyflow/react"],
+ "devDependencies": [],
+ "registryDependencies": [],
+ "files": [
+ {
+ "type": "registry:component",
+ "path": "base-node.tsx"
+ }
+ ],
+ "tailwind": {},
+ "cssVars": {},
+ "meta": {}
+}
diff --git a/apps/ui-components/registry/components/button-edge/demo.tsx b/apps/ui-components/registry/components/button-edge/demo.tsx
new file mode 100644
index 000000000..1ed2ced1e
--- /dev/null
+++ b/apps/ui-components/registry/components/button-edge/demo.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { Background, ReactFlow } from "@xyflow/react";
+import { ButtonEdge } from "@/registry/components/button-edge";
+
+const defaultNodes = [
+ {
+ id: "1",
+ position: { x: 200, y: 200 },
+ data: { label: "Node" },
+ },
+ {
+ id: "2",
+ position: { x: 500, y: 500 },
+ data: { label: "Node" },
+ },
+];
+
+const defaultEdges = [
+ {
+ id: "e1-2",
+ source: "1",
+ target: "2",
+ type: "buttonEdge",
+ },
+];
+
+const edgeTypes = {
+ buttonEdge: ButtonEdge,
+};
+
+export default function Demo() {
+ return (
+
+
+
+
+ );
+}
diff --git a/apps/ui-components/registry/components/button-edge/index.tsx b/apps/ui-components/registry/components/button-edge/index.tsx
new file mode 100644
index 000000000..d54a7cd19
--- /dev/null
+++ b/apps/ui-components/registry/components/button-edge/index.tsx
@@ -0,0 +1,53 @@
+import {
+ BaseEdge,
+ EdgeLabelRenderer,
+ EdgeProps,
+ getBezierPath,
+ useReactFlow,
+} from "@xyflow/react";
+
+import { Button } from "@/components/ui/button";
+import { MousePointerClick } from "lucide-react";
+
+export function ButtonEdge({
+ id,
+ sourceX,
+ sourceY,
+ targetX,
+ targetY,
+ sourcePosition,
+ targetPosition,
+ style = {},
+ markerEnd,
+}: EdgeProps) {
+ const [edgePath, labelX, labelY] = getBezierPath({
+ sourceX,
+ sourceY,
+ sourcePosition,
+ targetX,
+ targetY,
+ targetPosition,
+ });
+
+ const onEdgeClick = () => {
+ window.alert(`Edge with id: ${id} has been clicked!`);
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/ui-components/registry/components/button-edge/registry.json b/apps/ui-components/registry/components/button-edge/registry.json
new file mode 100644
index 000000000..a3d42591e
--- /dev/null
+++ b/apps/ui-components/registry/components/button-edge/registry.json
@@ -0,0 +1,16 @@
+{
+ "name": "button-edge",
+ "type": "registry:component",
+ "dependencies": ["@xyflow/react", "lucide-react"],
+ "devDependencies": [],
+ "registryDependencies": ["button"],
+ "files": [
+ {
+ "type": "registry:component",
+ "path": "button-edge.tsx"
+ }
+ ],
+ "tailwind": {},
+ "cssVars": {},
+ "meta": {}
+}
diff --git a/apps/ui-components/registry/components/database-schema-node/demo.tsx b/apps/ui-components/registry/components/database-schema-node/demo.tsx
new file mode 100644
index 000000000..53c18f537
--- /dev/null
+++ b/apps/ui-components/registry/components/database-schema-node/demo.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { Background, Edge, ReactFlow } from "@xyflow/react";
+import { DatabaseSchemaNode } from "@/registry/components/database-schema-node";
+
+const defaultNodes = [
+ {
+ id: "1",
+ position: { x: 0, y: 0 },
+ type: "databaseSchema",
+ data: {
+ label: "Products",
+ schema: [
+ { title: "id", type: "uuid" },
+ { title: "name", type: "varchar" },
+ { title: "description", type: "varchar" },
+ { title: "warehouse_id", type: "uuid" },
+ { title: "supplier_id", type: "uuid" },
+ { title: "price", type: "money" },
+ { title: "quantity", type: "int4" },
+ ],
+ },
+ },
+ {
+ id: "2",
+ position: { x: 350, y: -100 },
+ type: "databaseSchema",
+ data: {
+ label: "Warehouses",
+ schema: [
+ { title: "id", type: "uuid" },
+ { title: "name", type: "varchar" },
+ { title: "address", type: "varchar" },
+ { title: "capacity", type: "int4" },
+ ],
+ },
+ },
+ {
+ id: "3",
+ position: { x: 350, y: 200 },
+ type: "databaseSchema",
+ data: {
+ label: "Suppliers",
+ schema: [
+ { title: "id", type: "uuid" },
+ { title: "name", type: "varchar" },
+ { title: "description", type: "varchar" },
+ { title: "country", type: "varchar" },
+ ],
+ },
+ },
+];
+
+const defaultEdges: Edge[] = [
+ {
+ id: "products-warehouses",
+ source: "1",
+ target: "2",
+ sourceHandle: "warehouse_id",
+ targetHandle: "id",
+ },
+ {
+ id: "products-suppliers",
+ source: "1",
+ target: "3",
+ sourceHandle: "supplier_id",
+ targetHandle: "id",
+ },
+];
+
+const nodeTypes = {
+ databaseSchema: DatabaseSchemaNode,
+};
+
+export default function Demo() {
+ return (
+
+
+
+
+ );
+}
diff --git a/apps/ui-components/registry/components/database-schema-node/index.tsx b/apps/ui-components/registry/components/database-schema-node/index.tsx
new file mode 100644
index 000000000..37529f4a3
--- /dev/null
+++ b/apps/ui-components/registry/components/database-schema-node/index.tsx
@@ -0,0 +1,52 @@
+import { Node, NodeProps, Position } from "@xyflow/react";
+
+import { TableBody, TableCell, TableRow } from "@/components/ui/table";
+
+import { BaseNode } from "@/registry/components/base-node";
+import { LabeledHandle } from "@/registry/components/labeled-handle";
+
+type DatabaseSchemaNode = Node<{
+ label: string;
+ schema: { title: string; type: string }[];
+}>;
+
+export function DatabaseSchemaNode({
+ data,
+ selected,
+}: NodeProps) {
+ return (
+
+
+ {data.label}
+
+ {/* shadcn Table cannot be used because of hardcoded overflow-auto */}
+
+
+ {data.schema.map((entry) => (
+
+
+
+
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/apps/ui-components/registry/components/database-schema-node/registry.json b/apps/ui-components/registry/components/database-schema-node/registry.json
new file mode 100644
index 000000000..62534ff0d
--- /dev/null
+++ b/apps/ui-components/registry/components/database-schema-node/registry.json
@@ -0,0 +1,20 @@
+{
+ "name": "database-schema-node",
+ "type": "registry:component",
+ "dependencies": ["@xyflow/react"],
+ "devDependencies": [],
+ "registryDependencies": [
+ "table",
+ "https://ui.reactflow.dev/base-node",
+ "https://ui.reactflow.dev/labeled-handle"
+ ],
+ "files": [
+ {
+ "type": "registry:component",
+ "path": "database-schema-node.tsx"
+ }
+ ],
+ "tailwind": {},
+ "cssVars": {},
+ "meta": {}
+}
diff --git a/apps/ui-components/registry/components/devtools/demo.tsx b/apps/ui-components/registry/components/devtools/demo.tsx
new file mode 100644
index 000000000..fd52a515d
--- /dev/null
+++ b/apps/ui-components/registry/components/devtools/demo.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { Background, ReactFlow } from "@xyflow/react";
+
+import { DevTools } from "@/registry/components/devtools";
+
+const defaultNodes = [
+ {
+ id: '1a',
+ type: 'input',
+ data: { label: 'Node 1' },
+ position: { x: 250, y: 5 },
+ },
+ {
+ id: '2a',
+ data: { label: 'Node 2' },
+ position: { x: 100, y: 120 },
+ },
+ {
+ id: '3a',
+ data: { label: 'Node 3' },
+ position: { x: 400, y: 120 },
+ },
+];
+
+const defaultEdges = [
+ { id: 'e1-2', source: '1a', target: '2a' },
+ { id: 'e1-3', source: '1a', target: '3a' },
+];
+
+export default function DevtoolsDemo() {
+ return (
+
+
+
+
+ );
+}
diff --git a/apps/ui-components/registry/components/devtools/index.tsx b/apps/ui-components/registry/components/devtools/index.tsx
new file mode 100644
index 000000000..69aa05a69
--- /dev/null
+++ b/apps/ui-components/registry/components/devtools/index.tsx
@@ -0,0 +1,244 @@
+import {
+ useEffect,
+ useState,
+ type Dispatch,
+ type SetStateAction,
+ useCallback
+} from 'react';
+
+import {
+ useNodes,
+ Panel,
+ useStore,
+ useStoreApi,
+ type OnNodesChange,
+ type NodeChange,
+ type XYPosition,
+ ViewportPortal,
+ useReactFlow
+} from '@xyflow/react';
+
+import {
+ ToggleGroup,
+ ToggleGroupItem,
+} from "@/components/ui/toggle-group"
+
+export function ViewportLogger() {
+ const viewport = useStore(
+ (s) =>
+ `x: ${s.transform[0].toFixed(2)}, y: ${s.transform[1].toFixed(2)}, zoom: ${s.transform[2].toFixed(2)}`,
+ );
+
+ return {viewport}
;
+}
+
+type ChangeLoggerProps = {
+ color?: string;
+ limit?: number;
+};
+
+type ChangeInfoProps = {
+ change: NodeChange;
+};
+
+function ChangeInfo({ change }: ChangeInfoProps) {
+ const id = 'id' in change ? change.id : '-';
+ const { type } = change;
+
+ return (
+
+
node id: {id}
+
+ {type === 'add' ? JSON.stringify(change.item, null, 2) : null}
+ {type === 'dimensions'
+ ? `dimensions: ${change.dimensions?.width} × ${change.dimensions?.height}`
+ : null}
+ {type === 'position'
+ ? `position: ${change.position?.x.toFixed(1)}, ${change.position?.y.toFixed(1)}`
+ : null}
+ {type === 'remove' ? 'remove' : null}
+ {type === 'select' ? (change.selected ? 'select' : 'unselect') : null}
+
+
([]);
+ const store = useStoreApi();
+
+ // Memoize the callback for handling node changes
+ const handleNodeChanges: OnNodesChange = useCallback(
+ (newChanges: NodeChange[]) => {
+ setChanges((prevChanges) => [...newChanges, ...prevChanges].slice(0, limit));
+ },
+ [limit]
+ );
+
+ useEffect(() => {
+ store.setState({ onNodesChange: handleNodeChanges });
+
+ return () => store.setState({ onNodesChange: undefined });
+ }, [handleNodeChanges, store]);
+
+ const NoChanges = () => No Changes Triggered
;
+
+ return (
+ <>
+ {changes.length === 0 ? (
+
+
+ {nodes.map((node) => {
+ const internalNode = getInternalNode(node.id);
+ if (!internalNode) {
+ return null;
+ }
+
+ const absPosition = internalNode?.internals.positionAbsolute;
+
+ return (
+
+
+ );
+}
+
+type NodeInfoProps = {
+ id: string;
+ type: string;
+ selected: boolean;
+ position: XYPosition;
+ absPosition: XYPosition;
+ width?: number;
+ height?: number;
+ data: any;
+};
+
+function NodeInfo({
+ id,
+ type,
+ selected,
+ position,
+ absPosition,
+ width,
+ height,
+ data,
+}: NodeInfoProps) {
+ if (!width || !height) return null;
+
+ const absoluteTransform = `translate(${absPosition.x}px, ${absPosition.y + height}px)`;
+ const formattedPosition = `${position.x.toFixed(1)}, ${position.y.toFixed(1)}`;
+ const formattedDimensions = `${width} × ${height}`;
+ const selectionStatus = selected ? 'Selected' : 'Not Selected';
+
+ return (
+
+
id: {id}
+
type: {type}
+
selected: {selectionStatus}
+
position: {formattedPosition}
+
dimensions: {formattedDimensions}
+
data: {JSON.stringify(data, null, 2)}
+
>;
+ label: string;
+ value: string;
+};
+
+type DevToolsToggleProps = {
+ tools: Tool[];
+};
+
+function DevToolsToggle({ tools }: DevToolsToggleProps) {
+ return (
+
+
+ {tools.map(({ active, setActive, label, value }) => (
+ setActive((prev) => !prev)}
+ aria-pressed={active}
+ className="bg-card text-card-foreground transition-colors duration-300 hover:bg-secondary hover:text-secondary-foreground"
+ >
+ {label}
+
+ ))}
+
+
+ );
+}
+
+
+export function DevTools() {
+ const [nodeInspectorActive, setNodeInspectorActive] = useState(false);
+ const [changeLoggerActive, setChangeLoggerActive] = useState(false);
+ const [viewportLoggerActive, setViewportLoggerActive] = useState(false);
+
+
+ const tools = [
+ { active: nodeInspectorActive, setActive: setNodeInspectorActive, label: 'Node Inspector', value: 'node-inspector' },
+ { active: changeLoggerActive, setActive: setChangeLoggerActive, label: 'Change Logger', value: 'change-logger' },
+ { active: viewportLoggerActive, setActive: setViewportLoggerActive, label: 'Viewport Logger', value: 'viewport-logger' },
+ ];
+
+ return (
+ <>
+
+
+ )}
+
+ {nodeInspectorActive &&
+
+ )}
+
+ );
+}
+
+DevTools.displayName = "DevTools";
\ No newline at end of file
diff --git a/apps/ui-components/registry/components/devtools/registry.json b/apps/ui-components/registry/components/devtools/registry.json
new file mode 100644
index 000000000..547fae523
--- /dev/null
+++ b/apps/ui-components/registry/components/devtools/registry.json
@@ -0,0 +1,16 @@
+{
+ "name": "devtools",
+ "type": "registry:component",
+ "dependencies": ["@xyflow/react"],
+ "devDependencies": [],
+ "registryDependencies": ["toggle-group"],
+ "files": [
+ {
+ "type": "registry:component",
+ "path": "devtools.tsx"
+ }
+ ],
+ "tailwind": {},
+ "cssVars": {},
+ "meta": {}
+}
diff --git a/apps/ui-components/registry/components/labeled-group-node/demo.tsx b/apps/ui-components/registry/components/labeled-group-node/demo.tsx
new file mode 100644
index 000000000..c004e2d55
--- /dev/null
+++ b/apps/ui-components/registry/components/labeled-group-node/demo.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { Background, ReactFlow, Node } from "@xyflow/react";
+import { LabeledGroupNode } from "@/registry/components/labeled-group-node";
+
+const nodeTypes = {
+ labeledGroupNode: LabeledGroupNode,
+};
+
+
+const defaultNodes: Node[] = [
+ {
+ id: "1",
+ position: { x: 200, y: 200 },
+ data: { label: "Group Node" },
+ width: 380,
+ height: 200,
+ type: "labeledGroupNode"
+ },
+ {
+ id: "2",
+ position: { x: 50, y: 100 },
+ data: { label: "Node" },
+ type: "default",
+ parentId: "1",
+ extent: "parent"
+ },
+ {
+ id: "3",
+ position: { x: 200, y: 50 },
+ data: { label: "Node" },
+ type: "default",
+ parentId: "1",
+ extent: "parent"
+ },
+];
+
+export default function LabeledGroupNodeDemo() {
+ return (
+
+
+
+
+ );
+}
diff --git a/apps/ui-components/registry/components/labeled-group-node/index.tsx b/apps/ui-components/registry/components/labeled-group-node/index.tsx
new file mode 100644
index 000000000..8a7601ce7
--- /dev/null
+++ b/apps/ui-components/registry/components/labeled-group-node/index.tsx
@@ -0,0 +1,23 @@
+import { Node, NodeProps } from "@xyflow/react";
+import { BaseNode } from "@/registry/components/base-node";
+
+type LabeledGroupNode = Node<{
+ label: string;
+}>;
+
+export function LabeledGroupNode({ data, selected }: NodeProps) {
+ return (
+
+ {data.label && (
+
+ {data.label}
+
+ )}
+
+ );
+}
+
+LabeledGroupNode.displayName = "LabeledGroupNode";
diff --git a/apps/ui-components/registry/components/labeled-group-node/registry.json b/apps/ui-components/registry/components/labeled-group-node/registry.json
new file mode 100644
index 000000000..9dd7f1afb
--- /dev/null
+++ b/apps/ui-components/registry/components/labeled-group-node/registry.json
@@ -0,0 +1,16 @@
+{
+ "name": "labeled-group-node",
+ "type": "registry:component",
+ "dependencies": ["@xyflow/react"],
+ "devDependencies": [],
+ "registryDependencies": ["https://ui.reactflow.dev/base-node"],
+ "files": [
+ {
+ "type": "registry:component",
+ "path": "labeled-group-node.tsx"
+ }
+ ],
+ "tailwind": {},
+ "cssVars": {},
+ "meta": {}
+}
diff --git a/apps/ui-components/registry/components/labeled-handle/demo.tsx b/apps/ui-components/registry/components/labeled-handle/demo.tsx
new file mode 100644
index 000000000..8b88cfe85
--- /dev/null
+++ b/apps/ui-components/registry/components/labeled-handle/demo.tsx
@@ -0,0 +1,57 @@
+import React, { memo } from "react";
+import { NodeProps, Position } from "@xyflow/react";
+
+import { LabeledHandle } from "@/registry/components/labeled-handle";
+import { BaseNode } from "@/registry/components/base-node";
+
+// You can use Handle components only inside of custom nodes.
+const CustomNode = memo(({ selected }: NodeProps) => {
+ return (
+
+
+
+
+
+
+ );
+});
+
+CustomNode.displayName = "LabeledHandleDemo";
+
+export default CustomNode;
diff --git a/apps/ui-components/registry/components/labeled-handle/index.tsx b/apps/ui-components/registry/components/labeled-handle/index.tsx
new file mode 100644
index 000000000..15066a0fa
--- /dev/null
+++ b/apps/ui-components/registry/components/labeled-handle/index.tsx
@@ -0,0 +1,45 @@
+"use client";
+import React from "react";
+import { cn } from "@/lib/utils";
+import { HandleProps } from "@xyflow/react";
+
+import { BaseHandle } from "@/registry/components/base-handle";
+
+function getFlexDirection(position: string) {
+ let flexDirection =
+ position === "top" || position === "bottom" ? "flex-col" : "flex-row";
+ switch (position) {
+ case "bottom":
+ case "right":
+ return flexDirection + "-reverse justify-end";
+ default:
+ return flexDirection;
+ }
+}
+
+const LabeledHandle = React.forwardRef<
+ HTMLDivElement,
+ HandleProps &
+ React.HTMLAttributes & {
+ title: string;
+ handleClassName?: string;
+ labelClassName?: string;
+ }
+>(({ className, labelClassName, title, position, ...props }, ref) => (
+
+ {title}
+
+));
+
+LabeledHandle.displayName = "LabeledHandle";
+
+export { LabeledHandle };
diff --git a/apps/ui-components/registry/components/labeled-handle/registry.json b/apps/ui-components/registry/components/labeled-handle/registry.json
new file mode 100644
index 000000000..927dfda7f
--- /dev/null
+++ b/apps/ui-components/registry/components/labeled-handle/registry.json
@@ -0,0 +1,16 @@
+{
+ "name": "labeled-handle",
+ "type": "registry:component",
+ "dependencies": ["@xyflow/react"],
+ "devDependencies": [],
+ "registryDependencies": ["https://ui.reactflow.dev/base-handle"],
+ "files": [
+ {
+ "type": "registry:component",
+ "path": "labeled-handle.tsx"
+ }
+ ],
+ "tailwind": {},
+ "cssVars": {},
+ "meta": {}
+}
diff --git a/apps/ui-components/registry/components/placeholder-node/demo.tsx b/apps/ui-components/registry/components/placeholder-node/demo.tsx
new file mode 100644
index 000000000..a7e124dc7
--- /dev/null
+++ b/apps/ui-components/registry/components/placeholder-node/demo.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import {
+ Background,
+ ReactFlow,
+} from "@xyflow/react";
+import { PlaceholderNode } from "@/registry/components/placeholder-node";
+
+const nodeTypes = {
+ placeholder: PlaceholderNode,
+};
+
+
+const defaultNodes = [
+ {
+ id: '1',
+ data: { label: 'Original Node' },
+ position: { x: 0, y: 0 },
+ type: 'default',
+ },
+ {
+ id: '2',
+ data: { label: '+' },
+ position: { x: 0, y: 150 },
+ type: 'placeholder',
+ },
+];
+
+const defaultEdges = [
+ {
+ id: '1=>2',
+ source: '1',
+ target: '2',
+ type: 'default',
+ animated: true,
+ },
+];
+
+export default function Demo() {
+ return (
+
+
+
+
+ );
+}
diff --git a/apps/ui-components/registry/components/placeholder-node/index.tsx b/apps/ui-components/registry/components/placeholder-node/index.tsx
new file mode 100644
index 000000000..b5700c0a1
--- /dev/null
+++ b/apps/ui-components/registry/components/placeholder-node/index.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import { useReactFlow, Handle, Position, NodeProps, Node } from "@xyflow/react";
+import { BaseNode } from "@/registry/components/base-node";
+
+type PlaceholderNodeData = Node<{
+ label: string;
+}>;
+
+export function PlaceholderNode({ data, id, selected }: NodeProps) {
+
+ const { setNodes, setEdges } = useReactFlow();
+
+ const handleClick = () => {
+ setEdges((edges) =>
+ edges.map((edge) =>
+ edge.target === id ? { ...edge, animated: false } : edge
+ )
+ );
+
+ setNodes((nodes) => {
+ const updatedNodes = nodes.map((node) => {
+ if (node.id === id) {
+ return {
+ ...node,
+ data: { ...node.data, label: "New Node" },
+ type: "default",
+ };
+ }
+ return node;
+ });
+ return updatedNodes;
+ });
+ };
+
+ return (
+
+ {data.label}
+
+ );
+}
+
+PlaceholderNode.displayName = "PlaceholderNode";
diff --git a/apps/ui-components/registry/components/placeholder-node/registry.json b/apps/ui-components/registry/components/placeholder-node/registry.json
new file mode 100644
index 000000000..2f071d40b
--- /dev/null
+++ b/apps/ui-components/registry/components/placeholder-node/registry.json
@@ -0,0 +1,16 @@
+{
+ "name": "placeholder-node",
+ "type": "registry:component",
+ "dependencies": ["@xyflow/react"],
+ "devDependencies": [],
+ "registryDependencies": ["https://ui.reactflow.dev/base-node"],
+ "files": [
+ {
+ "type": "registry:component",
+ "path": "placeholder-node.tsx"
+ }
+ ],
+ "tailwind": {},
+ "cssVars": {},
+ "meta": {}
+}
diff --git a/apps/ui-components/registry/components/tooltip-node/demo.tsx b/apps/ui-components/registry/components/tooltip-node/demo.tsx
new file mode 100644
index 000000000..06597e6ac
--- /dev/null
+++ b/apps/ui-components/registry/components/tooltip-node/demo.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { Background, Position, ReactFlow } from "@xyflow/react";
+import {
+ TooltipNode,
+ type TooltipNodeType,
+} from "@/registry/components/tooltip-node";
+
+const nodeTypes = {
+ tooltip: TooltipNode,
+};
+
+const defaultNodes: TooltipNodeType[] = [
+ {
+ id: "1",
+ position: { x: 200, y: 200 },
+ data: {
+ label: "Node with bottom tooltip",
+ tooltip: {
+ label: "I am a tooltip",
+ position: Position.Bottom,
+ },
+ },
+ type: "tooltip",
+ },
+ {
+ id: "2",
+ position: { x: 350, y: 380 },
+ data: {
+ label: "Node with top tooltip",
+ tooltip: {
+ label: "I am a tooltip",
+ position: Position.Top,
+ },
+ },
+ type: "tooltip",
+ },
+ {
+ id: "3",
+ position: { x: 0, y: 320 },
+ data: {
+ label: "Node with right tooltip",
+ tooltip: {
+ label: "I am a tooltip",
+ position: Position.Right,
+ },
+ },
+ type: "tooltip",
+ },
+];
+
+const defaultEdges = [
+ { id: "e1-2", source: "1", target: "2" },
+ { id: "e1-3", source: "1", target: "3" },
+];
+
+export default function TooltipNodeDemo() {
+ return (
+
+
+
+
+ );
+}
diff --git a/apps/ui-components/registry/components/tooltip-node/index.tsx b/apps/ui-components/registry/components/tooltip-node/index.tsx
new file mode 100644
index 000000000..80965c559
--- /dev/null
+++ b/apps/ui-components/registry/components/tooltip-node/index.tsx
@@ -0,0 +1,41 @@
+import { useState } from "react";
+import {
+ Node,
+ NodeProps,
+ NodeToolbar,
+ NodeToolbarProps,
+ Handle,
+ Position,
+} from "@xyflow/react";
+import { BaseNode } from "@/registry/components/base-node";
+
+export type TooltipNodeType = Node<{
+ label: string;
+ tooltip?: {
+ label: string;
+ position?: NodeToolbarProps["position"];
+ };
+}>;
+
+export function TooltipNode({ data, selected }: NodeProps) {
+ const [isTooltipVisible, setTooltipVisible] = useState(false);
+
+ return (
+ setTooltipVisible(true)}
+ onMouseLeave={() => setTooltipVisible(false)}
+ selected={selected}
+ >
+
+ {data.tooltip?.label}
+
+ {data.label}
+
+ );
+}
diff --git a/apps/ui-components/registry/components/tooltip-node/registry.json b/apps/ui-components/registry/components/tooltip-node/registry.json
new file mode 100644
index 000000000..8782cc8f7
--- /dev/null
+++ b/apps/ui-components/registry/components/tooltip-node/registry.json
@@ -0,0 +1,16 @@
+{
+ "name": "tooltip-node",
+ "type": "registry:component",
+ "dependencies": ["@xyflow/react"],
+ "devDependencies": [],
+ "registryDependencies": ["https://ui.reactflow.dev/base-node"],
+ "files": [
+ {
+ "type": "registry:component",
+ "path": "tooltip-node.tsx"
+ }
+ ],
+ "tailwind": {},
+ "cssVars": {},
+ "meta": {}
+}
diff --git a/apps/ui-components/registry/components/zoom-select/demo.tsx b/apps/ui-components/registry/components/zoom-select/demo.tsx
new file mode 100644
index 000000000..17c56068d
--- /dev/null
+++ b/apps/ui-components/registry/components/zoom-select/demo.tsx
@@ -0,0 +1,21 @@
+import { Background, ReactFlow } from "@xyflow/react";
+import { ZoomSelect } from "@/registry/components/zoom-select";
+
+const defaultNodes = [
+ {
+ id: "1",
+ position: { x: 200, y: 200 },
+ data: { label: "Node" },
+ },
+];
+
+export default function ZoomSelectDemo() {
+ return (
+
+
+
+
+ );
+}
diff --git a/apps/ui-components/registry/components/zoom-select/index.tsx b/apps/ui-components/registry/components/zoom-select/index.tsx
new file mode 100644
index 000000000..b06e9ebdf
--- /dev/null
+++ b/apps/ui-components/registry/components/zoom-select/index.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import * as React from "react";
+import {
+ Panel,
+ useReactFlow,
+ PanelProps,
+ useStore,
+} from "@xyflow/react";
+
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select';
+import { cn } from "@/lib/utils";
+
+const ZoomSelect = React.forwardRef<
+ HTMLDivElement,
+ Omit
+>(({ className, ...props }) => {
+ const { zoomTo, fitView } = useReactFlow();
+
+ const handleZoomChange = (value: string) => {
+ if (value === "best-fit") {
+ fitView();
+ } else {
+ const zoomValue = parseFloat(value);
+ if (!isNaN(zoomValue)) {
+ zoomTo(zoomValue);
+ }
+ }
+ };
+
+ const { zoomLevels } = useStore((state) => {
+ const minZoom = state.minZoom;
+ const maxZoom = state.maxZoom;
+
+ const levels = [];
+ const zoomIncrement = 50;
+ for (let i = Math.ceil(minZoom * 100); i <= Math.floor(maxZoom * 100); i += zoomIncrement) {
+ levels.push((i / 100).toString());
+ }
+
+ return { zoomLevels: levels };
+ });
+
+
+ return (
+
+
+
+
+
+ Best Fit
+
+ {zoomLevels.map((level) => (
+
+ {`${(parseFloat(level) * 100).toFixed(0)}%`}
+
+ ))}
+
+
+
+ );
+});
+
+ZoomSelect.displayName = "ZoomSelect";
+
+export { ZoomSelect };
diff --git a/apps/ui-components/registry/components/zoom-select/registry.json b/apps/ui-components/registry/components/zoom-select/registry.json
new file mode 100644
index 000000000..44a346722
--- /dev/null
+++ b/apps/ui-components/registry/components/zoom-select/registry.json
@@ -0,0 +1,16 @@
+{
+ "name": "zoom-select",
+ "type": "registry:component",
+ "dependencies": ["@xyflow/react"],
+ "devDependencies": [],
+ "registryDependencies": ["select"],
+ "files": [
+ {
+ "type": "registry:component",
+ "path": "zoom-select.tsx"
+ }
+ ],
+ "tailwind": {},
+ "cssVars": {},
+ "meta": {}
+}
diff --git a/apps/ui-components/registry/components/zoom-slider/demo.tsx b/apps/ui-components/registry/components/zoom-slider/demo.tsx
new file mode 100644
index 000000000..e50d4a027
--- /dev/null
+++ b/apps/ui-components/registry/components/zoom-slider/demo.tsx
@@ -0,0 +1,21 @@
+import { Background, ReactFlow } from "@xyflow/react";
+import { ZoomSlider } from "@/registry/components/zoom-slider";
+
+const defaultNodes = [
+ {
+ id: "1",
+ position: { x: 200, y: 200 },
+ data: { label: "Node" },
+ },
+];
+
+export default function ZoomSliderDemo() {
+ return (
+
+
+
+
+ );
+}
diff --git a/apps/ui-components/registry/components/zoom-slider/index.tsx b/apps/ui-components/registry/components/zoom-slider/index.tsx
new file mode 100644
index 000000000..3c7d20f9e
--- /dev/null
+++ b/apps/ui-components/registry/components/zoom-slider/index.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import * as React from "react";
+import { Maximize, Minus, Plus } from "lucide-react";
+
+import {
+ Panel,
+ useViewport,
+ useStore,
+ useReactFlow,
+ PanelProps,
+} from "@xyflow/react";
+
+import { Slider } from "@/components/ui/slider";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const ZoomSlider = React.forwardRef<
+ HTMLDivElement,
+ Omit
+>(({ className, ...props }) => {
+ const { zoom } = useViewport();
+ const { zoomTo, zoomIn, zoomOut, fitView } = useReactFlow();
+
+ const { minZoom, maxZoom } = useStore(
+ (state) => ({
+ minZoom: state.minZoom,
+ maxZoom: state.maxZoom,
+ }),
+ (a, b) => a.minZoom !== b.minZoom || a.maxZoom !== b.maxZoom,
+ );
+
+ return (
+
+ zoomOut({ duration: 300 })}
+ >
+
+ zoomTo(values[0])}
+ />
+ zoomIn({ duration: 300 })}
+ >
+
+ zoomTo(1, { duration: 300 })}
+ >
+ {(100 * zoom).toFixed(0)}%
+
+ fitView({ duration: 300 })}
+ >
+
+
+ );
+});
+
+ZoomSlider.displayName = "ZoomSlider";
+
+export { ZoomSlider };
diff --git a/apps/ui-components/registry/components/zoom-slider/registry.json b/apps/ui-components/registry/components/zoom-slider/registry.json
new file mode 100644
index 000000000..7469e3d77
--- /dev/null
+++ b/apps/ui-components/registry/components/zoom-slider/registry.json
@@ -0,0 +1,16 @@
+{
+ "name": "zoom-slider",
+ "type": "registry:component",
+ "dependencies": ["@xyflow/react", "lucide-react"],
+ "devDependencies": [],
+ "registryDependencies": ["button", "slider"],
+ "files": [
+ {
+ "type": "registry:component",
+ "path": "zoom-slider.tsx"
+ }
+ ],
+ "tailwind": {},
+ "cssVars": {},
+ "meta": {}
+}
diff --git a/apps/ui-components/scripts/generate-registry.js b/apps/ui-components/scripts/generate-registry.js
new file mode 100644
index 000000000..c989ea920
--- /dev/null
+++ b/apps/ui-components/scripts/generate-registry.js
@@ -0,0 +1,84 @@
+const fs = require("fs");
+const path = require("path");
+
+const componentsPath = path.join(__dirname, "../registry/components/");
+const registryOutputPath = path.join(__dirname, "../public/registry");
+const demoOutputPath = path.join(__dirname, "../public/demo");
+
+(async () => {
+ console.log("Generating registry files...");
+
+ // Remove old registry files
+ try {
+ fs.rmSync(registryOutputPath, { recursive: true, force: true });
+ } catch (error) {
+ console.log("No old registry files found.");
+ }
+
+ // Remove old demo files
+ try {
+ fs.rmSync(demoOutputPath, { recursive: true, force: true });
+ } catch (error) {
+ console.log("No old registry files found.");
+ }
+
+ // Create the output directories if they don't exist
+ fs.mkdirSync(registryOutputPath, { recursive: true });
+ fs.mkdirSync(demoOutputPath, { recursive: true });
+
+ // Read the components directory
+ fs.readdir(componentsPath, { withFileTypes: true }, (_, folders) => {
+ const all = { components: [] };
+ for (const folder of folders) {
+ // Gather all component names
+ all.components.push(folder.name);
+
+ // Gather relevant file paths
+ const componentPath = path.join(componentsPath, folder.name);
+ const indexPath = path.join(componentPath, "index.tsx");
+ const registryPath = path.join(componentPath, "registry.json");
+ const demoPath = path.join(componentPath, "demo.tsx");
+
+ // Read registry file and convert it to an object
+ const registryRaw = fs.readFileSync(registryPath, "utf8");
+ const registry = JSON.parse(registryRaw);
+
+ // Read index file and add it to the registry object
+ const index = fs.readFileSync(indexPath, "utf8");
+ registry.files[0].content = index;
+
+ // Write the registry object into the build folder
+ const componentOutputPath = path.join(
+ registryOutputPath,
+ folder.name + ".json",
+ );
+ fs.writeFileSync(componentOutputPath, JSON.stringify(registry, null, 2));
+
+ // Read demo.tsx file and add it to the demo object
+ // TODO: support multiple demo files
+ const demoTsx = fs.readFileSync(demoPath, "utf8");
+ const demoClean = demoTsx.replace(/\/registry\//g, "");
+ const demoFile = {
+ files: [
+ {
+ content: demoClean,
+ },
+ ],
+ };
+
+ // Write demo.json
+ fs.writeFileSync(
+ path.join(demoOutputPath, folder.name + ".json"),
+ JSON.stringify(demoFile),
+ );
+ }
+
+ // Write overview registry file
+ fs.writeFileSync(
+ registryOutputPath + "/all-available-components.json",
+ JSON.stringify(all),
+ );
+ });
+
+ console.log("Registry files successfully generated!");
+})();
diff --git a/apps/ui-components/scripts/init-new-component.js b/apps/ui-components/scripts/init-new-component.js
new file mode 100644
index 000000000..eac3493c0
--- /dev/null
+++ b/apps/ui-components/scripts/init-new-component.js
@@ -0,0 +1,67 @@
+const fs = require("fs");
+const path = require("path");
+
+const componentsPath = path.join(__dirname, "../registry/components");
+const pagesPath = path.join(__dirname, "../app/components");
+const templatePath = path.join(__dirname, "../templates");
+
+function toCamelCase(str) {
+ const words = str.split("-");
+ return words
+ .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+ .join("");
+}
+
+(async () => {
+ const args = process.argv.slice(2);
+
+ if (args.length === 0) {
+ console.log("\nPlease provide a component name as an argument.\n");
+ console.log("pnpm add-component ");
+ return;
+ }
+
+ const componentName = args[0];
+ const componentNameCamelCase = toCamelCase(componentName);
+ const componentDir = path.join(componentsPath, componentName);
+
+ if (fs.existsSync(componentDir)) {
+ console.log(`\nComponent "${componentName}" already exists!`);
+ return;
+ }
+
+ const pageDir = path.join(pagesPath, componentName);
+
+ if (fs.existsSync(pageDir)) {
+ console.log(`\nPage for "${componentName}" already exists!`);
+ return;
+ }
+
+ // Create component and page directories
+ fs.mkdirSync(componentDir, { recursive: true });
+ fs.mkdirSync(pageDir, { recursive: true });
+
+ // Copy template files to page and component directory
+ fs.cpSync(path.join(templatePath, "component"), componentDir, {
+ recursive: true,
+ });
+ fs.cpSync(path.join(templatePath, "page"), pageDir, { recursive: true });
+
+ // Function for replacing all template strings
+ const replaceTemplateStrings = (filePath) => {
+ const file = fs.readFileSync(filePath, "utf8");
+ const newFile = file
+ .replace(/\$CAMELCOMPONENT/g, componentNameCamelCase)
+ .replace(/\$COMPONENT/g, componentName);
+ fs.writeFileSync(filePath, newFile);
+ };
+
+ // Replace template strings
+ replaceTemplateStrings(path.join(componentDir, "index.tsx"));
+ replaceTemplateStrings(path.join(componentDir, "demo.tsx"));
+ replaceTemplateStrings(path.join(componentDir, "registry.json"));
+
+ replaceTemplateStrings(path.join(pageDir, "page.tsx"));
+
+ console.log(`\nComponent "${componentName}" created!`);
+})();
diff --git a/apps/ui-components/tailwind.config.ts b/apps/ui-components/tailwind.config.ts
new file mode 100644
index 000000000..2e567d9ab
--- /dev/null
+++ b/apps/ui-components/tailwind.config.ts
@@ -0,0 +1,96 @@
+import type { Config } from "tailwindcss";
+
+const config = {
+ darkMode: ["class"],
+ content: [
+ "./pages/**/*.{ts,tsx}",
+ "./components/**/*.{ts,tsx}",
+ "./registry/**/*.{ts,tsx}",
+ "./app/**/*.{ts,tsx}",
+ "./src/**/*.{ts,tsx}",
+ ],
+ prefix: "",
+ theme: {
+ container: {
+ center: true,
+ padding: "2rem",
+ screens: {
+ "2xl": "1400px",
+ },
+ },
+ extend: {
+ colors: {
+ border: "hsl(var(--border))",
+ input: "hsl(var(--input))",
+ ring: "hsl(var(--ring))",
+ background: "hsl(var(--background))",
+ foreground: "hsl(var(--foreground))",
+ primary: {
+ DEFAULT: "hsl(var(--primary))",
+ foreground: "hsl(var(--primary-foreground))",
+ },
+ secondary: {
+ DEFAULT: "hsl(var(--secondary))",
+ foreground: "hsl(var(--secondary-foreground))",
+ },
+ destructive: {
+ DEFAULT: "hsl(var(--destructive))",
+ foreground: "hsl(var(--destructive-foreground))",
+ },
+ muted: {
+ DEFAULT: "hsl(var(--muted))",
+ foreground: "hsl(var(--muted-foreground))",
+ },
+ accent: {
+ DEFAULT: "hsl(var(--accent))",
+ foreground: "hsl(var(--accent-foreground))",
+ },
+ popover: {
+ DEFAULT: "hsl(var(--popover))",
+ foreground: "hsl(var(--popover-foreground))",
+ },
+ card: {
+ DEFAULT: "hsl(var(--card))",
+ foreground: "hsl(var(--card-foreground))",
+ },
+ chart: {
+ "1": "hsl(var(--chart-1))",
+ "2": "hsl(var(--chart-2))",
+ "3": "hsl(var(--chart-3))",
+ "4": "hsl(var(--chart-4))",
+ "5": "hsl(var(--chart-5))",
+ },
+ },
+ borderRadius: {
+ lg: "var(--radius)",
+ md: "calc(var(--radius) - 2px)",
+ sm: "calc(var(--radius) - 4px)",
+ },
+ keyframes: {
+ "accordion-down": {
+ from: {
+ height: "0",
+ },
+ to: {
+ height: "var(--radix-accordion-content-height)",
+ },
+ },
+ "accordion-up": {
+ from: {
+ height: "var(--radix-accordion-content-height)",
+ },
+ to: {
+ height: "0",
+ },
+ },
+ },
+ animation: {
+ "accordion-down": "accordion-down 0.2s ease-out",
+ "accordion-up": "accordion-up 0.2s ease-out",
+ },
+ },
+ },
+ plugins: [require("tailwindcss-animate")],
+} satisfies Config;
+
+export default config;
diff --git a/apps/ui-components/templates/component/demo.tsx b/apps/ui-components/templates/component/demo.tsx
new file mode 100644
index 000000000..e909f725a
--- /dev/null
+++ b/apps/ui-components/templates/component/demo.tsx
@@ -0,0 +1,21 @@
+import { Background, ReactFlow } from "@xyflow/react";
+
+import { $CAMELCOMPONENT } from "@/registry/components/$COMPONENT";
+
+const defaultNodes = [
+ {
+ id: "1",
+ position: { x: 200, y: 200 },
+ data: { label: "Node" },
+ },
+];
+
+export default function $CAMELCOMPONENTDemo() {
+ return (
+
+
+
+
+ );
+}
diff --git a/apps/ui-components/templates/component/index.tsx b/apps/ui-components/templates/component/index.tsx
new file mode 100644
index 000000000..de148fc2c
--- /dev/null
+++ b/apps/ui-components/templates/component/index.tsx
@@ -0,0 +1,3 @@
+export function $CAMELCOMPONENT() {
+ return
;
+}
diff --git a/apps/ui-components/templates/component/registry.json b/apps/ui-components/templates/component/registry.json
new file mode 100644
index 000000000..cc97374cb
--- /dev/null
+++ b/apps/ui-components/templates/component/registry.json
@@ -0,0 +1,16 @@
+{
+ "name": "$COMPONENT",
+ "type": "registry:component",
+ "dependencies": ["@xyflow/react"],
+ "devDependencies": [],
+ "registryDependencies": [],
+ "files": [
+ {
+ "type": "registry:component",
+ "path": "$COMPONENT.tsx"
+ }
+ ],
+ "tailwind": {},
+ "cssVars": {},
+ "meta": {}
+}
diff --git a/apps/ui-components/templates/page/page.tsx b/apps/ui-components/templates/page/page.tsx
new file mode 100644
index 000000000..fba3c0a9a
--- /dev/null
+++ b/apps/ui-components/templates/page/page.tsx
@@ -0,0 +1,10 @@
+import DemoWrapper from "@/components/demo-wrapper";
+import Demo from "@/registry/components/$COMPONENT/demo";
+
+export default function DemoPage() {
+ return (
+
+
+ );
+}
diff --git a/apps/ui-components/tsconfig.json b/apps/ui-components/tsconfig.json
new file mode 100644
index 000000000..407b2876b
--- /dev/null
+++ b/apps/ui-components/tsconfig.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ],
+ "paths": {
+ "@/*": ["./*"]
+ }
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "exclude": ["node_modules", "templates/**"]
+}
diff --git a/apps/xy-styleguide/.eslintrc.cjs b/apps/xy-styleguide/.eslintrc.cjs
deleted file mode 100644
index 5a3965e69..000000000
--- a/apps/xy-styleguide/.eslintrc.cjs
+++ /dev/null
@@ -1,16 +0,0 @@
-module.exports = {
- env: {
- browser: true,
- es2020: true
- },
- extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
- parser: '@typescript-eslint/parser',
- parserOptions: {
- ecmaVersion: 'latest',
- sourceType: 'module'
- },
- plugins: ['react-refresh'],
- rules: {
- 'react-refresh/only-export-components': 'warn'
- }
-};
\ No newline at end of file
diff --git a/apps/xy-styleguide/.gitignore b/apps/xy-styleguide/.gitignore
deleted file mode 100644
index a547bf36d..000000000
--- a/apps/xy-styleguide/.gitignore
+++ /dev/null
@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
diff --git a/apps/xy-styleguide/.storybook/main.ts b/apps/xy-styleguide/.storybook/main.ts
deleted file mode 100644
index 6452ff3af..000000000
--- a/apps/xy-styleguide/.storybook/main.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-const config: StorybookConfig = {
- stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
- addons: [
- '@storybook/addon-links',
- '@storybook/addon-essentials',
- '@storybook/addon-interactions',
- {
- name: '@storybook/addon-styling',
- options: {
- // Check out https://github.com/storybookjs/addon-styling/blob/main/docs/api.md
- // For more details on this addon's options.
- postCss: true,
- },
- },
- ],
- framework: {
- name: '@storybook/react-vite',
- options: {},
- },
- docs: {
- autodocs: 'tag',
- },
- staticDirs: ['../public'],
-};
-export default config;
diff --git a/apps/xy-styleguide/.storybook/preview-head.html b/apps/xy-styleguide/.storybook/preview-head.html
deleted file mode 100644
index e810aa62b..000000000
--- a/apps/xy-styleguide/.storybook/preview-head.html
+++ /dev/null
@@ -1,31 +0,0 @@
-Vite + React + TS
-
-
-
-
-
-
diff --git a/apps/xy-styleguide/package.json b/apps/xy-styleguide/package.json
deleted file mode 100644
index 6db1d0062..000000000
--- a/apps/xy-styleguide/package.json
+++ /dev/null
@@ -1,47 +0,0 @@
-{
- "name": "xy-styleguide",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "storybook dev -p 6006",
- "build": "tsc && vite build",
- "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
- "preview": "vite preview",
- "storybook": "storybook dev -p 6006",
- "build-storybook": "storybook build"
- },
- "dependencies": {
- "@heroicons/react": "^2.0.18",
- "react": "^18.2.0",
- "react-dom": "^18.2.0",
- "@xyflow/xy-ui": "workspace:*"
- },
- "devDependencies": {
- "@storybook/addon-essentials": "^7.0.22",
- "@storybook/addon-interactions": "^7.0.22",
- "@storybook/addon-links": "^7.0.22",
- "@storybook/addon-styling": "^1.3.0",
- "@storybook/blocks": "^7.0.22",
- "@storybook/react": "^7.0.22",
- "@storybook/react-vite": "^7.0.22",
- "@storybook/testing-library": "^0.0.14-next.2",
- "@types/react": "^18.0.37",
- "@types/react-dom": "^18.0.11",
- "@typescript-eslint/eslint-plugin": "^5.59.0",
- "@typescript-eslint/parser": "^5.59.0",
- "@vitejs/plugin-react-swc": "^3.0.0",
- "autoprefixer": "^10.4.14",
- "eslint": "^8.38.0",
- "eslint-plugin-react-hooks": "^4.6.0",
- "eslint-plugin-react-refresh": "^0.3.4",
- "eslint-plugin-storybook": "^0.6.12",
- "postcss": "^8.4.24",
- "prop-types": "^15.8.1",
- "storybook": "^7.0.22",
- "tailwindcss": "^3.3.2",
- "typescript": "^5.0.2",
- "vite": "^4.3.9",
- "xy-tailwind-config": "workspace:*"
- }
-}
diff --git a/apps/xy-styleguide/postcss.config.js b/apps/xy-styleguide/postcss.config.js
deleted file mode 100644
index aab2694ce..000000000
--- a/apps/xy-styleguide/postcss.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default {
- plugins: {
- tailwindcss: {},
- autoprefixer: {},
- ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
- },
-};
diff --git a/apps/xy-styleguide/public/vite.svg b/apps/xy-styleguide/public/vite.svg
deleted file mode 100644
index e7b8dfb1b..000000000
--- a/apps/xy-styleguide/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-Vite + React
-
-
setCount((count) => count + 1)}>
- count is {count}
-
-
- Edit src/App.tsx and save to test HMR
-
-
- Click on the Vite and React logos to learn more
-
-
- );
-}
-
-export default App;
diff --git a/apps/xy-styleguide/src/assets/react.svg b/apps/xy-styleguide/src/assets/react.svg
deleted file mode 100644
index 6c87de9bb..000000000
--- a/apps/xy-styleguide/src/assets/react.svg
+++ /dev/null
@@ -1 +0,0 @@
-
- ,
-);
diff --git a/apps/xy-styleguide/src/stories/Accordion.stories.tsx b/apps/xy-styleguide/src/stories/Accordion.stories.tsx
deleted file mode 100644
index e0a5d3df2..000000000
--- a/apps/xy-styleguide/src/stories/Accordion.stories.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import {
- Accordion,
- AccordionItem,
- AccordionTrigger,
- AccordionContent,
-} from '@xyflow/xy-ui';
-
-const meta = {
- title: 'Example/Accordion',
- component: Accordion,
- tags: ['autodocs'],
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Single: Story = {
- name: 'Single Accordion',
- args: {
- type: 'single',
- },
- render: () => (
-
-
- List item heading 1
- List item content
-
-
- List item heading 2
- List item content
-
-
- List item heading 3
- List item content
-
-
- ),
-};
-
-export const Multi: Story = {
- name: 'Multi Accordion',
- args: {
- type: 'multiple',
- },
- render: () => (
-
-
- List item heading 1
- List item content
-
-
- List item heading 2
- List item content
-
-
- List item heading 3
- List item content
-
-
- ),
-};
diff --git a/apps/xy-styleguide/src/stories/Button.stories.tsx b/apps/xy-styleguide/src/stories/Button.stories.tsx
deleted file mode 100644
index cf99001db..000000000
--- a/apps/xy-styleguide/src/stories/Button.stories.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from '@xyflow/xy-ui';
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-const meta = {
- title: 'Example/Button',
- component: Button,
- tags: ['autodocs'],
- argTypes: {},
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Primary: Story = {
- args: {
- variant: 'default',
- children: 'Button',
- },
-};
-
-export const Secondary: Story = {
- args: {
- variant: 'secondary',
- children: 'Button',
- },
-};
-
-export const Ghost: Story = {
- args: {
- variant: 'ghost',
- children: 'Ghost',
- },
-};
-
-export const Large: Story = {
- args: {
- size: 'lg',
- children: 'Button',
- },
-};
-
-export const Small: Story = {
- args: {
- size: 'sm',
- children: 'Button',
- },
-};
-
-export const React: Story = {
- args: {
- variant: 'react',
- children: 'React Flow',
- },
-};
-
-export const Svelte: Story = {
- args: {
- variant: 'svelte',
- children: 'Svelte Flow',
- },
-};
diff --git a/apps/xy-styleguide/src/stories/Checkbox.stories.tsx b/apps/xy-styleguide/src/stories/Checkbox.stories.tsx
deleted file mode 100644
index 2624fd3fa..000000000
--- a/apps/xy-styleguide/src/stories/Checkbox.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Checkbox } from '@xyflow/xy-ui';
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-const meta = {
- title: 'Example/Checkbox',
- component: Checkbox,
- tags: ['autodocs'],
- argTypes: {},
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Primary: Story = {
- args: {
- children: 'Test Label',
- },
-};
diff --git a/apps/xy-styleguide/src/stories/Container.stories.tsx b/apps/xy-styleguide/src/stories/Container.stories.tsx
deleted file mode 100644
index 1149f8c23..000000000
--- a/apps/xy-styleguide/src/stories/Container.stories.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Container } from '@xyflow/xy-ui';
-
-const meta = {
- title: 'Example/Container',
- component: Container,
- tags: ['autodocs'],
- argTypes: {},
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {
- name: 'Default Container',
- render: () => (
-
- some content
-
- ),
-};
-
-export const Dark: Story = {
- name: 'Dark Container',
- render: () => (
-
- some content
-
- ),
-};
diff --git a/apps/xy-styleguide/src/stories/Introduction.mdx b/apps/xy-styleguide/src/stories/Introduction.mdx
deleted file mode 100644
index ff7fc71fb..000000000
--- a/apps/xy-styleguide/src/stories/Introduction.mdx
+++ /dev/null
@@ -1,213 +0,0 @@
-import { Meta } from '@storybook/blocks';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
-
-Configure
-
-
-
-Learn
-
-
-
-
- Tip Edit the Markdown in{' '}
- stories/Introduction.stories.mdx
-
diff --git a/apps/xy-styleguide/src/stories/ListWrapper.stories.tsx b/apps/xy-styleguide/src/stories/ListWrapper.stories.tsx
deleted file mode 100644
index 11c7d0ade..000000000
--- a/apps/xy-styleguide/src/stories/ListWrapper.stories.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { InformationCircleIcon } from '@heroicons/react/24/outline';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { ListWrapper } from '@xyflow/xy-ui';
-
-const meta = {
- title: 'Example/ListWrapper',
- component: ListWrapper,
- tags: ['autodocs'],
- argTypes: {},
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {
- name: 'Select with placeholder',
- args: {
- icon: InformationCircleIcon,
- title: 'List title',
- subtitle: 'Some description',
- children: (
-
-
- list item description text lorem ipsum list item description text
- lorem ipsum
-
-
- list item description text lorem ipsum list item description text
-
-
- list item description text lorem ipsum list item description text
- lorem
-
-
- list item description text lorem ipsum list item description text
- lorem ipsum
-
-
- ),
- },
-};
diff --git a/apps/xy-styleguide/src/stories/PricingTable.stories.tsx b/apps/xy-styleguide/src/stories/PricingTable.stories.tsx
deleted file mode 100644
index 4815b9316..000000000
--- a/apps/xy-styleguide/src/stories/PricingTable.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { PricingTable } from '@xyflow/xy-ui';
-
-const meta = {
- title: 'Example/PricingTable',
- component: PricingTable,
- tags: ['autodocs'],
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {
- name: 'Default Pricing Table',
- render: () => ;
-
-export default meta;
-type Story = StoryObj;
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Primary: Story = {
- args: {
- children: (
- <>
-
-
- test
-
- Option A
-
-
-
- test2
-
- Option B
-
-
- ),
- },
-};
diff --git a/apps/xy-styleguide/src/stories/Select.stories.tsx b/apps/xy-styleguide/src/stories/Select.stories.tsx
deleted file mode 100644
index 657444e57..000000000
--- a/apps/xy-styleguide/src/stories/Select.stories.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from '@xyflow/xy-ui';
-
-const meta = {
- title: 'Example/Select',
- component: Select,
- tags: ['autodocs'],
- argTypes: {},
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Placeholder: Story = {
- name: 'Select with placeholder',
- render: () => (
-
-
-
-
- Light
- Dark
- System
-
-
- ),
-};
-
-export const DefaultValue: Story = {
- name: 'Select with default value',
- render: () => (
-
-
-
-
- Light
- Dark
- System
-
-
- ),
-};
diff --git a/apps/xy-styleguide/src/stories/assets/code-brackets.svg b/apps/xy-styleguide/src/stories/assets/code-brackets.svg
deleted file mode 100644
index 73de94776..000000000
--- a/apps/xy-styleguide/src/stories/assets/code-brackets.svg
+++ /dev/null
@@ -1 +0,0 @@
-illustration/code-brackets illustration/colors illustration/comments illustration/direction illustration/flow illustration/plugin illustration/repo illustration/stackalt {title}
- ({} as SharedContext);
diff --git a/apps/xy-styleguide/public/fonts/NTDapper-black.woff2 b/packages/xy-shared/fonts/NTDapper-black.woff2
similarity index 100%
rename from apps/xy-styleguide/public/fonts/NTDapper-black.woff2
rename to packages/xy-shared/fonts/NTDapper-black.woff2
diff --git a/apps/xy-styleguide/public/fonts/NTDapper-bold.woff2 b/packages/xy-shared/fonts/NTDapper-bold.woff2
similarity index 100%
rename from apps/xy-styleguide/public/fonts/NTDapper-bold.woff2
rename to packages/xy-shared/fonts/NTDapper-bold.woff2
diff --git a/apps/xy-styleguide/public/fonts/NTDapper-medium.woff2 b/packages/xy-shared/fonts/NTDapper-medium.woff2
similarity index 100%
rename from apps/xy-styleguide/public/fonts/NTDapper-medium.woff2
rename to packages/xy-shared/fonts/NTDapper-medium.woff2
diff --git a/apps/xy-styleguide/public/fonts/NTDapper-regular.woff2 b/packages/xy-shared/fonts/NTDapper-regular.woff2
similarity index 100%
rename from apps/xy-styleguide/public/fonts/NTDapper-regular.woff2
rename to packages/xy-shared/fonts/NTDapper-regular.woff2
diff --git a/packages/xy-shared/fonts/index.ts b/packages/xy-shared/fonts/index.ts
new file mode 100644
index 000000000..a9a5d5134
--- /dev/null
+++ b/packages/xy-shared/fonts/index.ts
@@ -0,0 +1,20 @@
+import localFont from 'next/font/local';
+import { Fira_Mono } from 'next/font/google';
+
+export const ntDapperFont = localFont({
+ src: [
+ { path: './NTDapper-regular.woff2', weight: '400' },
+ { path: './NTDapper-medium.woff2', weight: '500' },
+ { path: './NTDapper-bold.woff2', weight: '700' },
+ { path: './NTDapper-black.woff2', weight: '900' },
+ ],
+ variable: '--font-ntdapper',
+});
+
+export const firaMonoFont = Fira_Mono({
+ weight: ['400'],
+ subsets: ['latin'],
+ variable: '--font-firamono',
+});
+
+export const fontClassNames = `${ntDapperFont.variable} ${firaMonoFont.variable} font-sans`;
diff --git a/packages/xy-shared/index.tsx b/packages/xy-shared/index.tsx
index 21e9136bb..b3bb08373 100644
--- a/packages/xy-shared/index.tsx
+++ b/packages/xy-shared/index.tsx
@@ -1,11 +1,13 @@
export * from './layouts/404';
export * from './layouts/base';
+export * from './layouts/blog-post-base';
export * from './layouts/blog-post';
export * from './layouts/breakout';
export * from './layouts/case-study';
export * from './layouts/example';
export * from './layouts/showcase';
export * from './layouts/text-only';
+export * from './layouts/tutorial';
export * from './widgets/about-section';
export * from './widgets/authors-list';
@@ -33,6 +35,9 @@ export * from './components/node-wrapper';
export * from './components/timeline-event';
export * from './components/sidebar-title';
export * from './components/remote-content';
-export * from './components/head';
-export * from './lib/utils';
+export * from './lib';
+
+export * from './context/shared-context';
+
+export * from './types';
diff --git a/packages/xy-shared/layouts/blog-post-base.tsx b/packages/xy-shared/layouts/blog-post-base.tsx
new file mode 100644
index 000000000..15c2fe26b
--- /dev/null
+++ b/packages/xy-shared/layouts/blog-post-base.tsx
@@ -0,0 +1,91 @@
+import { type ReactNode } from 'react';
+import { type MdxFile } from 'nextra';
+import { Text, Heading, ContentGrid, ContentGridItem } from '@xyflow/xy-ui';
+
+import { type Author, SubscribeSection, AuthorList, BlogPostPreview } from '..';
+
+export type BlogPostFrontmatter = {
+ title: string;
+ htmlTitle?: string;
+ intro: string;
+ date: string;
+ authors: Author[];
+};
+
+export type BlogPostLayoutProps = {
+ frontMatter: BlogPostFrontmatter;
+ prev?: MdxFile;
+ next?: MdxFile;
+ children: ReactNode;
+};
+
+export function BaseBlogPostLayout({
+ frontMatter,
+ prev,
+ next,
+ children,
+}: BlogPostLayoutProps) {
+ return (
+
+
+ {frontMatter.date}
+
+ {/* we have to use important (!) here to overwrite the nextra article default styles */}
+
+ {frontMatter.htmlTitle ? (
+
+
+
+
+ {children}
+
+
+
+
+
+
+
+
+ {prev && (
+
+
+ )}
+
+ {next && (
+
+
+ )}
+
+
+ );
+}
diff --git a/packages/xy-shared/layouts/blog-post.tsx b/packages/xy-shared/layouts/blog-post.tsx
index a7a775656..fbd68b4bc 100644
--- a/packages/xy-shared/layouts/blog-post.tsx
+++ b/packages/xy-shared/layouts/blog-post.tsx
@@ -1,96 +1,21 @@
-import { type ReactNode } from 'react';
-import { type MdxFile } from 'nextra';
-import { Text, Heading, ContentGrid, ContentGridItem } from '@xyflow/xy-ui';
+import { useContext } from 'react';
+import { getPrevAndNextPagesByTitle } from '../lib';
+import { BaseBlogPostLayout, BlogPostFrontmatter } from './blog-post-base';
+import { SharedContext } from '../context/shared-context';
-import {
- type Author,
- SubscribeSection,
- AuthorList,
- BlogPostPreview,
-} from '../';
-
-export type BlogPostFrontmatter = {
- title: string;
- htmlTitle?: string;
- intro: string;
- date: string;
- authors: Author[];
-};
-
-export type BlogPostLayoutProps = {
- frontMatter: BlogPostFrontmatter;
- prev?: MdxFile;
- next?: MdxFile;
- children: ReactNode;
+type BlogPostLayoutProps = {
+ children: React.ReactNode;
};
-export function BlogPostLayout({
- frontMatter,
- prev,
- next,
- children,
-}: BlogPostLayoutProps) {
- return (
-
-
- {frontMatter.date}
-
- {/* we have to use important (!) here to overwrite the nextra article default styles */}
-
- {frontMatter.htmlTitle ? (
-
-
-
-
- {children}
-
+export function BlogPostLayout({ children }: BlogPostLayoutProps) {
+ const { useConfig } = useContext(SharedContext);
+ const { title, frontMatter } = useConfig
();
-
-
+ const { prev, next } = getPrevAndNextPagesByTitle(title, '/blog');
-
-
- {prev && (
-
-
- )}
-
- {next && (
-
-
- )}
-
-
+
+ <>{children}
+
);
}
diff --git a/packages/xy-shared/layouts/case-study.tsx b/packages/xy-shared/layouts/case-study.tsx
index 9d6db3794..4eb79aa1b 100644
--- a/packages/xy-shared/layouts/case-study.tsx
+++ b/packages/xy-shared/layouts/case-study.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { useContext, type ReactNode } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { type MdxFile } from 'nextra';
@@ -11,7 +11,14 @@ import {
ContentGridItem,
} from '@xyflow/xy-ui';
-import { AuthorList, Author, ProjectPreview, SubscribeSection } from '../';
+import {
+ AuthorList,
+ Author,
+ ProjectPreview,
+ SubscribeSection,
+ SharedContext,
+ getPrevAndNextPagesByTitle,
+} from '../';
export type CaseStudyFrontmatter = {
title: string;
@@ -27,18 +34,14 @@ export type CaseStudyFrontmatter = {
};
export type CaseStudyLayoutProps = {
- frontMatter: CaseStudyFrontmatter;
- prev?: MdxFile;
- next?: MdxFile;
children: ReactNode;
};
-export function CaseStudyLayout({
- frontMatter,
- prev,
- next,
- children,
-}: CaseStudyLayoutProps) {
+export function CaseStudyLayout({ children }: CaseStudyLayoutProps) {
+ const { useConfig } = useContext(SharedContext);
+ const { title, frontMatter } = useConfig();
+
+ const { prev, next } = getPrevAndNextPagesByTitle(title, '/pro/case-studies');
return (
<>
diff --git a/packages/xy-shared/layouts/example.tsx b/packages/xy-shared/layouts/example.tsx
index ac7197cc3..df51a5c97 100644
--- a/packages/xy-shared/layouts/example.tsx
+++ b/packages/xy-shared/layouts/example.tsx
@@ -1,7 +1,7 @@
-import { type ReactNode } from 'react';
+import { SharedContext } from '../context/shared-context';
+import { useContext, type ReactNode } from 'react';
-export type ExampleLayoutProps = {
- frontMatter: { title: string; is_pro_example?: boolean; is_free?: boolean };
+type ExampleLayoutProps = {
children: ReactNode;
};
@@ -10,18 +10,18 @@ export type ExampleLayoutProps = {
* svelteflow.dev.
*
*/
-export function ExampleLayout({ frontMatter, children }: ExampleLayoutProps) {
+export function ExampleLayout({ children }: ExampleLayoutProps) {
+ const { useConfig } = useContext(SharedContext);
+ const { frontMatter } = useConfig<{
+ title: string;
+ }>();
+
return (
<>
{frontMatter.title}
- {frontMatter.is_pro_example && (
-
- Pro {frontMatter.is_free && 'Trial'}
-
- )}
{children}
diff --git a/packages/xy-shared/layouts/tutorial.tsx b/packages/xy-shared/layouts/tutorial.tsx
new file mode 100644
index 000000000..1d90ec570
--- /dev/null
+++ b/packages/xy-shared/layouts/tutorial.tsx
@@ -0,0 +1,22 @@
+import { ReactNode, useContext } from 'react';
+import { BaseBlogPostLayout, BlogPostFrontmatter } from './blog-post-base';
+import { getPrevAndNextPagesByTitle } from '../lib';
+import { SharedContext } from '../context/shared-context';
+
+export type TutorialLayoutProps = {
+ children: ReactNode;
+};
+
+export function TutorialLayout({ children }: TutorialLayoutProps) {
+ const { useConfig } = useContext(SharedContext);
+ const { title, frontMatter } = useConfig
();
+ // const { prev, next } = getPrevAndNextPagesByTitle(title, '/learn/tutorials');
+
+ return (
+
+ <>{children}
+
+ );
+}
+
+export default TutorialLayout;
diff --git a/packages/xy-shared/lib/utils.tsx b/packages/xy-shared/lib/index.tsx
similarity index 73%
rename from packages/xy-shared/lib/utils.tsx
rename to packages/xy-shared/lib/index.tsx
index 2ca03d299..26dfaee20 100644
--- a/packages/xy-shared/lib/utils.tsx
+++ b/packages/xy-shared/lib/index.tsx
@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { Folder, MdxFile, Page } from 'nextra';
-import { getAllPages } from 'nextra/context';
+import type { ReactNode } from 'react';
+import type { Folder, MdxFile, Page } from 'nextra';
+import { getAllPages, getPagesUnderRoute } from 'nextra/context';
import { SidebarTitle } from '../components/sidebar-title';
@@ -107,3 +107,41 @@ export function getMetaConfigFromTitleLookup(
return acc;
}, {});
}
+
+export function getMdxPagesUnderRoute(
+ route: InternalRoute,
+) {
+ return getPagesUnderRoute(route).filter(isMdxFile);
+}
+
+// used for pagination for blog and case studies to display prev and next post/ case study
+export function getPrevAndNextPagesByTitle(
+ title: string,
+ route: InternalRoute,
+) {
+ const pages = getMdxPagesUnderRoute(route);
+
+ const currentIndex = pages.findIndex(
+ (page) => page.frontMatter?.title === title,
+ );
+ const prevIndex = currentIndex === 0 ? pages.length - 1 : currentIndex - 1;
+ const nextIndex = currentIndex === pages.length - 1 ? 0 : currentIndex + 1;
+
+ const prev = pages[prevIndex];
+ const next = pages[nextIndex];
+
+ return { prev, next };
+}
+
+export async function fetchJSON(url: string): Promise> {
+ let json = {};
+
+ try {
+ const resp = await fetch(url, { headers: { 'User-Agent': 'webkid' } });
+ json = await resp.json();
+ } catch (err) {
+ console.log(err);
+ }
+
+ return json;
+}
diff --git a/packages/xy-shared/package.json b/packages/xy-shared/package.json
index 77091896b..02da4aa8a 100644
--- a/packages/xy-shared/package.json
+++ b/packages/xy-shared/package.json
@@ -10,49 +10,46 @@
"generate:component": "turbo gen react-component"
},
"devDependencies": {
- "@types/react": "^18.2.14",
- "@types/react-dom": "^18.2.6",
- "eslint": "^8.43.0",
+ "@types/react": "^18.3.12",
+ "@types/react-dom": "^18.3.1",
+ "eslint": "^8.57.1",
"eslint-config-xyflow": "workspace:*",
- "react": "^18.2.0",
- "typescript": "^5.1.3",
+ "react": "^18.3.1",
+ "typescript": "^5.5.4",
"xy-tsconfig": "workspace:*"
},
"dependencies": {
- "@codesandbox/sandpack-react": "^2.18.2",
- "@docsearch/css": "^3.5.2",
- "@docsearch/react": "^3.5.2",
- "@heroicons/react": "^2.0.18",
- "@radix-ui/react-accordion": "^1.1.2",
- "@radix-ui/react-alert-dialog": "^1.0.5",
- "@radix-ui/react-checkbox": "^1.0.4",
- "@radix-ui/react-label": "^2.0.2",
- "@radix-ui/react-popover": "^1.0.7",
- "@radix-ui/react-radio-group": "^1.1.3",
- "@radix-ui/react-select": "^2.0.0",
- "@radix-ui/react-slider": "^1.1.2",
- "@radix-ui/react-slot": "^1.0.2",
- "@radix-ui/react-tabs": "^1.0.4",
- "@react-three/fiber": "^8.13.7",
+ "@codesandbox/sandpack-react": "^2.19.9",
+ "@docsearch/css": "^3.6.2",
+ "@docsearch/react": "^3.6.2",
+ "@heroicons/react": "^2.1.5",
+ "@radix-ui/react-accordion": "^1.2.1",
+ "@radix-ui/react-alert-dialog": "^1.1.2",
+ "@radix-ui/react-checkbox": "^1.1.2",
+ "@radix-ui/react-label": "^2.1.0",
+ "@radix-ui/react-popover": "^1.1.2",
+ "@radix-ui/react-radio-group": "^1.2.1",
+ "@radix-ui/react-select": "^2.1.2",
+ "@radix-ui/react-slider": "^1.2.1",
+ "@radix-ui/react-slot": "^1.1.0",
+ "@radix-ui/react-tabs": "^1.1.1",
+ "@react-three/fiber": "^8.17.10",
"@sindresorhus/slugify": "^2.2.1",
- "@stackblitz/sdk": "^1.9.0",
- "@xyflow/react": "^12.0.0-next.19",
+ "@stackblitz/sdk": "^1.11.0",
+ "@xyflow/react": "^12.3.2",
"@xyflow/xy-ui": "workspace:*",
- "class-variance-authority": "^0.6.0",
- "clsx": "^1.2.1",
- "fathom-client": "^3.5.0",
- "next": "^13.5.3",
- "react-player": "^2.12.0",
- "reactflow": "^11.10.1",
- "tailwind-merge": "^1.13.2",
- "tailwindcss": "^3.3.2",
- "tailwindcss-animate": "^1.0.6",
+ "clsx": "^2.1.1",
+ "fathom-client": "^3.7.2",
+ "next": "^14.2.15",
+ "nextra": "^3.0.15",
+ "nextra-theme-docs": "^3.0.15",
+ "react-player": "^2.16.0",
+ "tailwindcss": "^3.4.14",
+ "tailwindcss-animate": "^1.0.7",
"timeago-react": "^3.0.6",
"use-error-boundary": "^2.0.6"
},
"peerDependencies": {
- "nextra": "^3.0.4",
- "nextra-theme-docs": "^3.0.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
diff --git a/packages/xy-shared/server/compile-code-snippet.ts b/packages/xy-shared/server/compile-code-snippet.ts
new file mode 100644
index 000000000..7a0bd6e58
--- /dev/null
+++ b/packages/xy-shared/server/compile-code-snippet.ts
@@ -0,0 +1,47 @@
+import { compileMdx } from 'nextra/compile';
+import { CompiledMdx } from '../types';
+
+type CompileCodeSnippetOptions = {
+ filetype?: string;
+ showCopy?: boolean;
+ showLineNumbers?: boolean;
+ highlight?: string;
+ filename?: string;
+ npm2yarn?: boolean;
+};
+
+const defaultOptions = {
+ filetype: 'js',
+ showCopy: false,
+ showLineNumbers: false,
+ highlight: '',
+ filename: '',
+ npm2yarn: false,
+};
+
+function createMDXString(snippet: string, options: CompileCodeSnippetOptions) {
+ return (
+ '```' +
+ options.filetype +
+ (options.showCopy ? ' copy ' : '') +
+ (options.showLineNumbers ? ' showLineNumbers' : '') +
+ (options.highlight ? ` /${options.highlight}/ ` : '') +
+ (options.filename ? ` filename="${options.filename}" ` : '') +
+ (options.npm2yarn ? ' npm2yarn' : '') +
+ '\n' +
+ snippet
+ );
+}
+
+export async function compileCodeSnippet(
+ snippet: string,
+ options?: CompileCodeSnippetOptions,
+): Promise {
+ const opts = { ...defaultOptions, ...options };
+
+ const { result: compiledSource, frontMatter } = await compileMdx(
+ createMDXString(snippet, opts),
+ );
+
+ return { compiledSource, frontMatter };
+}
diff --git a/packages/xy-shared/server/get-static-code.ts b/packages/xy-shared/server/get-static-code.ts
new file mode 100644
index 000000000..f249abb42
--- /dev/null
+++ b/packages/xy-shared/server/get-static-code.ts
@@ -0,0 +1,46 @@
+import { Framework } from '@xyflow/xy-ui';
+import { compileCodeSnippet } from './compile-code-snippet';
+import { CompiledMdx, ExampleCode } from '../types';
+import { loadJSONFile } from './utils';
+
+import path from 'path';
+
+export function getStaticCode(routes: string[], framework?: Framework) {
+ return async () => {
+ const _framework =
+ framework ?? process.env.NEXT_PUBLIC_FRAMEWORK ?? 'react';
+ const codeSnippets: Record> = {};
+
+ for (const route of routes) {
+ const files: Record = {};
+ const url = `${process.env.NEXT_PUBLIC_EXAMPLES_URL}/${_framework}/${route}/source.json`;
+
+ const p = path.join(
+ '../../apps/example-apps/public',
+ _framework,
+ route,
+ 'source.json',
+ );
+
+ const json = loadJSONFile(p);
+
+ if (!json || !('files' in json) || !('dependencies' in json)) {
+ continue;
+ }
+
+ for (const [filename, file] of Object.entries(json.files)) {
+ const filetype = filename.split('.').pop();
+ const compiledSnippet = await compileCodeSnippet(file, { filetype });
+ files[filename] = compiledSnippet;
+ }
+
+ codeSnippets[route] = files;
+ }
+
+ return {
+ props: {
+ codeSnippets,
+ },
+ };
+ };
+}
diff --git a/packages/xy-shared/server/index.ts b/packages/xy-shared/server/index.ts
new file mode 100644
index 000000000..ba7ee10cf
--- /dev/null
+++ b/packages/xy-shared/server/index.ts
@@ -0,0 +1,4 @@
+export * from './compile-code-snippet';
+export * from './get-static-code';
+export * from './mdx-content-under-route';
+export * from './utils';
diff --git a/sites/reactflow.dev/src/utils/get-static-props/mdx-content-under-route.ts b/packages/xy-shared/server/mdx-content-under-route.ts
similarity index 86%
rename from sites/reactflow.dev/src/utils/get-static-props/mdx-content-under-route.ts
rename to packages/xy-shared/server/mdx-content-under-route.ts
index e5e21efb9..0b5e362df 100644
--- a/sites/reactflow.dev/src/utils/get-static-props/mdx-content-under-route.ts
+++ b/packages/xy-shared/server/mdx-content-under-route.ts
@@ -1,14 +1,22 @@
import { buildDynamicMDX } from 'nextra/remote';
import { readFile, readdir, stat } from 'fs/promises';
-import { type InternalRoute } from '../routes';
import * as Path from 'path';
import * as Url from 'url';
const __dirname = Url.fileURLToPath(import.meta.url);
// @todo can we put this in xy-shared=
-export async function getMdxContentUnderRoute(route: InternalRoute) {
- const path = Path.join(__dirname, '../../../pages', route);
+export async function getMdxContentUnderRoute(
+ site: string,
+ route: T,
+) {
+ const path = Path.join(
+ __dirname,
+ '../../../../sites',
+ site,
+ 'src/pages',
+ route,
+ );
const files = await readdir(path);
const mdx = [];
diff --git a/packages/xy-shared/server/utils.ts b/packages/xy-shared/server/utils.ts
new file mode 100644
index 000000000..50dc6bf7b
--- /dev/null
+++ b/packages/xy-shared/server/utils.ts
@@ -0,0 +1,10 @@
+import { readFileSync } from 'fs';
+
+export function loadJSONFile(url: string): T | undefined {
+ try {
+ const file = readFileSync(url, 'utf-8');
+ return JSON.parse(file.toString()) as T;
+ } catch (err) {
+ console.log(err);
+ }
+}
diff --git a/packages/xy-shared/lib/globals.css b/packages/xy-shared/styles/globals.css
similarity index 79%
rename from packages/xy-shared/lib/globals.css
rename to packages/xy-shared/styles/globals.css
index 7e7f639a4..c2ef1a3f2 100644
--- a/packages/xy-shared/lib/globals.css
+++ b/packages/xy-shared/styles/globals.css
@@ -259,7 +259,21 @@ article.nextra-content ol li p {
}
.DocSearch-Button .DocSearch-Button-Keys {
- font-size: 12px;
+ font-size: 14px;
+ min-width: 0;
+ margin-left: 10px;
+ margin-right: 5px;
+}
+
+.DocSearch-Button .DocSearch-Button-Key {
+ background: transparent;
+ box-shadow: none;
+ top: 0;
+ width: auto;
+ height: auto;
+ padding: 0;
+ margin: 0;
+ margin-left: 4px;
}
.DocSearch-Button .DocSearch-Button-Placeholder {
@@ -337,3 +351,70 @@ article.nextra-content ol li p {
overflow-x: hidden;
}
}
+
+/* style of code blocks */
+.nextra-code > div:first-child {
+ @apply bg-primary/10;
+ border: none;
+}
+
+.nextra-code pre {
+ @apply bg-primary/5;
+ box-shadow: none;
+}
+
+/* needed for moving navbar elements to the left */
+.nextra-nav-container nav > div:first-child {
+ @apply !mr-5;
+}
+
+/* stack example code and preview vertically */
+.sandpack-wrapper.vertical > .sp-wrapper > .sp-layout {
+ flex-direction: column-reverse;
+}
+
+.sandpack-wrapper.vertical .sp-stack {
+ flex: none;
+}
+
+/* We have this weird bug where the mobile top navbar can be scrolled out of view
+even though the body is supposed to have overflow:hidden set. The following two
+rules make it work almost correctly, but they don't feel great. */
+
+html:has(body._overflow-hidden) {
+ overflow-y: hidden;
+}
+
+html:has(body._overflow-hidden) nav {
+ position: fixed;
+ width: 100%;
+}
+
+/* this override adds some space for the api docs */
+
+.learn article main.md\:_px-12,
+.api-reference article main.md\:_px-12,
+.examples article main.md\:_px-12 {
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+}
+
+/* this unifies the /examples content width with /api-refernce and /learn */
+
+.examples main._max-w-6xl {
+ max-width: none;
+}
+
+@media (max-width: 950px) {
+ .DocSearch-Button-Keys {
+ display: none;
+ }
+
+ .DocSearch-Button-Placeholder {
+ display: none;
+ }
+
+ .nextra-nav-container > nav {
+ @apply p-2 gap-2;
+ }
+}
diff --git a/packages/xy-shared/types/index.tsx b/packages/xy-shared/types/index.tsx
new file mode 100644
index 000000000..8d321854d
--- /dev/null
+++ b/packages/xy-shared/types/index.tsx
@@ -0,0 +1,11 @@
+export type ExampleCode = {
+ files: Record;
+ dependencies: Record;
+};
+
+export type CompiledMdx = {
+ compiledSource: string;
+ frontMatter: {
+ [key: string]: any;
+ };
+};
diff --git a/packages/xy-shared/widgets/about-section/index.tsx b/packages/xy-shared/widgets/about-section/index.tsx
index 557b51af2..690ab2bce 100644
--- a/packages/xy-shared/widgets/about-section/index.tsx
+++ b/packages/xy-shared/widgets/about-section/index.tsx
@@ -16,7 +16,7 @@ function AboutSection({ imageSrc, colorizeImage = true }: AboutSectionProps) {
A project by the xyflow team
- We are Christopher, Hayleigh, Peter and Moritz. We are the maintainers
+ We are Christopher, Hayleigh, Peter, Abbey and Moritz. We are the maintainers
of React Flow, Svelte Flow, and the communities around them
diff --git a/packages/xy-shared/widgets/hero-flow/fiber.tsx b/packages/xy-shared/widgets/hero-flow/fiber.tsx
index fb5429019..ca05488b7 100644
--- a/packages/xy-shared/widgets/hero-flow/fiber.tsx
+++ b/packages/xy-shared/widgets/hero-flow/fiber.tsx
@@ -44,7 +44,8 @@ function Shape({ type, random, color, ...props }: any) {
) : (
onClick(item.name)}
diff --git a/packages/xy-shared/widgets/image-slider/image-slider-items.tsx b/packages/xy-shared/widgets/image-slider/image-slider-items.tsx
index bfc676736..0628807b9 100644
--- a/packages/xy-shared/widgets/image-slider/image-slider-items.tsx
+++ b/packages/xy-shared/widgets/image-slider/image-slider-items.tsx
@@ -90,7 +90,7 @@ export default function ImageSliderItems({
))}
+
{items.map((item, index) => (
{
+ files[file] = {
+ code: files[file],
+ hidden: true,
+ };
+ });
+
+ return { files, dependencies: json.dependencies };
+}
diff --git a/packages/xy-shared/widgets/remote-code-viewer/index.tsx b/packages/xy-shared/widgets/remote-code-viewer/index.tsx
index 3d1f1c61d..950d637fc 100644
--- a/packages/xy-shared/widgets/remote-code-viewer/index.tsx
+++ b/packages/xy-shared/widgets/remote-code-viewer/index.tsx
@@ -1,20 +1,22 @@
-'use client';
+import { useContext } from 'react';
+import { clsx } from 'clsx';
+import { Code } from 'nextra/components';
import {
- SandpackProvider,
- SandpackLayout,
- SandpackCodeEditor,
- SandpackPreview,
- SandpackStack,
- OpenInCodeSandboxButton,
- SandpackFiles,
- SandpackPredefinedTemplate,
-} from '@codesandbox/sandpack-react';
-import { Framework } from '@xyflow/xy-ui';
-import cn from 'clsx';
-import { useEffect, useState } from 'react';
-import { OpenInCodesandbox } from './open-in-codesandbox';
+ Framework,
+ Tabs,
+ TabsContent,
+ TabsList,
+ TabsTrigger,
+} from '@xyflow/xy-ui';
+
+import { RemoteContent } from '../../components/remote-content';
+import { SharedContext } from '../../context/shared-context';
+import { CompiledMdx } from '../../types';
+
+import './style.css';
import { OpenInStackblitz } from './open-in-stackblitz';
+import { OpenInCodesandbox } from './open-in-codesandbox';
const defaultOptions = {
editorHeight: '60vh',
@@ -24,187 +26,131 @@ const defaultOptions = {
};
export type RemoteCodeViewerProps = {
- source: RemoteCodeViewerSource;
- preview: string;
- framework: Framework;
+ route: string;
+ framework?: Framework;
options?: typeof defaultOptions;
activeFile?: string;
showEditor?: boolean;
showPreview?: boolean;
- customOpenButton?: React.ReactNode;
- sandpackOptions?: Record;
showOpenInCodeSandbox?: boolean;
editorHeight?: string | number;
orientation?: 'horizontal' | 'vertical';
+ sandpackOptions?: Record;
};
-export type RemoteCodeViewerSource =
- | string
- | {
- files: SandpackFiles;
- dependencies: Record;
- };
-
export function RemoteCodeViewer({
- source,
- preview,
+ route,
framework,
showEditor = true,
- customOpenButton = null,
- sandpackOptions = {},
showOpenInCodeSandbox = framework === 'react',
+ sandpackOptions = {},
editorHeight = '60vh',
activeFile,
orientation,
}: RemoteCodeViewerProps) {
- const [filesFetched, setFilesFetched] = useState(typeof source === 'string');
- const [fileFetchFailed, setFileFetchFailed] = useState(false);
- const [files, setFiles] = useState(
- typeof source === 'string'
- ? {
- 'index.html': `
-
-
- Example
-
-
-
-
-`,
- }
- : source.files,
- );
-
- const _orientation = orientation
- ? orientation
- : typeof source === 'string' && source.includes('/examples/')
- ? 'vertical'
- : 'horizontal';
-
- const [dependencies, setDependencies] = useState>(
- typeof source === 'string' ? {} : source.dependencies,
- );
-
- useEffect(() => {
- const loadFiles = async (url: string) => {
- const res = await fetch(url);
- const json = await res.json();
-
- setFilesFetched(true);
-
- if ('files' in json && 'dependencies' in json) {
- const files = json.files;
+ const _framework: Framework =
+ framework ?? (process.env.NEXT_PUBLIC_Framework as Framework) ?? 'react';
- // this is a workaround for the examples that are using jsx
- // if we don't do this, sandpack will generate a default App.tsx file
- if (framework === 'react' && files['App.jsx']) {
- files['App.tsx'] = files['App.jsx'];
- delete files['App.jsx'];
- } else if (framework === 'svelte') {
- for (const file of Object.keys(files)) {
- if (file === 'index.html') {
- files[file] = files[file]?.replace('./index.ts', './src/main.ts');
- continue;
- }
+ const preview = `${process.env.NEXT_PUBLIC_EXAMPLES_URL}/${_framework}/${route}/index.html`;
- if (file === 'index.ts') {
- files['src/main.ts'] = files[file];
- } else {
- files[`src/${file}`] = files[file];
- }
+ const isExample = route.includes('examples/');
+ const isHorizontal = orientation
+ ? orientation === 'horizontal'
+ : isExample
+ ? false
+ : true;
- delete files[file];
- }
- }
+ const { useData } = useContext(SharedContext);
+ const snippets: Record | undefined =
+ useData('codeSnippets')?.[route];
- // we want to hide these files in the editor on website to reduce the noise
- ['index.html', 'index.jsx', 'index.tsx', 'src/main.ts'].forEach(
- (file) => {
- files[file] = {
- code: files[file],
- hidden: true,
- };
- },
- );
-
- setFiles(json.files);
- setDependencies(json.dependencies);
- } else {
- setFileFetchFailed(true);
- }
- };
-
- if (typeof source === 'string') {
- loadFiles(source);
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
-
- if (fileFetchFailed) {
- return (
-
-
Example failed to load
-
- {filesFetched && (
-
+
+
+
+
-
- {showEditor && (
-
-
-
-
-
+ {snippets && (
+
+
+ {Object.keys(snippets).map((filename) => (
+
+ {filename}
+
+ ))}
+
+
+ {Object.entries(snippets).map(([filename, file]) => (
+
+
+ ))}
-
-
-
+
+ )}
+
;
+};
+
+type Files = {
+ [path: string]: {
+ code: string;
+ };
+};
+
+type Dependencies = Record;
+
+export function OpenInCodesandbox({
+ framework,
+ route,
+ sandpackOptions,
+}: OpenInCodesandboxProps) {
+ const [mountReroute, setMountReroute] = useState(null);
+
+ const openInCodesandbox = useCallback(async () => {
+ try {
+ const { files, dependencies } = await fetchFiles(route, framework);
+
+ setMountReroute({ files, dependencies });
+ } catch (e) {}
+ }, [framework, route]);
-export function OpenInCodesandbox() {
return (
-
+ <>
+ {/* When the files & dependencies are loader we mount the Sandpack provider
+ with it */}
+ {mountReroute && (
+
+ {/* Inside we mount a component that will acess the context created by the provider */}
+
+ )}
Open in Codesandbox
+
+ );
+}
+
+function VirtualCodeSandboxButton() {
+ const codesandboxInitiated = useRef(false);
+
+ useEffect(() => {
+ codesandboxInitiated.current = true;
+ }, []);
+
+ // all the relevant logic for creating the sandbox is inside the UnstyledOpenInCodeSandboxButton component
+ // there is even a 600ms delay implemented in the source code, which I am not in the position to question.
+ // https://github.com/codesandbox/sandpack/blob/8716a577694885b53e0696a275ecbf0b87097fc1/sandpack-react/src/components/common/OpenInCodeSandboxButton/UnstyledOpenInCodeSandboxButton.tsx#L112
+ return (
+
+
);
}
+
+function RerouteToCodeSandbox({
+ codesandboxInitiated,
+}: {
+ codesandboxInitiated: MutableRefObject;
+}) {
+ return (
+ {
+ // This component waits to be rerendered after the parent component has mounted.
+ // It should only rerender once the url of the sandbox is determined.
+ if (codesandboxInitiated.current && ref) {
+ ref.click();
+ }
+ }}
+ >
+ );
+}
diff --git a/packages/xy-shared/widgets/remote-code-viewer/open-in-stackblitz.tsx b/packages/xy-shared/widgets/remote-code-viewer/open-in-stackblitz.tsx
index 99bebc4e4..1b1745ccf 100644
--- a/packages/xy-shared/widgets/remote-code-viewer/open-in-stackblitz.tsx
+++ b/packages/xy-shared/widgets/remote-code-viewer/open-in-stackblitz.tsx
@@ -1,24 +1,29 @@
-import { SandpackFile } from '@codesandbox/sandpack-react/types';
+import { useCallback } from 'react';
import sdk, { Project, ProjectTemplate, OpenOptions } from '@stackblitz/sdk';
+
import { Button, Framework } from '@xyflow/xy-ui';
-import { useCallback } from 'react';
+import { fetchFiles } from './fetchFiles';
type OpenInStackblitzProps = {
- files: Record;
- dependencies: Record;
framework: Framework;
+ route: string;
+};
+
+type Files = {
+ [path: string]: {
+ code: string;
+ };
};
-export function OpenInStackblitz({
- files,
- dependencies,
- framework,
-}: OpenInStackblitzProps) {
- const openInStackblitz = useCallback(() => {
- const { project, options } = prepare(framework, files, dependencies);
+export function OpenInStackblitz({ framework, route }: OpenInStackblitzProps) {
+ const openInStackblitz = useCallback(async () => {
+ try {
+ const { files, dependencies } = await fetchFiles(route, framework);
+ const { project, options } = prepare(framework, files, dependencies);
- sdk.openProject(project, options);
- }, [framework, files, dependencies]);
+ sdk.openProject(project, options);
+ } catch (e) {}
+ }, [framework, route]);
return (
,
+ files: Files,
dependencies: Record,
): { project: Project; options: OpenOptions } {
switch (framework) {
@@ -67,7 +72,7 @@ function prepare(
}
function prepareReactProject(
- files: Record,
+ files: Files,
dependencies: Record,
) {
return {
@@ -116,7 +121,7 @@ function prepareReactProject(
}
function prepareSvelteProject(
- files: Record,
+ files: Files,
dependencies: Record,
) {
return {
diff --git a/packages/xy-shared/widgets/remote-code-viewer/style.css b/packages/xy-shared/widgets/remote-code-viewer/style.css
new file mode 100644
index 000000000..2ff411061
--- /dev/null
+++ b/packages/xy-shared/widgets/remote-code-viewer/style.css
@@ -0,0 +1,4 @@
+.remote-code-viewer .nextra-code pre {
+ background-color: transparent !important;
+ overflow: visible;
+}
diff --git a/packages/xy-shared/widgets/search/index.tsx b/packages/xy-shared/widgets/search/index.tsx
index 9811a04e0..87bcf3615 100644
--- a/packages/xy-shared/widgets/search/index.tsx
+++ b/packages/xy-shared/widgets/search/index.tsx
@@ -12,12 +12,14 @@ function Search() {
}
return (
-
+
);
}
diff --git a/packages/xy-ui/components/ui/logo.tsx b/packages/xy-ui/components/ui/logo.tsx
index 89cf63698..d3bfa94ae 100644
--- a/packages/xy-ui/components/ui/logo.tsx
+++ b/packages/xy-ui/components/ui/logo.tsx
@@ -120,8 +120,13 @@ function LogoLabel({
}: LogoLabelProps) {
return (
+
{label}
diff --git a/packages/xy-ui/components/ui/tabs.tsx b/packages/xy-ui/components/ui/tabs.tsx
index 3557f7a6e..01ebb344b 100644
--- a/packages/xy-ui/components/ui/tabs.tsx
+++ b/packages/xy-ui/components/ui/tabs.tsx
@@ -2,6 +2,7 @@
import * as React from 'react';
import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '../../lib/utils';
const Tabs = TabsPrimitive.Root;
@@ -9,8 +10,13 @@ const TabsList = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
-
+
+
+ Preview
+ Demo Code
+
+
+
+
+
+
+
+
+
+
+ Installation
+
+
+
+ CLI
+ Manual
+
+
+
+ Make sure to follow the{' '}
+
+
+
+
+ 1. Install Dependencies
+
+
+ 2. Copy Paste into your app
+
+
+ 3. Update the import paths to match your project setup.
+
+
+
+
+
();
- const { prev, next } = getPrevAndNextPagesByTitle(title, '/pro/case-studies');
-
- return (
-
- <>{children}
-
- );
-}
-
-export default CaseStudyLayout;
-
-// UTILS -----------------------------------------------------------------------
-
-function getPrevAndNextPagesByTitle(title: string, route: string) {
- const pages = getMdxPagesUnderRoute(route)
- .filter((p) => p.name !== 'index')
- .sort((a, b) => {
- const aDate = new Date(a.frontMatter?.date);
- const bDate = new Date(b.frontMatter?.date);
-
- return aDate.getTime() - bDate.getTime();
- });
-
- const currentIndex = pages.findIndex(
- (page) => page.frontMatter?.title === title,
- );
- const prevIndex = currentIndex - 1 < 0 ? pages.length - 1 : currentIndex - 1;
- const nextIndex = currentIndex + 1 > pages.length - 1 ? 0 : currentIndex + 1;
-
- const prev = pages[prevIndex];
- const next = pages[nextIndex];
-
- return { prev, next };
-}
-
-function getMdxPagesUnderRoute(route: string) {
- return getPagesUnderRoute(route).filter(isMdxFile);
-}
diff --git a/sites/reactflow.dev/src/layouts/example-with-frontmatter.tsx b/sites/reactflow.dev/src/layouts/example-with-frontmatter.tsx
deleted file mode 100644
index 961018e20..000000000
--- a/sites/reactflow.dev/src/layouts/example-with-frontmatter.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useConfig } from 'nextra-theme-docs';
-import { ExampleLayout as BaseExampleLayout } from 'xy-shared';
-
-export type ExampleLayoutProps = {
- children: React.ReactNode;
-};
-
-export type ExampleFrontmatter = {
- title: string;
-};
-
-/**
- * This layout is a thin wrapper around the `ExampleLayout` we have defined in
- * `xy-ui`. We need to use this so we can access the YAML frontmatter from our
- * examples using nextra's `useConfig` hook.
- *
- * We can't use that hook directly in the `ExampleLayout` because it's not part
- * of this package, it wouldn't know where to look!
- *
- */
-export function ExampleLayout({ children }) {
- const { frontMatter } = useConfig();
-
- return (
- {children}
- );
-}
-
-export default ExampleLayout;
diff --git a/sites/reactflow.dev/src/sites/examples/overview.tsx b/sites/reactflow.dev/src/layouts/examples/overview.tsx
similarity index 98%
rename from sites/reactflow.dev/src/sites/examples/overview.tsx
rename to sites/reactflow.dev/src/layouts/examples/overview.tsx
index ef47878e8..51e55e1a8 100644
--- a/sites/reactflow.dev/src/sites/examples/overview.tsx
+++ b/sites/reactflow.dev/src/layouts/examples/overview.tsx
@@ -10,9 +10,8 @@ import {
Button,
Link,
} from '@xyflow/xy-ui';
-import { ProjectPreview } from 'xy-shared';
+import { ProjectPreview, getMdxPagesUnderRoute } from 'xy-shared';
-import { getMdxPagesUnderRoute } from '@/utils';
import { ArrowRightCircleIcon } from '@heroicons/react/24/solid';
export default function ExamplesOverviewPage({
diff --git a/sites/reactflow.dev/src/sites/home/flows/flow-a.tsx b/sites/reactflow.dev/src/layouts/home/flows/flow-a.tsx
similarity index 100%
rename from sites/reactflow.dev/src/sites/home/flows/flow-a.tsx
rename to sites/reactflow.dev/src/layouts/home/flows/flow-a.tsx
diff --git a/sites/reactflow.dev/src/sites/home/flows/flow-b.tsx b/sites/reactflow.dev/src/layouts/home/flows/flow-b.tsx
similarity index 100%
rename from sites/reactflow.dev/src/sites/home/flows/flow-b.tsx
rename to sites/reactflow.dev/src/layouts/home/flows/flow-b.tsx
diff --git a/sites/reactflow.dev/src/sites/home/flows/flow-c.tsx b/sites/reactflow.dev/src/layouts/home/flows/flow-c.tsx
similarity index 100%
rename from sites/reactflow.dev/src/sites/home/flows/flow-c.tsx
rename to sites/reactflow.dev/src/layouts/home/flows/flow-c.tsx
diff --git a/sites/reactflow.dev/src/sites/home/index.tsx b/sites/reactflow.dev/src/layouts/home/index.tsx
similarity index 98%
rename from sites/reactflow.dev/src/sites/home/index.tsx
rename to sites/reactflow.dev/src/layouts/home/index.tsx
index ab0e45847..6b8424a27 100644
--- a/sites/reactflow.dev/src/sites/home/index.tsx
+++ b/sites/reactflow.dev/src/layouts/home/index.tsx
@@ -45,7 +45,7 @@ const features = [
{
title: 'All the right plugins',
text: 'Make more advanced apps with the Background, Minimap, Controls, Panel, NodeToolbar, and NodeResizer components.',
- route: '/learn/concepts/plugin-components' satisfies InternalRoute,
+ route: '/learn/concepts/built-in-components' satisfies InternalRoute,
flowComponent: FlowC,
},
];
diff --git a/sites/reactflow.dev/src/sites/pro/case-studies.tsx b/sites/reactflow.dev/src/layouts/pro/case-studies.tsx
similarity index 91%
rename from sites/reactflow.dev/src/sites/pro/case-studies.tsx
rename to sites/reactflow.dev/src/layouts/pro/case-studies.tsx
index d6c8cf977..ff46fc31d 100644
--- a/sites/reactflow.dev/src/sites/pro/case-studies.tsx
+++ b/sites/reactflow.dev/src/layouts/pro/case-studies.tsx
@@ -1,8 +1,12 @@
import { SparklesIcon } from '@heroicons/react/24/outline';
import { ContentGrid, ContentGridItem } from '@xyflow/xy-ui';
-import { BaseLayout, Hero, ProjectPreview, SubscribeSection } from 'xy-shared';
-
-import { getMdxPagesUnderRoute } from '@/utils';
+import {
+ BaseLayout,
+ Hero,
+ ProjectPreview,
+ SubscribeSection,
+ getMdxPagesUnderRoute,
+} from 'xy-shared';
export default function CaseStudies() {
return (
diff --git a/sites/reactflow.dev/src/sites/pro/enterprise.tsx b/sites/reactflow.dev/src/layouts/pro/enterprise.tsx
similarity index 100%
rename from sites/reactflow.dev/src/sites/pro/enterprise.tsx
rename to sites/reactflow.dev/src/layouts/pro/enterprise.tsx
diff --git a/sites/reactflow.dev/src/sites/pro/examples.tsx b/sites/reactflow.dev/src/layouts/pro/examples.tsx
similarity index 98%
rename from sites/reactflow.dev/src/sites/pro/examples.tsx
rename to sites/reactflow.dev/src/layouts/pro/examples.tsx
index e7b0aee92..c2acdc652 100644
--- a/sites/reactflow.dev/src/sites/pro/examples.tsx
+++ b/sites/reactflow.dev/src/layouts/pro/examples.tsx
@@ -15,7 +15,13 @@ import {
Section,
ListWrapper,
} from '@xyflow/xy-ui';
-import { BaseLayout, Hero, ProjectPreview, LayoutBreakout } from 'xy-shared';
+import {
+ BaseLayout,
+ Hero,
+ ProjectPreview,
+ LayoutBreakout,
+ getMdxPagesUnderRoute,
+} from 'xy-shared';
import {
ArrowDownCircleIcon,
ArrowRightCircleIcon,
@@ -24,7 +30,6 @@ import {
StarIcon,
} from '@heroicons/react/24/outline';
-import { getMdxPagesUnderRoute } from '@/utils';
import starsvg from '../../../public/img/pro/star.svg';
function getProExamplesUnderRoute(route) {
diff --git a/sites/reactflow.dev/src/sites/pro/index.tsx b/sites/reactflow.dev/src/layouts/pro/index.tsx
similarity index 97%
rename from sites/reactflow.dev/src/sites/pro/index.tsx
rename to sites/reactflow.dev/src/layouts/pro/index.tsx
index c8830c7d6..feec2e2ff 100644
--- a/sites/reactflow.dev/src/sites/pro/index.tsx
+++ b/sites/reactflow.dev/src/layouts/pro/index.tsx
@@ -68,7 +68,7 @@ export default function ReactFlowPro() {
React Flow
}
- subtitle="Thanks for checking out React Flow Pro! We are Christopher, Hayleigh, Moritz and Peter, and we are the team building and maintaining React Flow"
+ subtitle="Thanks for checking out React Flow Pro! We are Christopher, Hayleigh, Moritz, Abbey and Peter, and we are the team building and maintaining React Flow"
kicker="React Flow Pro"
kickerIcon={SparklesIcon}
action={
diff --git a/sites/reactflow.dev/src/sites/pro/pricing.tsx b/sites/reactflow.dev/src/layouts/pro/pricing.tsx
similarity index 100%
rename from sites/reactflow.dev/src/sites/pro/pricing.tsx
rename to sites/reactflow.dev/src/layouts/pro/pricing.tsx
diff --git a/sites/reactflow.dev/src/sites/pro/quote-request.tsx b/sites/reactflow.dev/src/layouts/pro/quote-request.tsx
similarity index 100%
rename from sites/reactflow.dev/src/sites/pro/quote-request.tsx
rename to sites/reactflow.dev/src/layouts/pro/quote-request.tsx
diff --git a/sites/reactflow.dev/src/sites/showcase.tsx b/sites/reactflow.dev/src/layouts/showcase.tsx
similarity index 100%
rename from sites/reactflow.dev/src/sites/showcase.tsx
rename to sites/reactflow.dev/src/layouts/showcase.tsx
diff --git a/sites/reactflow.dev/src/sites/surveys/flow/edges.tsx b/sites/reactflow.dev/src/layouts/surveys/flow/edges.tsx
similarity index 100%
rename from sites/reactflow.dev/src/sites/surveys/flow/edges.tsx
rename to sites/reactflow.dev/src/layouts/surveys/flow/edges.tsx
diff --git a/sites/reactflow.dev/src/sites/surveys/flow/hooks.ts b/sites/reactflow.dev/src/layouts/surveys/flow/hooks.ts
similarity index 100%
rename from sites/reactflow.dev/src/sites/surveys/flow/hooks.ts
rename to sites/reactflow.dev/src/layouts/surveys/flow/hooks.ts
diff --git a/sites/reactflow.dev/src/sites/surveys/flow/nodes.tsx b/sites/reactflow.dev/src/layouts/surveys/flow/nodes.tsx
similarity index 100%
rename from sites/reactflow.dev/src/sites/surveys/flow/nodes.tsx
rename to sites/reactflow.dev/src/layouts/surveys/flow/nodes.tsx
diff --git a/sites/reactflow.dev/src/sites/surveys/reactflow-2023.tsx b/sites/reactflow.dev/src/layouts/surveys/reactflow-2023.tsx
similarity index 100%
rename from sites/reactflow.dev/src/sites/surveys/reactflow-2023.tsx
rename to sites/reactflow.dev/src/layouts/surveys/reactflow-2023.tsx
diff --git a/sites/reactflow.dev/src/layouts/tutorial-with-frontmatter.tsx b/sites/reactflow.dev/src/layouts/tutorial-with-frontmatter.tsx
deleted file mode 100644
index eaa7ed880..000000000
--- a/sites/reactflow.dev/src/layouts/tutorial-with-frontmatter.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { ReactNode } from 'react';
-import { useConfig } from 'nextra-theme-docs';
-import { getPagesUnderRoute } from 'nextra/context';
-import {
- BlogPostLayout as BaseBlogPostLayout,
- isMdxFile,
- type BlogPostFrontmatter,
-} from 'xy-shared';
-
-export type TutorialLayoutProps = {
- children: ReactNode;
-};
-
-export function TutorialLayout({ children }: TutorialLayoutProps) {
- const { title, frontMatter } = useConfig();
- const { prev, next } = getPrevAndNextPagesByTitle(title, '/learn/tutorials');
-
- return (
-
- <>{children}
-
- );
-}
-
-export default TutorialLayout;
-
-// UTILS -----------------------------------------------------------------------
-
-function getPrevAndNextPagesByTitle(title: string, route: string) {
- const pages = getMdxPagesUnderRoute(route).sort((a, b) => {
- const aDate = new Date(a.frontMatter?.date);
- const bDate = new Date(b.frontMatter?.date);
-
- return aDate.getTime() - bDate.getTime();
- });
-
- const currentIndex = pages.findIndex(
- (page) => page.frontMatter?.title === title,
- );
-
- const prev = pages[currentIndex - 1];
- const next = pages[currentIndex + 1];
-
- return { prev, next };
-}
-
-function getMdxPagesUnderRoute(route: string) {
- return getPagesUnderRoute(route).filter(isMdxFile);
-}
diff --git a/sites/reactflow.dev/src/sites/tutorials.tsx b/sites/reactflow.dev/src/layouts/tutorials.tsx
similarity index 89%
rename from sites/reactflow.dev/src/sites/tutorials.tsx
rename to sites/reactflow.dev/src/layouts/tutorials.tsx
index e126b6c66..08e6f154f 100644
--- a/sites/reactflow.dev/src/sites/tutorials.tsx
+++ b/sites/reactflow.dev/src/layouts/tutorials.tsx
@@ -1,8 +1,12 @@
import { BookOpenIcon } from '@heroicons/react/24/outline';
import { ContentGrid, ContentGridItem } from '@xyflow/xy-ui';
-import { BaseLayout, Hero, ProjectPreview, SubscribeSection } from 'xy-shared';
-
-import { getMdxPagesUnderRoute } from '@/utils';
+import {
+ BaseLayout,
+ Hero,
+ ProjectPreview,
+ SubscribeSection,
+ getMdxPagesUnderRoute,
+} from 'xy-shared';
export default function CaseStudies() {
return (
diff --git a/sites/reactflow.dev/src/sites/whats-new.tsx b/sites/reactflow.dev/src/layouts/whats-new.tsx
similarity index 100%
rename from sites/reactflow.dev/src/sites/whats-new.tsx
rename to sites/reactflow.dev/src/layouts/whats-new.tsx
diff --git a/sites/reactflow.dev/src/pages/_app.tsx b/sites/reactflow.dev/src/pages/_app.tsx
index 7b896fd44..7d585dba9 100644
--- a/sites/reactflow.dev/src/pages/_app.tsx
+++ b/sites/reactflow.dev/src/pages/_app.tsx
@@ -1,34 +1,21 @@
import { useRouter } from 'next/router';
-import localFont from 'next/font/local';
-import { Fira_Mono } from 'next/font/google';
import { cn } from '@xyflow/xy-ui';
-import { useFathom } from 'xy-shared';
-import 'styles/global.css';
+import { useData } from 'nextra/hooks';
+import { useConfig } from 'nextra-theme-docs';
-const ntDapperFont = localFont({
- src: [
- { path: '../styles/fonts/NTDapper-regular.woff2', weight: '400' },
- { path: '../styles/fonts/NTDapper-medium.woff2', weight: '500' },
- { path: '../styles/fonts/NTDapper-bold.woff2', weight: '700' },
- { path: '../styles/fonts/NTDapper-black.woff2', weight: '900' },
- ],
- variable: '--font-ntdapper',
-});
+import { SharedContext, useFathom } from 'xy-shared';
+import { ntDapperFont, fontClassNames } from 'xy-shared/fonts';
-const firaMonoFont = Fira_Mono({
- weight: ['400'],
- subsets: ['latin'],
- variable: '--font-firamono',
-});
-
-const className = `${ntDapperFont.variable} ${firaMonoFont.variable} font-sans`;
+import '../global.css';
const fathomOptions = {
id: 'LXMRMWLB',
domains: ['reactflow.dev'],
};
+const sharedContext = { useConfig, useData };
+
export default function App({ Component, pageProps }) {
const router = useRouter();
// we need this to be able to override nextra theme styles for specific pages
@@ -42,8 +29,10 @@ export default function App({ Component, pageProps }) {
font-family: ${ntDapperFont.style.fontFamily}, sans-serif;
}
`}
-
-
+
+
+
);
diff --git a/sites/reactflow.dev/src/pages/_meta.ts b/sites/reactflow.dev/src/pages/_meta.ts
index 45a68e2cb..c6f151bd0 100644
--- a/sites/reactflow.dev/src/pages/_meta.ts
+++ b/sites/reactflow.dev/src/pages/_meta.ts
@@ -6,32 +6,39 @@ export default {
},
},
learn: 'Learn',
- examples: 'Examples',
'api-reference': 'Reference',
+ examples: 'Examples',
+ components: {
+ title: 'Components',
+ display: 'visible',
+ },
+ showcase: {
+ title: 'Showcase',
+ theme: {
+ layout: 'raw',
+ },
+ },
community: {
- title: 'Community',
+ title: 'More',
+ // display: 'hidden',
type: 'menu',
items: {
- showcase: {
- title: 'Showcase',
- href: '/showcase',
- },
'whats-new': {
- title: "What's new?",
+ title: 'Changelog',
href: '/whats-new',
},
blog: {
title: 'Blog',
href: 'https://xyflow.com/blog',
},
- discord: {
- title: 'Discord',
- href: 'https://discord.gg/RVmnytFmGW',
- },
- github: {
- title: 'Github',
- href: 'https://github.com/xyflow/xyflow',
- },
+ // discord: {
+ // title: 'Discord',
+ // href: 'https://discord.gg/RVmnytFmGW',
+ // },
+ // github: {
+ // title: 'Github',
+ // href: 'https://github.com/xyflow/xyflow',
+ // },
contact: {
title: 'Contact Us',
href: 'https://xyflow.com/contact',
@@ -46,13 +53,13 @@ export default {
layout: 'raw',
},
},
- showcase: {
- title: 'Showcase',
- display: 'hidden',
- theme: {
- layout: 'raw',
- },
- },
+ // showcase: {
+ // title: 'Showcase',
+ // display: 'hidden',
+ // theme: {
+ // layout: 'raw',
+ // },
+ // },
pro: {
title: 'Pro',
display: 'hidden',
diff --git a/sites/reactflow.dev/src/pages/api-reference/components/background.mdx b/sites/reactflow.dev/src/pages/api-reference/components/background.mdx
index 5ca6b7426..035b66ce8 100644
--- a/sites/reactflow.dev/src/pages/api-reference/components/background.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/components/background.mdx
@@ -8,7 +8,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { backgroundProps } from '@/page-data/reference/components/Background.ts';
+import { backgroundProps } from '@/references/components/Background.ts';
# <Background />
diff --git a/sites/reactflow.dev/src/pages/api-reference/components/base-edge.mdx b/sites/reactflow.dev/src/pages/api-reference/components/base-edge.mdx
index 1e31053bc..02fa7d4e1 100644
--- a/sites/reactflow.dev/src/pages/api-reference/components/base-edge.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/components/base-edge.mdx
@@ -8,7 +8,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { baseEdgeProps } from '@/page-data/reference/components/BaseEdge.ts';
+import { baseEdgeProps } from '@/references/components/BaseEdge.ts';
# <BaseEdge />
diff --git a/sites/reactflow.dev/src/pages/api-reference/components/controls.mdx b/sites/reactflow.dev/src/pages/api-reference/components/controls.mdx
index f2624407c..08c4e7c09 100644
--- a/sites/reactflow.dev/src/pages/api-reference/components/controls.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/components/controls.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { controlsProps } from '@/page-data/reference/components/Controls.ts';
+import { controlsProps } from '@/references/components/Controls.ts';
# <Controls />
diff --git a/sites/reactflow.dev/src/pages/api-reference/components/edge-label-renderer.mdx b/sites/reactflow.dev/src/pages/api-reference/components/edge-label-renderer.mdx
index 3c9359c07..45c3addbc 100644
--- a/sites/reactflow.dev/src/pages/api-reference/components/edge-label-renderer.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/components/edge-label-renderer.mdx
@@ -10,7 +10,7 @@ description:
import { Callout } from 'nextra/components';
import { PropsTable } from '@/components/props-table';
-import { edgeLabelRendererProps } from '@/page-data/reference/components/EdgeLabelRenderer.ts';
+import { edgeLabelRendererProps } from '@/references/components/EdgeLabelRenderer.ts';
# <EdgeLabelRenderer />
diff --git a/sites/reactflow.dev/src/pages/api-reference/components/edge-text.mdx b/sites/reactflow.dev/src/pages/api-reference/components/edge-text.mdx
index c6b7665a0..7a0f51e04 100644
--- a/sites/reactflow.dev/src/pages/api-reference/components/edge-text.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/components/edge-text.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { edgeTextProps } from '@/page-data/reference/components/EdgeText.ts';
+import { edgeTextProps } from '@/references/components/EdgeText.ts';
# <EdgeText />
diff --git a/sites/reactflow.dev/src/pages/api-reference/components/handle.mdx b/sites/reactflow.dev/src/pages/api-reference/components/handle.mdx
index f0159ffd1..232df3271 100644
--- a/sites/reactflow.dev/src/pages/api-reference/components/handle.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/components/handle.mdx
@@ -5,7 +5,7 @@ description: 'The Handle component is used in your custom nodes to define connec
---
import { PropsTable } from '@/components/props-table';
-import { handleProps } from '@/page-data/reference/components/Handle.ts';
+import { handleProps } from '@/references/components/Handle.ts';
# <Handle />
diff --git a/sites/reactflow.dev/src/pages/api-reference/components/minimap.mdx b/sites/reactflow.dev/src/pages/api-reference/components/minimap.mdx
index 3c975f86a..6ba2a08b7 100644
--- a/sites/reactflow.dev/src/pages/api-reference/components/minimap.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/components/minimap.mdx
@@ -12,7 +12,7 @@ import { PropsTable } from '@/components/props-table';
import {
miniMapProps,
miniMapNodeProps,
-} from '@/page-data/reference/components/MiniMap.ts';
+} from '@/references/components/MiniMap.ts';
# <MiniMap />
diff --git a/sites/reactflow.dev/src/pages/api-reference/components/node-resize-control.mdx b/sites/reactflow.dev/src/pages/api-reference/components/node-resize-control.mdx
index ddd524745..780007d2c 100644
--- a/sites/reactflow.dev/src/pages/api-reference/components/node-resize-control.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/components/node-resize-control.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { nodeResizeControlProps } from '@/page-data/reference/components/NodeResizeControl.ts';
+import { nodeResizeControlProps } from '@/references/components/NodeResizeControl.ts';
# <NodeResizeControl />
diff --git a/sites/reactflow.dev/src/pages/api-reference/components/node-resizer.mdx b/sites/reactflow.dev/src/pages/api-reference/components/node-resizer.mdx
index 7b5ca544a..b80cfd6f6 100644
--- a/sites/reactflow.dev/src/pages/api-reference/components/node-resizer.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/components/node-resizer.mdx
@@ -8,7 +8,9 @@ description:
import { RemoteCodeViewer } from 'xy-shared';
import { PropsTable } from '@/components/props-table';
-import { nodeResizerProps } from '@/page-data/reference/components/NodeResizer.ts';
+import { nodeResizerProps } from '@/references/components/NodeResizer.ts';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/nodes/node-resizer']);
# <NodeResizer />
@@ -46,11 +48,7 @@ as `NodeResizerProps`.
Head over to the [example page](/examples/nodes/node-resizer) to see how this is done.
-
+
### Custom Resize Controls
diff --git a/sites/reactflow.dev/src/pages/api-reference/components/node-toolbar.mdx b/sites/reactflow.dev/src/pages/api-reference/components/node-toolbar.mdx
index 954b1762d..b5450ac4f 100644
--- a/sites/reactflow.dev/src/pages/api-reference/components/node-toolbar.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/components/node-toolbar.mdx
@@ -8,7 +8,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { nodeToolbarProps } from '@/page-data/reference/components/NodeToolbar.ts';
+import { nodeToolbarProps } from '@/references/components/NodeToolbar.ts';
# <NodeToolbar />
diff --git a/sites/reactflow.dev/src/pages/api-reference/components/panel.mdx b/sites/reactflow.dev/src/pages/api-reference/components/panel.mdx
index e110e3402..b475fbf7e 100644
--- a/sites/reactflow.dev/src/pages/api-reference/components/panel.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/components/panel.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { panelProps } from '@/page-data/reference/components/Panel.ts';
+import { panelProps } from '@/references/components/Panel.ts';
# <Panel />
diff --git a/sites/reactflow.dev/src/pages/api-reference/hooks/use-connection.mdx b/sites/reactflow.dev/src/pages/api-reference/hooks/use-connection.mdx
index ef47dd7b9..6b9f63b92 100644
--- a/sites/reactflow.dev/src/pages/api-reference/hooks/use-connection.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/hooks/use-connection.mdx
@@ -9,7 +9,7 @@ created_at: 2024-07-09
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useConnection.ts';
+import { signature } from '@/references/hooks/useConnection.ts';
# useConnection
diff --git a/sites/reactflow.dev/src/pages/api-reference/hooks/use-edges-state.mdx b/sites/reactflow.dev/src/pages/api-reference/hooks/use-edges-state.mdx
index c31991819..9de3b105d 100644
--- a/sites/reactflow.dev/src/pages/api-reference/hooks/use-edges-state.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/hooks/use-edges-state.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useEdgesState.ts';
+import { signature } from '@/references/hooks/useEdgesState.ts';
# useEdgesState
diff --git a/sites/reactflow.dev/src/pages/api-reference/hooks/use-edges.mdx b/sites/reactflow.dev/src/pages/api-reference/hooks/use-edges.mdx
index 11c01fcb5..bab4a6aef 100644
--- a/sites/reactflow.dev/src/pages/api-reference/hooks/use-edges.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/hooks/use-edges.mdx
@@ -6,7 +6,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useEdges.ts';
+import { signature } from '@/references/hooks/useEdges.ts';
# useEdges
diff --git a/sites/reactflow.dev/src/pages/api-reference/hooks/use-handle-connections.mdx b/sites/reactflow.dev/src/pages/api-reference/hooks/use-handle-connections.mdx
index 4b905151e..f8a82a87b 100644
--- a/sites/reactflow.dev/src/pages/api-reference/hooks/use-handle-connections.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/hooks/use-handle-connections.mdx
@@ -7,7 +7,7 @@ created_at: 2024-07-09
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useHandleConnections.ts';
+import { signature } from '@/references/hooks/useHandleConnections.ts';
# useHandleConnections
diff --git a/sites/reactflow.dev/src/pages/api-reference/hooks/use-internal-node.mdx b/sites/reactflow.dev/src/pages/api-reference/hooks/use-internal-node.mdx
index 67c5903d6..ea9ab9370 100644
--- a/sites/reactflow.dev/src/pages/api-reference/hooks/use-internal-node.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/hooks/use-internal-node.mdx
@@ -4,7 +4,7 @@ description: 'This hook returns an InternalNode object for the given node ID.'
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useInternalNode.ts';
+import { signature } from '@/references/hooks/useInternalNode.ts';
# useInternalNode
diff --git a/sites/reactflow.dev/src/pages/api-reference/hooks/use-key-press.mdx b/sites/reactflow.dev/src/pages/api-reference/hooks/use-key-press.mdx
index 7db3d3c26..abb82a912 100644
--- a/sites/reactflow.dev/src/pages/api-reference/hooks/use-key-press.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/hooks/use-key-press.mdx
@@ -6,7 +6,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useKeyPress.ts';
+import { signature } from '@/references/hooks/useKeyPress.ts';
# useKeyPress
diff --git a/sites/reactflow.dev/src/pages/api-reference/hooks/use-node-id.mdx b/sites/reactflow.dev/src/pages/api-reference/hooks/use-node-id.mdx
index 1b5d28a76..c09764efd 100644
--- a/sites/reactflow.dev/src/pages/api-reference/hooks/use-node-id.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/hooks/use-node-id.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useNodeId.ts';
+import { signature } from '@/references/hooks/useNodeId.ts';
# useNodeId
diff --git a/sites/reactflow.dev/src/pages/api-reference/hooks/use-nodes-data.mdx b/sites/reactflow.dev/src/pages/api-reference/hooks/use-nodes-data.mdx
index 33dd00a15..1df018b7f 100644
--- a/sites/reactflow.dev/src/pages/api-reference/hooks/use-nodes-data.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/hooks/use-nodes-data.mdx
@@ -5,7 +5,7 @@ created_at: 2024-07-09
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useNodesData.ts';
+import { signature } from '@/references/hooks/useNodesData.ts';
# useNodesData()
diff --git a/sites/reactflow.dev/src/pages/api-reference/hooks/use-nodes-initialized.mdx b/sites/reactflow.dev/src/pages/api-reference/hooks/use-nodes-initialized.mdx
index b7cdb7a0f..7b0508e78 100644
--- a/sites/reactflow.dev/src/pages/api-reference/hooks/use-nodes-initialized.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/hooks/use-nodes-initialized.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useNodesInitialized.ts';
+import { signature } from '@/references/hooks/useNodesInitialized.ts';
# useNodesInitialized
diff --git a/sites/reactflow.dev/src/pages/api-reference/hooks/use-nodes-state.mdx b/sites/reactflow.dev/src/pages/api-reference/hooks/use-nodes-state.mdx
index 38fe61b54..943acca72 100644
--- a/sites/reactflow.dev/src/pages/api-reference/hooks/use-nodes-state.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/hooks/use-nodes-state.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useNodesState.ts';
+import { signature } from '@/references/hooks/useNodesState.ts';
# useNodesState
diff --git a/sites/reactflow.dev/src/pages/api-reference/hooks/use-nodes.mdx b/sites/reactflow.dev/src/pages/api-reference/hooks/use-nodes.mdx
index 47866ebf4..bd88776bf 100644
--- a/sites/reactflow.dev/src/pages/api-reference/hooks/use-nodes.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/hooks/use-nodes.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useNodes.ts';
+import { signature } from '@/references/hooks/useNodes.ts';
# useNodes
diff --git a/sites/reactflow.dev/src/pages/api-reference/hooks/use-on-selection-change.mdx b/sites/reactflow.dev/src/pages/api-reference/hooks/use-on-selection-change.mdx
index 43d20d5bb..106284354 100644
--- a/sites/reactflow.dev/src/pages/api-reference/hooks/use-on-selection-change.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/hooks/use-on-selection-change.mdx
@@ -8,7 +8,7 @@ description:
import { Callout } from 'nextra/components';
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useOnSelectionChange.ts';
+import { signature } from '@/references/hooks/useOnSelectionChange.ts';
# useOnSelectionChange
diff --git a/sites/reactflow.dev/src/pages/api-reference/hooks/use-on-viewport-change.mdx b/sites/reactflow.dev/src/pages/api-reference/hooks/use-on-viewport-change.mdx
index 9373d9c01..339fa39e8 100644
--- a/sites/reactflow.dev/src/pages/api-reference/hooks/use-on-viewport-change.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/hooks/use-on-viewport-change.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useOnViewportChange.ts';
+import { signature } from '@/references/hooks/useOnViewportChange.ts';
# useOnViewportChange
diff --git a/sites/reactflow.dev/src/pages/api-reference/hooks/use-react-flow.mdx b/sites/reactflow.dev/src/pages/api-reference/hooks/use-react-flow.mdx
index c84ff4785..14f5b5e4d 100644
--- a/sites/reactflow.dev/src/pages/api-reference/hooks/use-react-flow.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/hooks/use-react-flow.mdx
@@ -10,7 +10,7 @@ import {
nodesAndEdgesFields,
intersectionFields,
viewportFields,
-} from '@/page-data/reference/types/ReactFlowInstance.fields.ts';
+} from '@/references/types/ReactFlowInstance.fields.ts';
# useReactFlow
diff --git a/sites/reactflow.dev/src/pages/api-reference/hooks/use-store-api.mdx b/sites/reactflow.dev/src/pages/api-reference/hooks/use-store-api.mdx
index 634bdbad8..a5ad73a82 100644
--- a/sites/reactflow.dev/src/pages/api-reference/hooks/use-store-api.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/hooks/use-store-api.mdx
@@ -8,7 +8,7 @@ description:
import { Callout } from 'nextra/components';
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useStoreApi.ts';
+import { signature } from '@/references/hooks/useStoreApi.ts';
# useStoreApi
diff --git a/sites/reactflow.dev/src/pages/api-reference/hooks/use-store.mdx b/sites/reactflow.dev/src/pages/api-reference/hooks/use-store.mdx
index a8d364531..8ba16c0b5 100644
--- a/sites/reactflow.dev/src/pages/api-reference/hooks/use-store.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/hooks/use-store.mdx
@@ -8,7 +8,7 @@ description:
import { Callout } from 'nextra/components';
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useStore.ts';
+import { signature } from '@/references/hooks/useStore.ts';
# useStore
diff --git a/sites/reactflow.dev/src/pages/api-reference/hooks/use-update-node-internals.mdx b/sites/reactflow.dev/src/pages/api-reference/hooks/use-update-node-internals.mdx
index 3cec12f16..d2db56404 100644
--- a/sites/reactflow.dev/src/pages/api-reference/hooks/use-update-node-internals.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/hooks/use-update-node-internals.mdx
@@ -8,7 +8,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useUpdateNodeInternals.ts';
+import { signature } from '@/references/hooks/useUpdateNodeInternals.ts';
# useUpdateNodeInternals
diff --git a/sites/reactflow.dev/src/pages/api-reference/hooks/use-viewport.mdx b/sites/reactflow.dev/src/pages/api-reference/hooks/use-viewport.mdx
index dd67c6e25..5289917bd 100644
--- a/sites/reactflow.dev/src/pages/api-reference/hooks/use-viewport.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/hooks/use-viewport.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useViewport.ts';
+import { signature } from '@/references/hooks/useViewport.ts';
# useViewport
diff --git a/sites/reactflow.dev/src/pages/api-reference/react-flow.mdx b/sites/reactflow.dev/src/pages/api-reference/react-flow.mdx
index e066abcaf..7f39e6a2a 100644
--- a/sites/reactflow.dev/src/pages/api-reference/react-flow.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/react-flow.mdx
@@ -17,8 +17,8 @@ import {
connectionEventHandlerProps,
paneEventHandlerProps,
selectionEventHandlerProps,
- styleProps
-} from '@/page-data/reference/ReactFlow.props.ts';
+ styleProps,
+} from '@/references/ReactFlow.props.ts';
# <ReactFlow />
diff --git a/sites/reactflow.dev/src/pages/api-reference/types/connection-line-component-props.mdx b/sites/reactflow.dev/src/pages/api-reference/types/connection-line-component-props.mdx
index f9b24ba15..2bb1f9a0d 100644
--- a/sites/reactflow.dev/src/pages/api-reference/types/connection-line-component-props.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/types/connection-line-component-props.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { connectionLineComponentPropsFields } from '@/page-data/reference/types/ConnectionLineComponentProps.fields.ts';
+import { connectionLineComponentPropsFields } from '@/references/types/ConnectionLineComponentProps.fields.ts';
# ConnectionLineComponentProps
diff --git a/sites/reactflow.dev/src/pages/api-reference/types/connection-state.mdx b/sites/reactflow.dev/src/pages/api-reference/types/connection-state.mdx
index 3baeaaf1d..0e795bb31 100644
--- a/sites/reactflow.dev/src/pages/api-reference/types/connection-state.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/types/connection-state.mdx
@@ -4,7 +4,7 @@ description: 'Data about an ongoing connection.'
---
import { PropsTable } from '@/components/props-table';
-import { connectionStateFields } from '@/page-data/reference/types/ConnectionState.fields.ts';
+import { connectionStateFields } from '@/references/types/ConnectionState.fields.ts';
# ConnectionState
diff --git a/sites/reactflow.dev/src/pages/api-reference/types/connection.mdx b/sites/reactflow.dev/src/pages/api-reference/types/connection.mdx
index eed146703..f28b99d8e 100644
--- a/sites/reactflow.dev/src/pages/api-reference/types/connection.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/types/connection.mdx
@@ -6,7 +6,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { connectionFields } from '@/page-data/reference/types/Connection.fields.ts';
+import { connectionFields } from '@/references/types/Connection.fields.ts';
# Connection
diff --git a/sites/reactflow.dev/src/pages/api-reference/types/default-edge-options.mdx b/sites/reactflow.dev/src/pages/api-reference/types/default-edge-options.mdx
index a12530400..8cbd858ff 100644
--- a/sites/reactflow.dev/src/pages/api-reference/types/default-edge-options.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/types/default-edge-options.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { defaultEdgeOptionsFields } from '@/page-data/reference/types/DefaultEdgeOptions.fields.ts';
+import { defaultEdgeOptionsFields } from '@/references/types/DefaultEdgeOptions.fields.ts';
# DefaultEdgeOptions
diff --git a/sites/reactflow.dev/src/pages/api-reference/types/edge-change.mdx b/sites/reactflow.dev/src/pages/api-reference/types/edge-change.mdx
index 4b101415c..0197c1e46 100644
--- a/sites/reactflow.dev/src/pages/api-reference/types/edge-change.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/types/edge-change.mdx
@@ -12,7 +12,7 @@ import {
edgeRemoveChangeFields,
edgeResetChangeFields,
edgeSelectionChangeFields,
-} from '@/page-data/reference/types/EdgeChange.fields.ts';
+} from '@/references/types/EdgeChange.fields.ts';
# EdgeChange
diff --git a/sites/reactflow.dev/src/pages/api-reference/types/edge-marker.mdx b/sites/reactflow.dev/src/pages/api-reference/types/edge-marker.mdx
index 25f850ca1..c1ebdcc5e 100644
--- a/sites/reactflow.dev/src/pages/api-reference/types/edge-marker.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/types/edge-marker.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { edgeMarkerFields } from '@/page-data/reference/types/EdgeMarker.ts';
+import { edgeMarkerFields } from '@/references/types/EdgeMarker.ts';
# EdgeMarker
diff --git a/sites/reactflow.dev/src/pages/api-reference/types/edge-props.mdx b/sites/reactflow.dev/src/pages/api-reference/types/edge-props.mdx
index eb899e08d..6e61f4369 100644
--- a/sites/reactflow.dev/src/pages/api-reference/types/edge-props.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/types/edge-props.mdx
@@ -6,7 +6,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { edgePropsFields } from '@/page-data/reference/types/EdgeProps.ts';
+import { edgePropsFields } from '@/references/types/EdgeProps.ts';
# EdgeProps
diff --git a/sites/reactflow.dev/src/pages/api-reference/types/edge.mdx b/sites/reactflow.dev/src/pages/api-reference/types/edge.mdx
index cc44de270..e41c4e19c 100644
--- a/sites/reactflow.dev/src/pages/api-reference/types/edge.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/types/edge.mdx
@@ -11,7 +11,7 @@ import {
defaultEdgeFields,
smoothStepEdgeTypeFields,
bezierEdgeTypeFields,
-} from '@/page-data/reference/types/Edge.fields.ts';
+} from '@/references/types/Edge.fields.ts';
# Edge
diff --git a/sites/reactflow.dev/src/pages/api-reference/types/fit-view-options.mdx b/sites/reactflow.dev/src/pages/api-reference/types/fit-view-options.mdx
index fd1004463..b2718519a 100644
--- a/sites/reactflow.dev/src/pages/api-reference/types/fit-view-options.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/types/fit-view-options.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { fitViewOptionsFields } from '@/page-data/reference/types/FitViewOptions.ts';
+import { fitViewOptionsFields } from '@/references/types/FitViewOptions.ts';
# FitViewOptions
diff --git a/sites/reactflow.dev/src/pages/api-reference/types/handle-connection.mdx b/sites/reactflow.dev/src/pages/api-reference/types/handle-connection.mdx
index 47d10ed74..e9319e19f 100644
--- a/sites/reactflow.dev/src/pages/api-reference/types/handle-connection.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/types/handle-connection.mdx
@@ -4,7 +4,7 @@ description: 'The HandleConnection type is a Connection that includes the edgeId
---
import { PropsTable } from '@/components/props-table';
-import { connectionFields } from '@/page-data/reference/types/HandleConnection.fields.ts';
+import { connectionFields } from '@/references/types/HandleConnection.fields.ts';
# HandleConnection
diff --git a/sites/reactflow.dev/src/pages/api-reference/types/handle.mdx b/sites/reactflow.dev/src/pages/api-reference/types/handle.mdx
index 053942511..6e2a69f5d 100644
--- a/sites/reactflow.dev/src/pages/api-reference/types/handle.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/types/handle.mdx
@@ -4,7 +4,7 @@ description: 'Handle attributes like id, position, and type.'
---
import { PropsTable } from '@/components/props-table';
-import { handleFields } from '@/page-data/reference/types/Handle.fields.ts';
+import { handleFields } from '@/references/types/Handle.fields.ts';
# Handle
diff --git a/sites/reactflow.dev/src/pages/api-reference/types/internal-node.mdx b/sites/reactflow.dev/src/pages/api-reference/types/internal-node.mdx
index 32394b822..fdf82b279 100644
--- a/sites/reactflow.dev/src/pages/api-reference/types/internal-node.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/types/internal-node.mdx
@@ -7,7 +7,7 @@ description:
import { Callout } from 'nextra/components';
import { PropsTable } from '@/components/props-table';
-import { internalNodeFields } from '@/page-data/reference/types/InternalNode.fields.ts';
+import { internalNodeFields } from '@/references/types/InternalNode.fields.ts';
# InternalNode
@@ -18,19 +18,20 @@ type but is extended with some additional properties used internall by React
Flow. Some functions and callbacks that return nodes may return an `InternalNode`.
```ts
-export type InternalNodeBase
= NodeType & {
- measured: {
- width?: number;
- height?: number;
+export type InternalNodeBase =
+ NodeType & {
+ measured: {
+ width?: number;
+ height?: number;
+ };
+ internals: {
+ positionAbsolute: XYPosition;
+ z: number;
+ userNode: NodeType;
+ handleBounds?: NodeHandleBounds;
+ bounds?: NodeBounds;
+ };
};
- internals: {
- positionAbsolute: XYPosition;
- z: number;
- userNode: NodeType;
- handleBounds?: NodeHandleBounds;
- bounds?: NodeBounds;
- };
-};
```
## Fields
diff --git a/sites/reactflow.dev/src/pages/api-reference/types/mini-map-node-props.mdx b/sites/reactflow.dev/src/pages/api-reference/types/mini-map-node-props.mdx
index 26075662f..48cbc850f 100644
--- a/sites/reactflow.dev/src/pages/api-reference/types/mini-map-node-props.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/types/mini-map-node-props.mdx
@@ -4,7 +4,7 @@ description: ''
---
import { PropsTable } from '@/components/props-table';
-import { minimapNodePropsFields } from '@/page-data/reference/types/MiniMapNodeProps.fields.ts';
+import { minimapNodePropsFields } from '@/references/types/MiniMapNodeProps.fields.ts';
# MiniMapNodeProps
diff --git a/sites/reactflow.dev/src/pages/api-reference/types/node-change.mdx b/sites/reactflow.dev/src/pages/api-reference/types/node-change.mdx
index a4982118d..930130aa4 100644
--- a/sites/reactflow.dev/src/pages/api-reference/types/node-change.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/types/node-change.mdx
@@ -14,7 +14,7 @@ import {
nodeRemoveChangeFields,
nodeAddChangeFields,
nodeReplaceChangeFields,
-} from '@/page-data/reference/types/NodeChange.fields.ts';
+} from '@/references/types/NodeChange.fields.ts';
# NodeChange
diff --git a/sites/reactflow.dev/src/pages/api-reference/types/node-props.mdx b/sites/reactflow.dev/src/pages/api-reference/types/node-props.mdx
index a0f6b259d..d936c730b 100644
--- a/sites/reactflow.dev/src/pages/api-reference/types/node-props.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/types/node-props.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { nodePropsFields } from '@/page-data/reference/types/NodeProps.fields.ts';
+import { nodePropsFields } from '@/references/types/NodeProps.fields.ts';
# NodeProps<T>
diff --git a/sites/reactflow.dev/src/pages/api-reference/types/node.mdx b/sites/reactflow.dev/src/pages/api-reference/types/node.mdx
index 9baee70c3..50700a40e 100644
--- a/sites/reactflow.dev/src/pages/api-reference/types/node.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/types/node.mdx
@@ -8,7 +8,7 @@ description:
import { Callout } from 'nextra/components';
import { PropsTable } from '@/components/props-table';
-import { nodeFields } from '@/page-data/reference/types/Node.fields.ts';
+import { nodeFields } from '@/references/types/Node.fields.ts';
# Node
diff --git a/sites/reactflow.dev/src/pages/api-reference/types/on-edges-change.mdx b/sites/reactflow.dev/src/pages/api-reference/types/on-edges-change.mdx
index d99daa1d6..a74236b64 100644
--- a/sites/reactflow.dev/src/pages/api-reference/types/on-edges-change.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/types/on-edges-change.mdx
@@ -4,7 +4,7 @@ description: ''
---
import { PropsTable } from '@/components/props-table';
-import { fields } from '@/page-data/reference/types/OnEdgesChange.ts';
+import { fields } from '@/references/types/OnEdgesChange.ts';
# OnEdgesChange
diff --git a/sites/reactflow.dev/src/pages/api-reference/types/on-nodes-change.mdx b/sites/reactflow.dev/src/pages/api-reference/types/on-nodes-change.mdx
index 9659523ec..9ade62e4a 100644
--- a/sites/reactflow.dev/src/pages/api-reference/types/on-nodes-change.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/types/on-nodes-change.mdx
@@ -4,7 +4,7 @@ description: ''
---
import { PropsTable } from '@/components/props-table';
-import { fields } from '@/page-data/reference/types/OnNodesChange.ts';
+import { fields } from '@/references/types/OnNodesChange.ts';
# OnNodesChange
diff --git a/sites/reactflow.dev/src/pages/api-reference/types/react-flow-instance.mdx b/sites/reactflow.dev/src/pages/api-reference/types/react-flow-instance.mdx
index b1af5e362..e7878d901 100644
--- a/sites/reactflow.dev/src/pages/api-reference/types/react-flow-instance.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/types/react-flow-instance.mdx
@@ -11,7 +11,7 @@ import {
nodesAndEdgesFields,
intersectionFields,
viewportFields,
-} from '@/page-data/reference/types/ReactFlowInstance.fields.ts';
+} from '@/references/types/ReactFlowInstance.fields.ts';
# ReactFlowInstance
diff --git a/sites/reactflow.dev/src/pages/api-reference/types/react-flow-json-object.mdx b/sites/reactflow.dev/src/pages/api-reference/types/react-flow-json-object.mdx
index e2e8ecf8e..993f3796c 100644
--- a/sites/reactflow.dev/src/pages/api-reference/types/react-flow-json-object.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/types/react-flow-json-object.mdx
@@ -6,7 +6,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { reactFlowJsonObjectFields } from '@/page-data/reference/types/ReactFlowJsonObject.fields.ts';
+import { reactFlowJsonObjectFields } from '@/references/types/ReactFlowJsonObject.fields.ts';
# ReactFlowJsonObject
diff --git a/sites/reactflow.dev/src/pages/api-reference/types/resize-params.mdx b/sites/reactflow.dev/src/pages/api-reference/types/resize-params.mdx
index 2c75c4741..ef64483a6 100644
--- a/sites/reactflow.dev/src/pages/api-reference/types/resize-params.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/types/resize-params.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { resizeParamsFields } from '@/page-data/reference/types/ResizeParams.ts';
+import { resizeParamsFields } from '@/references/types/ResizeParams.ts';
# ResizeParams
diff --git a/sites/reactflow.dev/src/pages/api-reference/types/viewport.mdx b/sites/reactflow.dev/src/pages/api-reference/types/viewport.mdx
index 16a4181e4..1c9411419 100644
--- a/sites/reactflow.dev/src/pages/api-reference/types/viewport.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/types/viewport.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { viewportFields } from '@/page-data/reference/types/Viewport.fields.ts';
+import { viewportFields } from '@/references/types/Viewport.fields.ts';
# Viewport
diff --git a/sites/reactflow.dev/src/pages/api-reference/utils/add-edge.mdx b/sites/reactflow.dev/src/pages/api-reference/utils/add-edge.mdx
index 21ad39000..168aa57e8 100644
--- a/sites/reactflow.dev/src/pages/api-reference/utils/add-edge.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/utils/add-edge.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/addEdge.ts';
+import { signature } from '@/references/utils/addEdge.ts';
# addEdge()
diff --git a/sites/reactflow.dev/src/pages/api-reference/utils/apply-edge-changes.mdx b/sites/reactflow.dev/src/pages/api-reference/utils/apply-edge-changes.mdx
index 21628e4bd..c7fc096c3 100644
--- a/sites/reactflow.dev/src/pages/api-reference/utils/apply-edge-changes.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/utils/apply-edge-changes.mdx
@@ -8,7 +8,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/applyEdgeChanges.ts';
+import { signature } from '@/references/utils/applyEdgeChanges.ts';
# applyEdgeChanges()
diff --git a/sites/reactflow.dev/src/pages/api-reference/utils/apply-node-changes.mdx b/sites/reactflow.dev/src/pages/api-reference/utils/apply-node-changes.mdx
index 81c6d78a4..5093c9b29 100644
--- a/sites/reactflow.dev/src/pages/api-reference/utils/apply-node-changes.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/utils/apply-node-changes.mdx
@@ -8,7 +8,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/applyNodeChanges.ts';
+import { signature } from '@/references/utils/applyNodeChanges.ts';
# applyNodeChanges()
diff --git a/sites/reactflow.dev/src/pages/api-reference/utils/get-bezier-path.mdx b/sites/reactflow.dev/src/pages/api-reference/utils/get-bezier-path.mdx
index 240260b5f..d5cd7eda2 100644
--- a/sites/reactflow.dev/src/pages/api-reference/utils/get-bezier-path.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/utils/get-bezier-path.mdx
@@ -6,7 +6,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/getBezierPath.ts';
+import { signature } from '@/references/utils/getBezierPath.ts';
# getBezierPath()
diff --git a/sites/reactflow.dev/src/pages/api-reference/utils/get-connected-edges.mdx b/sites/reactflow.dev/src/pages/api-reference/utils/get-connected-edges.mdx
index 4a8909dc5..32b185ff1 100644
--- a/sites/reactflow.dev/src/pages/api-reference/utils/get-connected-edges.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/utils/get-connected-edges.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/getConnectedEdges.ts';
+import { signature } from '@/references/utils/getConnectedEdges.ts';
# getConnectedEdges()
@@ -25,7 +25,7 @@ const nodes = [
];
const edges = [
{ id: 'a->c', source: 'a', target: 'c' },
- { id: 'c->d', source: 'c', target: 'd' }
+ { id: 'c->d', source: 'c', target: 'd' },
];
const connectedEdges = getConnectedEdges(nodes, edges);
diff --git a/sites/reactflow.dev/src/pages/api-reference/utils/get-incomers.mdx b/sites/reactflow.dev/src/pages/api-reference/utils/get-incomers.mdx
index 33f41d3d1..b43bc7d07 100644
--- a/sites/reactflow.dev/src/pages/api-reference/utils/get-incomers.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/utils/get-incomers.mdx
@@ -6,7 +6,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/getIncomers.ts';
+import { signature } from '@/references/utils/getIncomers.ts';
# getIncomers()
diff --git a/sites/reactflow.dev/src/pages/api-reference/utils/get-nodes-bounds.mdx b/sites/reactflow.dev/src/pages/api-reference/utils/get-nodes-bounds.mdx
index 418dec552..f29b7c1b5 100644
--- a/sites/reactflow.dev/src/pages/api-reference/utils/get-nodes-bounds.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/utils/get-nodes-bounds.mdx
@@ -8,7 +8,7 @@ description:
import { Callout } from 'nextra/components';
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/getRectOfNodes.ts';
+import { signature } from '@/references/utils/getRectOfNodes.ts';
# getNodesBounds()
diff --git a/sites/reactflow.dev/src/pages/api-reference/utils/get-outgoers.mdx b/sites/reactflow.dev/src/pages/api-reference/utils/get-outgoers.mdx
index 85fa3b0b2..d855a162e 100644
--- a/sites/reactflow.dev/src/pages/api-reference/utils/get-outgoers.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/utils/get-outgoers.mdx
@@ -6,7 +6,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/getOutgoers.ts';
+import { signature } from '@/references/utils/getOutgoers.ts';
# getOutgoers()
diff --git a/sites/reactflow.dev/src/pages/api-reference/utils/get-simple-bezier-path.mdx b/sites/reactflow.dev/src/pages/api-reference/utils/get-simple-bezier-path.mdx
index ce5a639db..de218b14f 100644
--- a/sites/reactflow.dev/src/pages/api-reference/utils/get-simple-bezier-path.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/utils/get-simple-bezier-path.mdx
@@ -6,7 +6,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/getSimpleBezierPath.ts';
+import { signature } from '@/references/utils/getSimpleBezierPath.ts';
# getSimpleBezierPath()
diff --git a/sites/reactflow.dev/src/pages/api-reference/utils/get-smooth-step-path.mdx b/sites/reactflow.dev/src/pages/api-reference/utils/get-smooth-step-path.mdx
index 9f0c0748c..18c66eb52 100644
--- a/sites/reactflow.dev/src/pages/api-reference/utils/get-smooth-step-path.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/utils/get-smooth-step-path.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/getSmoothStepPath.ts';
+import { signature } from '@/references/utils/getSmoothStepPath.ts';
# getSmoothStepPath()
diff --git a/sites/reactflow.dev/src/pages/api-reference/utils/get-straight-path.mdx b/sites/reactflow.dev/src/pages/api-reference/utils/get-straight-path.mdx
index 5aca91263..bc3b6fc3a 100644
--- a/sites/reactflow.dev/src/pages/api-reference/utils/get-straight-path.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/utils/get-straight-path.mdx
@@ -4,7 +4,7 @@ description: 'Calculates the straight line path between two points.'
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/getStraightPath.ts';
+import { signature } from '@/references/utils/getStraightPath.ts';
# getStraightPath()
diff --git a/sites/reactflow.dev/src/pages/api-reference/utils/get-transform-for-bounds.mdx b/sites/reactflow.dev/src/pages/api-reference/utils/get-transform-for-bounds.mdx
index 02f3ee01c..d614cb876 100644
--- a/sites/reactflow.dev/src/pages/api-reference/utils/get-transform-for-bounds.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/utils/get-transform-for-bounds.mdx
@@ -9,7 +9,7 @@ description:
import { Callout } from 'nextra/components';
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/getTransformForBounds.ts';
+import { signature } from '@/references/utils/getTransformForBounds.ts';
# getTransformForBounds()
diff --git a/sites/reactflow.dev/src/pages/api-reference/utils/get-viewport-for-bounds.mdx b/sites/reactflow.dev/src/pages/api-reference/utils/get-viewport-for-bounds.mdx
index b63a65d5a..2448c8781 100644
--- a/sites/reactflow.dev/src/pages/api-reference/utils/get-viewport-for-bounds.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/utils/get-viewport-for-bounds.mdx
@@ -8,7 +8,7 @@ description: 'This util returns the viewport for the given bounds.
import { Callout } from 'nextra/components';
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/getViewportForBounds.ts';
+import { signature } from '@/references/utils/getViewportForBounds.ts';
# getViewportForBounds()
diff --git a/sites/reactflow.dev/src/pages/api-reference/utils/is-edge.mdx b/sites/reactflow.dev/src/pages/api-reference/utils/is-edge.mdx
index 46215208a..eb26371eb 100644
--- a/sites/reactflow.dev/src/pages/api-reference/utils/is-edge.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/utils/is-edge.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/isEdge.ts';
+import { signature } from '@/references/utils/isEdge.ts';
# isEdge()
diff --git a/sites/reactflow.dev/src/pages/api-reference/utils/is-node.mdx b/sites/reactflow.dev/src/pages/api-reference/utils/is-node.mdx
index d62dd50ab..2f550e92b 100644
--- a/sites/reactflow.dev/src/pages/api-reference/utils/is-node.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/utils/is-node.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/isNode.ts';
+import { signature } from '@/references/utils/isNode.ts';
# isNode()
diff --git a/sites/reactflow.dev/src/pages/api-reference/utils/reconnect-edge.mdx b/sites/reactflow.dev/src/pages/api-reference/utils/reconnect-edge.mdx
index 4017f91f1..bfdcb9c9b 100644
--- a/sites/reactflow.dev/src/pages/api-reference/utils/reconnect-edge.mdx
+++ b/sites/reactflow.dev/src/pages/api-reference/utils/reconnect-edge.mdx
@@ -8,7 +8,7 @@ description:
import { Callout } from 'nextra/components';
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/reconnectEdge.ts';
+import { signature } from '@/references/utils/reconnectEdge.ts';
# reconnectEdge()
diff --git a/sites/reactflow.dev/src/pages/components/_meta.tsx b/sites/reactflow.dev/src/pages/components/_meta.tsx
new file mode 100644
index 000000000..a58d826cd
--- /dev/null
+++ b/sites/reactflow.dev/src/pages/components/_meta.tsx
@@ -0,0 +1,23 @@
+export default {
+ index: {
+ title: 'Introduction',
+ theme: {
+ breadcrumb: false,
+ toc: false,
+ },
+ },
+ nodes: 'Nodes',
+ edges: 'Edges',
+ controls: 'Controls',
+ handles: 'Handles',
+ misc: 'Misc',
+ 'separator-1': {
+ type: 'separator',
+ title: ' ',
+ },
+ 'request-component': {
+ title: 'Request a Component',
+ href: 'https://github.com/xyflow/web/discussions/new?category=ui-component-requests',
+ newWindow: true,
+ },
+};
diff --git a/sites/reactflow.dev/src/pages/components/controls/_meta.tsx b/sites/reactflow.dev/src/pages/components/controls/_meta.tsx
new file mode 100644
index 000000000..1a1252f8b
--- /dev/null
+++ b/sites/reactflow.dev/src/pages/components/controls/_meta.tsx
@@ -0,0 +1,4 @@
+export default {
+ 'zoom-slider': 'Zoom Slider',
+ 'zoom-select': 'Zoom Select',
+};
diff --git a/sites/reactflow.dev/src/pages/components/controls/zoom-select.mdx b/sites/reactflow.dev/src/pages/components/controls/zoom-select.mdx
new file mode 100644
index 000000000..913619830
--- /dev/null
+++ b/sites/reactflow.dev/src/pages/components/controls/zoom-select.mdx
@@ -0,0 +1,15 @@
+---
+title: Zoom Select
+description: A zoom control that lets you zoom in and out seamlessly using a select dropdown.
+---
+
+import UiComponentViewer from '@/components/ui-component-viewer';
+import fetchShadcnComponent from '@/utils/get-static-props/fetch-shadcn-component';
+
+export const getStaticProps = fetchShadcnComponent('zoom-select');
+
+# Zoom Select
+
+A zoom control that lets you zoom in and out seamlessly using a select dropdown.
+
+
+
+ ),
+} satisfies Record;
+```
+
+The keys of the `shapes` record are valid values for the `shape` field of the
+edge's data:
+
+```ts
+const initialEdges = [
+ {
+ // ...
+ type: "animatedSvgEdge",
+ data: {
+ duration: 2,
+ shape: "box",
+ },
+ } satisfies AnimatedSvgEdge,
+];
+```
+
+
+ If you want to render regular HTML elements, be sure to wrap them in an SVG
+ `
diff --git a/sites/reactflow.dev/src/pages/components/edges/button-edge.mdx b/sites/reactflow.dev/src/pages/components/edges/button-edge.mdx
new file mode 100644
index 000000000..15426d3fe
--- /dev/null
+++ b/sites/reactflow.dev/src/pages/components/edges/button-edge.mdx
@@ -0,0 +1,15 @@
+---
+title: Button Edge
+description: A custom edge component with a button
+---
+
+import UiComponentViewer from '@/components/ui-component-viewer';
+import fetchShadcnComponent from '@/utils/get-static-props/fetch-shadcn-component';
+
+export const getStaticProps = fetchShadcnComponent('button-edge');
+
+# Button Edge
+
+An edge with a button that can be used to trigger a custom action.
+
+
@@ -21,8 +25,7 @@ element. This example creates a custom edge that animates a circle along the edg
path.
A Connection Line is what you see when you click and drag out from a handle. It represents a possible edge and can snap to valid handles in close proximity.
You can implement your own Connection Line by passing a React component rendering the line. You can find the passed props in the [custom connection line docs](/api-reference/types/connection-line-component-props).
React Flow comes with four different edge types - `default` (bezier), `straight`, `step` and `smoothstep`. It's also possible to create a [custom edge](/api-reference/types/edge-props), if you need special edge routing or controls at the edge. In this example we are demonstrating how to implement an edge with a button, a bi-directional edge, a self connecting edge. In all examples we are using the [BaseEdge](/api-reference/components/base-edge) component as a helper.
diff --git a/sites/reactflow.dev/src/pages/examples/edges/delete-edge-on-drop.mdx b/sites/reactflow.dev/src/pages/examples/edges/delete-edge-on-drop.mdx
index ba9604232..4dbc6fe8b 100644
--- a/sites/reactflow.dev/src/pages/examples/edges/delete-edge-on-drop.mdx
+++ b/sites/reactflow.dev/src/pages/examples/edges/delete-edge-on-drop.mdx
@@ -4,14 +4,17 @@ description: Delete an edge when it doesn't find a handle
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/edges/delete-edge-on-drop']);
+
In this example we are showing how to delete an edge by using the [`onReconnect`, `onReconnectStart` and `onReconnectEnd` handlers](/api-reference/react-flow#onReconnect). If you drag an existing edge and drop it on the pane, it gets deleted from the `edges` array.
If you want to escape SVG world within an edge, you can use the [`
You can choose different kinds of [edge types](/api-reference/react-flow#edgeTypes) in React Flow: `default` (bezier), `straight`, `step` and `smoothstep`. As you can see, you can define a type for each edge and mix them in one graph.
-
diff --git a/sites/reactflow.dev/src/pages/examples/edges/editable-edge.mdx b/sites/reactflow.dev/src/pages/examples/edges/editable-edge.mdx
index c4ca22ba6..c5b5a1f48 100644
--- a/sites/reactflow.dev/src/pages/examples/edges/editable-edge.mdx
+++ b/sites/reactflow.dev/src/pages/examples/edges/editable-edge.mdx
@@ -5,7 +5,7 @@ is_pro_example: true
---
import ProExampleViewer from '@/components/pro-example-viewer';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
This example explains how to implement a routable and editable edge with draggable control points to change the path of an edge. It also includes a custom connection line that can be used to draw a freeform edge. For this you need to press "Space" while doing a connection.
diff --git a/sites/reactflow.dev/src/pages/examples/edges/floating-edges.mdx b/sites/reactflow.dev/src/pages/examples/edges/floating-edges.mdx
index 60d21692a..bf84e52de 100644
--- a/sites/reactflow.dev/src/pages/examples/edges/floating-edges.mdx
+++ b/sites/reactflow.dev/src/pages/examples/edges/floating-edges.mdx
@@ -4,15 +4,15 @@ description: Instead of having the handle at a fixed point, let it move with the
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/edges/floating-edges']);
+
This is an example implementation for floating edges. The source and target position of the edges are getting calculated dynamically. You can find the implementation details in the utils.js file.
-
diff --git a/sites/reactflow.dev/src/pages/examples/edges/markers.mdx b/sites/reactflow.dev/src/pages/examples/edges/markers.mdx
index 6a5866105..b758d530e 100644
--- a/sites/reactflow.dev/src/pages/examples/edges/markers.mdx
+++ b/sites/reactflow.dev/src/pages/examples/edges/markers.mdx
@@ -4,15 +4,15 @@ description: Make your edges into arrows, add custom icons, or SVGs
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/edges/markers']);
+
React Flow has built-in support for different marker types for your edges. It's possible to add your own [SVG markers](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker), too.
-
diff --git a/sites/reactflow.dev/src/pages/examples/edges/multi-connection-line.mdx b/sites/reactflow.dev/src/pages/examples/edges/multi-connection-line.mdx
index e62bf404b..72e760f3e 100644
--- a/sites/reactflow.dev/src/pages/examples/edges/multi-connection-line.mdx
+++ b/sites/reactflow.dev/src/pages/examples/edges/multi-connection-line.mdx
@@ -5,7 +5,11 @@ description: Draw multiple connection lines at once from any selected nodes.
import { Callout } from 'nextra/components';
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/edges/multi-connection-line']);
+
@@ -20,8 +24,7 @@ once.
An edge is reconnectable by dragging it to another handle if you are using the
@@ -13,11 +17,7 @@ called after the edge gets dropped to a new handle. You can use the
[`reconnectEdge`](/api-reference/utils/reconnect-edge) helper function to update your
edges state accordingly.
-
This is a simplified version of the [Floating Edges](/examples/edges/floating-edges) example. It's not as flexible as the floating edges example, but the edges stick to the top, right, bottom or left side of the nodes. You can find the implementation details in the utils.js file.
In React Flow, almost everything is built around the concepts of nodes and edges.
@@ -25,11 +29,7 @@ connection at which point the ghost node is removed!
connection line in an empty space to create a temporary edge!
-
This example shows how to build a collaborative graph for multiple users with React Flow and [yjs](https://github.com/yjs/yjs). The changes made in this graph are visible for all users on this page. To see it working, you can [open this page in another tab](/examples/interaction/collaborative) or on another device or browser.
diff --git a/sites/reactflow.dev/src/pages/examples/interaction/computing-flows.mdx b/sites/reactflow.dev/src/pages/examples/interaction/computing-flows.mdx
index 265c37958..fc390ecd6 100644
--- a/sites/reactflow.dev/src/pages/examples/interaction/computing-flows.mdx
+++ b/sites/reactflow.dev/src/pages/examples/interaction/computing-flows.mdx
@@ -4,14 +4,17 @@ description: This examples demonstrates how to use the helpers to handle data fl
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/interaction/computing-flows']);
+
This example shows how to use the computing flow helpers `useNodesData`, `useHandleConnections` and `updateNode`. You can find more detailed information about this in the [computing flows guide](/learn/advanced-use/computing-flows)
React Flow emits different events during the connection process that you can use
@@ -15,8 +19,7 @@ to update your UI or your flow in different ways. The example below demonstrates
which events are fired and when.
The [onNodeContextMenu](/api-reference/react-flow#event-onnodecontextmenu?) event can be used to show a custom menu when right-clicking a node. This example shows a simple menu with buttons to duplicate or delete the clicked node.
-
diff --git a/sites/reactflow.dev/src/pages/examples/interaction/contextual-zoom.mdx b/sites/reactflow.dev/src/pages/examples/interaction/contextual-zoom.mdx
index 4f82adea9..44eafcf83 100644
--- a/sites/reactflow.dev/src/pages/examples/interaction/contextual-zoom.mdx
+++ b/sites/reactflow.dev/src/pages/examples/interaction/contextual-zoom.mdx
@@ -4,15 +4,18 @@ description: Only display the content of a node when you are zoomed in close eno
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/interaction/contextual-zoom']);
+
This example shows how the current zoom level can be used by a node to decide which content to show.
We are using selecting the zoom via the [`useStore` hook](/api-reference/hooks/use-store) to update our custom node whenever the zoom changes.
This example demonstrates how to copy and paste nodes and edges within a React Flow graph. Try using Shift + click + drag to select multiple nodes to copy.
diff --git a/sites/reactflow.dev/src/pages/examples/interaction/drag-and-drop.mdx b/sites/reactflow.dev/src/pages/examples/interaction/drag-and-drop.mdx
index d360c29a8..983e562c4 100644
--- a/sites/reactflow.dev/src/pages/examples/interaction/drag-and-drop.mdx
+++ b/sites/reactflow.dev/src/pages/examples/interaction/drag-and-drop.mdx
@@ -4,14 +4,17 @@ description: Drag and drop outside of the React Flow pane with native HTML Drag
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/interaction/drag-and-drop']);
+
A drag and drop user interface is very common for node-based workflow editors. The drag and drop behaviour outside of the React Flow pane is not built in but can be implemented with the native [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) (used in this example) or a third party library like [react-draggable](https://github.com/react-grid-layout/react-draggable).
This example demonstrates how to display helper lines in a React Flow graph while a node is being dragged.
diff --git a/sites/reactflow.dev/src/pages/examples/interaction/interaction-props.mdx b/sites/reactflow.dev/src/pages/examples/interaction/interaction-props.mdx
index 8add657a2..79a5585d9 100644
--- a/sites/reactflow.dev/src/pages/examples/interaction/interaction-props.mdx
+++ b/sites/reactflow.dev/src/pages/examples/interaction/interaction-props.mdx
@@ -4,14 +4,17 @@ description: The most popular props used for interactivity of a diagram
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/interaction/interaction-props']);
+
This example shows the different props like `nodesDraggable`, `zoomOnScroll` or `panOnDrag` that control the interactivity of a diagram. You can find a list with all props that can be used to manage the interactivity in the [interaction props section](/api-reference/react-flow#interaction).
@@ -15,8 +19,7 @@ the [`getOutgoers`](/api-reference/utils/get-outgoers) util to check if a new
connection would cause a cycle in the flow.
If you want to save and restore a flow you can use the [`toObject` function](/api-reference/types/react-flow-instance#to-object) of the React Flow instance or your local nodes and edges state.
In this example you can move nodes around, add ones and save the diagram. Then reload the page and click restore to restore your diagram.
You can connect nodes on a touch device by tapping two handles in a row. In this example we increased the size of the handles so that they are better tappable. You can disable this behavoir by setting the [`connectOnClick` prop](/api-reference/react-flow#interaction) to `false`.
-
diff --git a/sites/reactflow.dev/src/pages/examples/interaction/undo-redo.mdx b/sites/reactflow.dev/src/pages/examples/interaction/undo-redo.mdx
index 478d3371c..21eb76c6f 100644
--- a/sites/reactflow.dev/src/pages/examples/interaction/undo-redo.mdx
+++ b/sites/reactflow.dev/src/pages/examples/interaction/undo-redo.mdx
@@ -5,7 +5,7 @@ is_pro_example: true
---
import ProExampleViewer from '@/components/pro-example-viewer';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
This example shows how to implement a simple undo and redo functionality for a React Flow graph.
diff --git a/sites/reactflow.dev/src/pages/examples/interaction/validation.mdx b/sites/reactflow.dev/src/pages/examples/interaction/validation.mdx
index 9bdadfa9d..99b828fcb 100644
--- a/sites/reactflow.dev/src/pages/examples/interaction/validation.mdx
+++ b/sites/reactflow.dev/src/pages/examples/interaction/validation.mdx
@@ -4,15 +4,15 @@ description: Check if a new connection is valid and should be added
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/interaction/validation']);
+
Custom nodes need to have at least one [`Handle` component](/api-reference/components/handle) to be connectable. You can pass a validation function [`isValidConnection`](/api-reference/react-flow#isvalidconnection-1) to the ReactFlow component in order to check if a new connection is valid and should be added.
-
diff --git a/sites/reactflow.dev/src/pages/examples/interaction/zoom-transitions.mdx b/sites/reactflow.dev/src/pages/examples/interaction/zoom-transitions.mdx
index ff6022b2b..5feec18b9 100644
--- a/sites/reactflow.dev/src/pages/examples/interaction/zoom-transitions.mdx
+++ b/sites/reactflow.dev/src/pages/examples/interaction/zoom-transitions.mdx
@@ -4,14 +4,17 @@ description: Change the animation speed when the viewport is zoomed or moved
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/interaction/zoom-transitions']);
+
Smooth transitions from one viewport to another are built-in. You can pass a `duration` option parameter to define the animation duration for every function that alters the viewport ([`zoomIn`, `zoomOut`, `zoomTo`, `setViewport`, `fitView`, `setCenter`, `fitBounds`](/api-reference/types/react-flow-instance#viewport)).
This example shows how you can automatically arrange nodes after adding items
diff --git a/sites/reactflow.dev/src/pages/examples/layout/dagre.mdx b/sites/reactflow.dev/src/pages/examples/layout/dagre.mdx
index 687eb717a..668503374 100644
--- a/sites/reactflow.dev/src/pages/examples/layout/dagre.mdx
+++ b/sites/reactflow.dev/src/pages/examples/layout/dagre.mdx
@@ -4,16 +4,16 @@ description: Integrate dagre js with React Flow to create simple tree layouts
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/layout/dagre']);
+
This example shows how you can integrate [dagre.js](https://github.com/dagrejs/dagre) with React Flow to create simple tree layouts. Good alternatives to dagre are [d3-hierarchy](https://github.com/d3/d3-hierarchy) or [elkjs](https://github.com/kieler/elkjs) if you are looking for a more advanced layouting library.
-
This example demonstrates how to configure [elkjs](https://github.com/kieler/elkjs) to use specific handles (called 'ports' in elkjs). This is helpful to reduce edge crossings and have more control over the layout. The important things to configure are unique ids for the handles / ports, the actual ports for elkjs with a correct side property and `'org.eclipse.elk.portConstraints' : 'FIXED_ORDER'` for all nodes.
Like our [dagre example](/examples/layout/dagre), this example shows how you can integrate [elkjs](https://github.com/kieler/elkjs) with React Flow for more advanced tree layouts. The code for this example builds a similar tree to the dagre example, but you can look at the reference [here](https://www.eclipse.org/elk/reference.html) to see what you can configure (hint: it's a lot).
-
diff --git a/sites/reactflow.dev/src/pages/examples/layout/entitree-flex.mdx b/sites/reactflow.dev/src/pages/examples/layout/entitree-flex.mdx
index 8a4f14ab7..c0c6fa29f 100644
--- a/sites/reactflow.dev/src/pages/examples/layout/entitree-flex.mdx
+++ b/sites/reactflow.dev/src/pages/examples/layout/entitree-flex.mdx
@@ -4,15 +4,15 @@ description: Create tree layouts that have sibling nodes and support nodes with
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/layout/entitree-flex']);
+
This example shows how you can integrate [entitree-flex](https://github.com/codeledge/entitree-flex) with React Flow to create tree layouts that can have sibling nodes and support nodes with different dimensions.
-
diff --git a/sites/reactflow.dev/src/pages/examples/layout/expand-collapse.mdx b/sites/reactflow.dev/src/pages/examples/layout/expand-collapse.mdx
index 562026fb0..514948a46 100644
--- a/sites/reactflow.dev/src/pages/examples/layout/expand-collapse.mdx
+++ b/sites/reactflow.dev/src/pages/examples/layout/expand-collapse.mdx
@@ -5,7 +5,7 @@ is_pro_example: true
---
import ProExampleViewer from '@/components/pro-example-viewer';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
Interactive example to demonstrate how you can navigate hierarchical data structures. You can click on a node to toggle its child nodes and animate the layout changes.
diff --git a/sites/reactflow.dev/src/pages/examples/layout/force-layout.mdx b/sites/reactflow.dev/src/pages/examples/layout/force-layout.mdx
index d5b60a671..37e9e8f39 100644
--- a/sites/reactflow.dev/src/pages/examples/layout/force-layout.mdx
+++ b/sites/reactflow.dev/src/pages/examples/layout/force-layout.mdx
@@ -5,7 +5,7 @@ is_pro_example: true
---
import ProExampleViewer from '@/components/pro-example-viewer';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
This example shows how you can integrate a [d3 force layout](https://github.com/d3/d3-force) with React Flow. You can customize the layout by setting the strength of the force and the distance between the nodes.
diff --git a/sites/reactflow.dev/src/pages/examples/layout/horizontal.mdx b/sites/reactflow.dev/src/pages/examples/layout/horizontal.mdx
index ba8b558aa..fe29b5bc1 100644
--- a/sites/reactflow.dev/src/pages/examples/layout/horizontal.mdx
+++ b/sites/reactflow.dev/src/pages/examples/layout/horizontal.mdx
@@ -4,16 +4,16 @@ description: A diagram that flows from left to right
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/layout/horizontal']);
+
A diagram can go from left to right or from top to bottom, but you can also create mixed ones.
For controlling the direction of a diagram you can adjust the handle positions of a node with the [`sourcePosition` and `targetPosition`](/api-reference/types/node) props.
-
diff --git a/sites/reactflow.dev/src/pages/examples/layout/sub-flows.mdx b/sites/reactflow.dev/src/pages/examples/layout/sub-flows.mdx
index e7dc0ca22..efc7b17c6 100644
--- a/sites/reactflow.dev/src/pages/examples/layout/sub-flows.mdx
+++ b/sites/reactflow.dev/src/pages/examples/layout/sub-flows.mdx
@@ -4,15 +4,15 @@ description: Render nested graphs and group nodes, and configure the behavior of
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/layout/sub-flows']);
+
React Flow supports rendering nested graphs and grouping of nodes. You can configure the behaviour of the child nodes using `extent: 'parent'` and render group elements without handles by passing `type: 'group'` to the node configuration. See our [Sub Flow guide](/learn/layouting/sub-flows) for more information.
-
diff --git a/sites/reactflow.dev/src/pages/examples/layout/workflow-builder.mdx b/sites/reactflow.dev/src/pages/examples/layout/workflow-builder.mdx
index 015e9e623..1f0fe423a 100644
--- a/sites/reactflow.dev/src/pages/examples/layout/workflow-builder.mdx
+++ b/sites/reactflow.dev/src/pages/examples/layout/workflow-builder.mdx
@@ -5,7 +5,7 @@ is_pro_example: true
---
import ProExampleViewer from '@/components/pro-example-viewer';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
This example can lead as a starting point for your workflow builder app. It includes different ways to add new nodes, such as placeholders or through buttons on the edges.
diff --git a/sites/reactflow.dev/src/pages/examples/misc/download-image.mdx b/sites/reactflow.dev/src/pages/examples/misc/download-image.mdx
index cff402288..790fe1e53 100644
--- a/sites/reactflow.dev/src/pages/examples/misc/download-image.mdx
+++ b/sites/reactflow.dev/src/pages/examples/misc/download-image.mdx
@@ -4,15 +4,15 @@ description: Save a flow as a png with the html-to-image library
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/misc/download-image']);
+
This example shows how to download a flow as an image with [html-to-image](https://github.com/bubkoo/html-to-image).
-
diff --git a/sites/reactflow.dev/src/pages/examples/misc/provider.mdx b/sites/reactflow.dev/src/pages/examples/misc/provider.mdx
index fc102bc02..e3ea98462 100644
--- a/sites/reactflow.dev/src/pages/examples/misc/provider.mdx
+++ b/sites/reactflow.dev/src/pages/examples/misc/provider.mdx
@@ -4,16 +4,16 @@ description: For working with multiple flows on a page, so that each has a separ
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/misc/provider']);
+
If you are working with multiple flows on a page or if you are using a client side router you need to wrap each flow with a [`ReactFlowProvider`](/api-reference/react-flow-provider) so that every flow has its own store instance.
Using a `ReactFlowProvider` is also mandatory if you want to access the internal state outside of the `ReactFlow` component.
-
diff --git a/sites/reactflow.dev/src/pages/examples/misc/static-server-side-generation.mdx b/sites/reactflow.dev/src/pages/examples/misc/static-server-side-generation.mdx
index 3fe77192c..30ac5edad 100644
--- a/sites/reactflow.dev/src/pages/examples/misc/static-server-side-generation.mdx
+++ b/sites/reactflow.dev/src/pages/examples/misc/static-server-side-generation.mdx
@@ -6,7 +6,7 @@ is_pro_example: true
import { Button } from '@xyflow/xy-ui';
import ProExampleViewer from '@/components/pro-example-viewer';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
A full-stack app that statically renders a flow with React Flow on the server. It is composed of a small [Express](https://expressjs.com/) server and a simple React frontend. Edit the displayed nodes and edges, adjust the export format, aspect ratio, and output dimensions. When you make changes, a request is sent to the server, which responds with a downloadable HTML preview or an image.
diff --git a/sites/reactflow.dev/src/pages/examples/misc/use-react-flow-hook.mdx b/sites/reactflow.dev/src/pages/examples/misc/use-react-flow-hook.mdx
index 1fc414531..d2f662cae 100644
--- a/sites/reactflow.dev/src/pages/examples/misc/use-react-flow-hook.mdx
+++ b/sites/reactflow.dev/src/pages/examples/misc/use-react-flow-hook.mdx
@@ -4,15 +4,15 @@ description: A hook with useful helpers for your nodes, edges, and the viewport
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/misc/use-react-flow-hook']);
+
This example illustrates how to use the [`useReactFlow` hook](/api-reference/hooks/use-react-flow). It comes with a lot of useful helpers to update your nodes and edges or adjust the viewport of your diagram. The hook returns a [`ReactFlow instance`](/api-reference/types/react-flow-instance).
-
diff --git a/sites/reactflow.dev/src/pages/examples/nodes/add-node-on-edge-drop.mdx b/sites/reactflow.dev/src/pages/examples/nodes/add-node-on-edge-drop.mdx
index 19c2ace03..61f5d8364 100644
--- a/sites/reactflow.dev/src/pages/examples/nodes/add-node-on-edge-drop.mdx
+++ b/sites/reactflow.dev/src/pages/examples/nodes/add-node-on-edge-drop.mdx
@@ -4,14 +4,18 @@ description: A new node appears wherever you drop the connection line
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/nodes/add-node-on-edge-drop']);
+
You can create a new node when you drop the connection line on the pane by using the `onConnectStart` and `onConnectEnd` handlers.
diff --git a/sites/reactflow.dev/src/pages/examples/nodes/connection-limit.mdx b/sites/reactflow.dev/src/pages/examples/nodes/connection-limit.mdx
index 992cc7b4f..7a2f06650 100644
--- a/sites/reactflow.dev/src/pages/examples/nodes/connection-limit.mdx
+++ b/sites/reactflow.dev/src/pages/examples/nodes/connection-limit.mdx
@@ -4,17 +4,17 @@ description: Use the `isConnectable` prop to limit the number of connections a h
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/nodes/connection-limit']);
+
This is an example of a custom node with a custom handle that can limit the amount of connections a handle can have using the `isConnectable` prop.
You can use a boolean, a number (the number of max. connections the handle should have) or a callback function that returns a boolean
as an arg for the `isConnectable` prop of the CustomHandle component.
-
diff --git a/sites/reactflow.dev/src/pages/examples/nodes/custom-node.mdx b/sites/reactflow.dev/src/pages/examples/nodes/custom-node.mdx
index 2890cd2eb..7cb508adf 100644
--- a/sites/reactflow.dev/src/pages/examples/nodes/custom-node.mdx
+++ b/sites/reactflow.dev/src/pages/examples/nodes/custom-node.mdx
@@ -3,16 +3,16 @@ title: Custom Nodes
description: Display any content inside of a node
---
+import { ExampleLayout } from 'xy-shared';
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/nodes/custom-node']);
+
Creating your own nodes is as easy as creating a regular React component and passing them to `nodeTypes`. Being just regular components, you can essentially display any content and implement any functionality you like. Inside, you have access to a number of props that let you implement and extend default node behaviour.
-
diff --git a/sites/reactflow.dev/src/pages/examples/nodes/delete-middle-node.mdx b/sites/reactflow.dev/src/pages/examples/nodes/delete-middle-node.mdx
index 697093e74..e7eb0f220 100644
--- a/sites/reactflow.dev/src/pages/examples/nodes/delete-middle-node.mdx
+++ b/sites/reactflow.dev/src/pages/examples/nodes/delete-middle-node.mdx
@@ -7,7 +7,11 @@ import { Callout, Cards } from 'nextra/components';
import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline';
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/nodes/delete-middle-node']);
+
This example shows you how to recover deleted edges when you remove a node from the
@@ -28,11 +32,7 @@ To achieve this, we need to make use of a few bits:
All together, this allows us to take all the nodes connected to the deleted
node, and reconnect them to any nodes the deleted node was connected to.
-
You can restrict dragging to a specific part of node, by specifiying a class that will act as a [`dragHandle`](/api-reference/types/node).
-
diff --git a/sites/reactflow.dev/src/pages/examples/nodes/dynamic-grouping.mdx b/sites/reactflow.dev/src/pages/examples/nodes/dynamic-grouping.mdx
index 3969824b7..05e437205 100644
--- a/sites/reactflow.dev/src/pages/examples/nodes/dynamic-grouping.mdx
+++ b/sites/reactflow.dev/src/pages/examples/nodes/dynamic-grouping.mdx
@@ -5,7 +5,7 @@ is_pro_example: true
---
import ProExampleViewer from '@/components/pro-example-viewer';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
This example shows how to group nodes dynamically. You can drag a node from the sidebar or the pane to a group or select multiple nodes and use the "Group Nodes" button to group them.
diff --git a/sites/reactflow.dev/src/pages/examples/nodes/easy-connect.mdx b/sites/reactflow.dev/src/pages/examples/nodes/easy-connect.mdx
index d637a0eea..872bfd418 100644
--- a/sites/reactflow.dev/src/pages/examples/nodes/easy-connect.mdx
+++ b/sites/reactflow.dev/src/pages/examples/nodes/easy-connect.mdx
@@ -4,7 +4,11 @@ description: Make the whole node into a handle
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/nodes/easy-connect']);
+
Fed up with tiny little connection handles? Make your whole node act as one!
@@ -12,8 +16,8 @@ import ExampleLayout from '@/layouts/example-with-frontmatter';
to still be able to drag the node.
Nodes and edges can be hidden by using the [`hidden` attribute](/api-reference/types/node). This can be used for implementing expandable/collapsible diagrams.
-
diff --git a/sites/reactflow.dev/src/pages/examples/nodes/intersections.mdx b/sites/reactflow.dev/src/pages/examples/nodes/intersections.mdx
index 1924e837c..c7bbf6509 100644
--- a/sites/reactflow.dev/src/pages/examples/nodes/intersections.mdx
+++ b/sites/reactflow.dev/src/pages/examples/nodes/intersections.mdx
@@ -4,15 +4,15 @@ description: Detect when a node overlaps with another node
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/nodes/intersections']);
+
The `useReactFlow` hook exports [helpers to check intersections](/api-reference/types/react-flow-instance#intersections) of nodes and areas. In this example you can drag a node and get a visual feedback when it intersects with another node.
-
diff --git a/sites/reactflow.dev/src/pages/examples/nodes/node-resizer.mdx b/sites/reactflow.dev/src/pages/examples/nodes/node-resizer.mdx
index 42d25c23f..6a03554a7 100644
--- a/sites/reactflow.dev/src/pages/examples/nodes/node-resizer.mdx
+++ b/sites/reactflow.dev/src/pages/examples/nodes/node-resizer.mdx
@@ -6,15 +6,15 @@ description: Change the size of a node with a bounding box or draggable icon
import { Callout } from 'nextra/components';
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/nodes/node-resizer']);
+
The [`
diff --git a/sites/reactflow.dev/src/pages/examples/nodes/node-toolbar.mdx b/sites/reactflow.dev/src/pages/examples/nodes/node-toolbar.mdx
index 5b23813c1..c11c99ed2 100644
--- a/sites/reactflow.dev/src/pages/examples/nodes/node-toolbar.mdx
+++ b/sites/reactflow.dev/src/pages/examples/nodes/node-toolbar.mdx
@@ -5,7 +5,11 @@ description: A toolbar with buttons appears next to the selected node
import { Callout } from 'nextra/components';
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/nodes/node-toolbar']);
+
For many types of applications, having a toolbar or set of controls appear when
@@ -18,11 +22,7 @@ it easy to add this functionality to your custom nodes!
means it should always be visible.
-
This example shows how to automatically create edges when a node is dropped in close proximity to another one. While dragging, a dotted connection line is displayed to show which edge will be created if you drop the node.
-
diff --git a/sites/reactflow.dev/src/pages/examples/nodes/rotatable-node.mdx b/sites/reactflow.dev/src/pages/examples/nodes/rotatable-node.mdx
index a3258a782..1ceef884d 100644
--- a/sites/reactflow.dev/src/pages/examples/nodes/rotatable-node.mdx
+++ b/sites/reactflow.dev/src/pages/examples/nodes/rotatable-node.mdx
@@ -4,16 +4,15 @@ description: A custom node that can be rotated using CSS transforms
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/nodes/rotatable-node']);
This example shows how to implement a [custom node](/learn/customization/custom-nodes)
that can be rotated using CSS transforms.
-
diff --git a/sites/reactflow.dev/src/pages/examples/nodes/shapes.mdx b/sites/reactflow.dev/src/pages/examples/nodes/shapes.mdx
index d1f214527..5637c5aa7 100644
--- a/sites/reactflow.dev/src/pages/examples/nodes/shapes.mdx
+++ b/sites/reactflow.dev/src/pages/examples/nodes/shapes.mdx
@@ -5,7 +5,7 @@ is_pro_example: true
---
import ProExampleViewer from '@/components/pro-example-viewer';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
This example shows how to implement a [custom node](/learn/customization/custom-nodes) that can render different shapes like a circle, diamond or hexagon that are commonly used in flow charts. It also shows how to implement a sidebar component, custom minimap nodes and a node toolbar to change the color of the shapes.
diff --git a/sites/reactflow.dev/src/pages/examples/nodes/stress.mdx b/sites/reactflow.dev/src/pages/examples/nodes/stress.mdx
index e59944b90..060c948ca 100644
--- a/sites/reactflow.dev/src/pages/examples/nodes/stress.mdx
+++ b/sites/reactflow.dev/src/pages/examples/nodes/stress.mdx
@@ -4,14 +4,18 @@ description: Render hundreds of nodes and edges at once
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/nodes/stress']);
+
You doubt we can render a lot of nodes and edges? See for yourself.
diff --git a/sites/reactflow.dev/src/pages/examples/nodes/update-node.mdx b/sites/reactflow.dev/src/pages/examples/nodes/update-node.mdx
index 4763c7c2f..3ec26bdd7 100644
--- a/sites/reactflow.dev/src/pages/examples/nodes/update-node.mdx
+++ b/sites/reactflow.dev/src/pages/examples/nodes/update-node.mdx
@@ -5,7 +5,10 @@ description: Update the data field of a specific node
import { Callout } from 'nextra/components';
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+import { getStaticCode } from 'xy-shared/server';
+
+export const getStaticProps = getStaticCode(['examples/nodes/update-node']);
You can update properties of nodes and edges freely as long as you pass a newly created `nodes` or `edges` array to `ReactFlow`.
@@ -18,10 +21,6 @@ You can update properties of nodes and edges freely as long as you pass a newly
diff --git a/sites/reactflow.dev/src/pages/examples/overview.mdx b/sites/reactflow.dev/src/pages/examples/overview.mdx
index 12ba9801d..ba9bc259f 100644
--- a/sites/reactflow.dev/src/pages/examples/overview.mdx
+++ b/sites/reactflow.dev/src/pages/examples/overview.mdx
@@ -4,15 +4,15 @@ description: The most used features of React Flow - controls, MiniMap, node type
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/misc/overview']);
+
This is an overview example of what's possible with React Flow. Below you can see features like: built-in node and edge types, [sub flows](/learn/layouting/sub-flows), [`NodeToolbar`](/api-reference/components/node-toolbar), [`NodeResizer`](/api-reference/components/node-resizer) components. On the bottom you see the [Controls](/api-reference/components/controls) and the [MiniMap](/api-reference/components/minimap) components.
-
diff --git a/sites/reactflow.dev/src/pages/examples/styling/base-style.mdx b/sites/reactflow.dev/src/pages/examples/styling/base-style.mdx
index 36c55e1ff..ae72dfd78 100644
--- a/sites/reactflow.dev/src/pages/examples/styling/base-style.mdx
+++ b/sites/reactflow.dev/src/pages/examples/styling/base-style.mdx
@@ -4,15 +4,19 @@ description: Show the bare-bones base style that is built into React Flow, but i
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/styling/base-style']);
+
React Flow comes with a default style and a base style. This example shows how the base style looks. The base style is mandatory for every flow to work.
You can find more information in the [theming guide](/learn/customization/theming).
diff --git a/sites/reactflow.dev/src/pages/examples/styling/dark-mode.mdx b/sites/reactflow.dev/src/pages/examples/styling/dark-mode.mdx
index c3424c7ad..bb3d9e591 100644
--- a/sites/reactflow.dev/src/pages/examples/styling/dark-mode.mdx
+++ b/sites/reactflow.dev/src/pages/examples/styling/dark-mode.mdx
@@ -5,14 +5,18 @@ created_at: 2024-07-15
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/styling/dark-mode']);
+
React Flow comes with a built-in light & dark mode. You can set the [`colorMode`](/api-reference/react-flow#colorMode) prop that allows you to switch between `'dark'`, `'light'` and `'system'`.
diff --git a/sites/reactflow.dev/src/pages/examples/styling/styled-components.mdx b/sites/reactflow.dev/src/pages/examples/styling/styled-components.mdx
index 960b1c349..1440a6340 100644
--- a/sites/reactflow.dev/src/pages/examples/styling/styled-components.mdx
+++ b/sites/reactflow.dev/src/pages/examples/styling/styled-components.mdx
@@ -4,14 +4,17 @@ description: Change the color of the background and nodes with the Styled Compon
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/styling/styled-components']);
+
In this example we are using [styled components](https://styled-components.com/) to show how to implement a dark and light mode.
In this example we are using [Tailwind](https://tailwindcss.com/) for styling the flow.
-
- We are using the Tailwind CDN for this example. Because of a [bug](https://github.com/codesandbox/sandpack/issues/624)
- with SandPack, opening the sandbox below will not have the script added to the
- HTML document. To make sure the example works correctly, make sure you add
- `` to the HTML document
- in `public/index.html` manually.
-
-If you are copying the example locally, you will likely have Tailwind set up
-differently, and can ignore this warning.
-
-
-
-
diff --git a/sites/reactflow.dev/src/pages/examples/styling/turbo-flow.mdx b/sites/reactflow.dev/src/pages/examples/styling/turbo-flow.mdx
index 1c8221193..fadef2b60 100644
--- a/sites/reactflow.dev/src/pages/examples/styling/turbo-flow.mdx
+++ b/sites/reactflow.dev/src/pages/examples/styling/turbo-flow.mdx
@@ -4,15 +4,15 @@ description: Nodes with glowing animated gradient borders, inspired by the turbo
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/styling/turbo-flow']);
+
Every part of the React Flow UI is customizable. As the name implies the look is taken from the beautiful [turbo.build](https://turbo.build/pack/docs/core-concepts#function-level-caching) website. You can find more information about custom styles in the [theming guide](/learn/customization/theming). (React Flow uses Turborepo and we love it 💜)
-
diff --git a/sites/reactflow.dev/src/pages/index.mdx b/sites/reactflow.dev/src/pages/index.mdx
index 44768c3a6..93795cc6b 100644
--- a/sites/reactflow.dev/src/pages/index.mdx
+++ b/sites/reactflow.dev/src/pages/index.mdx
@@ -3,21 +3,21 @@ title: Node-Based UIs in React
description: Highly customizable React library for workflow builders, no-code apps, image processing, visualizers, and more
---
-import ReactFlowPage from '@/sites/home';
+import ReactFlowPage from '@/layouts/home';
import getStaticPropsStats from '@/utils/get-static-props/github-npm-stats';
-import { getMdxContentUnderRoute } from '@/utils/get-static-props/mdx-content-under-route';
+import { getMdxContentUnderRoute } from 'xy-shared/server';
export async function getStaticProps() {
- const whatsNew = await getMdxContentUnderRoute('/whats-new');
- const whatsNewItems = whatsNew.slice(0, 3).map(entry => entry.frontmatter)
- const { stars, downloads, revalidate } = await getStaticPropsStats();
-
- return {
- props: {
- ssg: { whatsNew: whatsNewItems, stars, downloads }
- },
- revalidate
- };
+ const whatsNew = await getMdxContentUnderRoute('reactflow.dev','/whats-new');
+ const whatsNewItems = whatsNew.slice(0, 3).map((entry) => entry.frontmatter);
+ const { stars, downloads, revalidate } = await getStaticPropsStats();
+
+return {
+props: {
+ssg: { whatsNew: whatsNewItems, stars, downloads },
+},
+revalidate,
+};
}
For this guide we assume that you already know about the [core
@@ -20,11 +30,7 @@ Usually with React Flow, developers handle their data outside of React Flow by s
By the end of this guide, you will build an interactive flow graph that generates a color out of three separate number input fields (red, green and blue), and determines whether white or black text would be more readable on that background color.
-
-Let's also add edges going from the input nodes to the color node to our `initialEdges`
-array while we are at it.
+Let's also add edges going from the input nodes to the color node to our
+`initialEdges` array while we are at it.
And there you go! Try changing the input values and see the color change in
-real time.
+And there you go! Try changing the input values and see the color change
+in real time.
@@ -31,9 +34,10 @@ their interactions become more complex.
@@ -51,7 +55,7 @@ The `width` and `height` properties are added to each node by React Flow after i
the node's dimensions. We pass those dimensions, as well as other information like
the node's id and type, to a custom `
For this guide we assume that you already know about the [core
concepts](/learn/concepts/core-concepts) of React Flow and how to implement
@@ -23,46 +27,15 @@ As you might have seen in the previous guides and examples, React Flow can easil
As mentioned above we are using Zustand in this example. Zustand is a bit like Redux: you have a central store with actions to alter your state and hooks to access your state. You can install Zustand via:
-
-
-
-```bash copy
+```bash copy npm2yarn
npm install --save zustand
```
-
-
-
-```bash copy
-pnpm add zustand
-```
-
-
-
-
-```bash copy
-yarn add zustand
-```
-
-
-
-
-```bash copy
-bun add zustand
-```
-
-
-
-
## Create a Store
Zustand lets you create a hook for accessing the values and functions of your store. We put the `nodes` and `edges` and the `onNodesChange`, `onEdgesChange`, `onConnect`, `setNodes` and `setEdges` functions in the store to get the basic interactivity for our graph:
-
-
-
-
-```bash copy
-npm create vite@latest my-react-flow-app -- --template react
-```
-
-
-
-
-```bash copy
-pnpm create vite my-react-flow-app -- --template react
+```bash copy npm2yarn
+npm init vite my-react-flow-app -- --template react
```
-
-
-
-```bash copy
-yarn create vite my-react-flow-app -- --template react
-```
-
-
-
-
React Flow is published on npm as [`@xyflow/react`](https://npmjs.com/package/@xyflow/react), so go ahead and add it next.
-
-
-
-```bash copy
+```bash copy npm2yarn
npm install @xyflow/react
```
-
-
-
-```bash copy
-pnpm add @xyflow/react
-```
-
-
-
-
-```bash copy
-yarn add @xyflow/react
-```
-
-
-
-
-```bash copy
-bun add @xyflow/react
-```
-
-
-
-
Lastly, spin up the dev server and we're good to go!
-
-
-
-```bash copy
-npm run dev
-```
-
-
-
-
-```bash copy
-pnpm dev
-```
-
-
-
-
-```bash copy
-yarn dev
-```
-
-
-
-
-```bash copy
-bun run dev
-```
-
-
-
-
## Creating your first flow
The `reactflow` package exports the `
Rectangular collisions
- D3-Force has a built-in collision force, but it assumes nodes are circles. We've
- thrown together a custom force in `collision.js` that uses a similar algorithm
- but accounts for our rectangular nodes instead. Feel free to steal it or let us
- know if you have any suggestions for improvements!
+ D3-Force has a built-in collision force, but it assumes nodes are circles.
+ We've thrown together a custom force in `collision.js` that uses a similar
+ algorithm but accounts for our rectangular nodes instead. Feel free to steal
+ it or let us know if you have any suggestions for improvements!
The tick function progresses the simulation by one step and then updates React
@@ -167,11 +158,7 @@ Elkjs is certainly the most configurable option available, but it's also the mos
complicated. Elkjs is a Java library that's been ported to JavaScript, and it
provides a huge number of options for configuring the layout of your graph.
-
The ELK reference is your new best friend
- We don't often recommend elkjs because it's complexity makes it difficult for us
- to support folks when they need it. If you do decide to use it, you'll want to
- keep the original [Java API reference](https://eclipse.dev/elk/reference.html)
- handy.
+ We don't often recommend elkjs because it's complexity makes it difficult for
+ us to support folks when they need it. If you do decide to use it, you'll want
+ to keep the original [Java API
+ reference](https://eclipse.dev/elk/reference.html) handy.
We've also included a few examples of some of the other layouting algorithms
diff --git a/sites/reactflow.dev/src/pages/learn/layouting/sub-flows.mdx b/sites/reactflow.dev/src/pages/learn/layouting/sub-flows.mdx
index 01df04a4f..8c147497c 100644
--- a/sites/reactflow.dev/src/pages/learn/layouting/sub-flows.mdx
+++ b/sites/reactflow.dev/src/pages/learn/layouting/sub-flows.mdx
@@ -6,6 +6,10 @@ description: Learn how to use sub flows to group nodes together in a flow.
import { Callout } from 'nextra/components';
import { RemoteCodeViewer } from 'xy-shared';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['learn/sub-flows', 'learn/sub-flows-2', 'learn/sub-flows-3']);
+
+
# Sub Flows
@@ -18,8 +22,8 @@ A sub flow is a flow inside a node. It can be a separate flow or a flow that is
Order of Nodes
- It's important that your parent nodes appear before their children in the `nodes`/
- `defaultNodes` array to get processed correctly.
+ It's important that your parent nodes appear before their children in the
+ `nodes`/ `defaultNodes` array to get processed correctly.
### Adding Child Nodes
@@ -28,11 +32,7 @@ If you want to add a node as a child of another node you need to use the `parent
In this example we are setting a fixed width and height of the parent node by passing the style option. Additionally, we set the child extent to `'parent'` so that we can't move the child nodes out of the parent node.
-
-### It looks like you have created a new nodeTypes or edgeTypes object. If this wasn't
-on purpose please define the nodeTypes/edgeTypes outside of the component or memoize
-them.
+### It looks like you have created a new nodeTypes or edgeTypes object. If this
+wasn't on purpose please define the nodeTypes/edgeTypes outside of the component
+or memoize them.
This warning appears when the `nodeTypes` or `edgeTypes` properties change after the initial render. The `nodeTypes` or `edgeTypes` should only be changed dynamically in very rare cases. Usually they are defined once with all the types that you are using in your application. It can happen easily that you are defining the nodeTypes or edgeTypes object inside of your component render function, which will cause React Flow to re-render every time your component re-renders.
@@ -239,7 +239,8 @@ function Flow(props) {
```
-### The React Flow parent container needs a width and a height to render the graph.
+### The React Flow parent container needs a width and a height to render the
+graph.
Under the hood, React Flow measures the parent DOM element to adjust the renderer. If you try to render React Flow in a regular div without a height, we cannot display the graph. If you encounter this warning, you need to make sure that your wrapper component has some CSS attached to it so that it gets a fixed height or inherits the height of its parent.
@@ -367,7 +368,8 @@ function Flow(props) {
This can happen when you are trying to [reconnect an edge](/examples/edges/reconnect-edge) but the edge you want to update is already removed from the state. This is a very rare case. Please see the [Reconnect Edge example](/examples/edges/reconnect-edge) for implementation details.
-### Couldn't create edge for source/target handle id: "some-id"; edge id: "some-id".
+### Couldn't create edge for source/target handle id: "some-id"; edge id:
+"some-id".
This can happen if you are working with multiple handles and a handle is not found by its `id` property or if you haven't [updated the node internals after adding or removing handles](/api-reference/hooks/use-update-node-internals) programmatically. Please see the [Custom Node Example](/examples/nodes/custom-node) for an example of working with multiple handles.
@@ -397,8 +399,8 @@ doesn't know how to handle React Flow.
You need to add a number of babel plugins to your webpack config to make it work:
-```sh
-$ npm i --save-dev babel-loader@8.2.5 @babel/preset-env @babel/preset-react @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator
+```sh npm2yarn copy
+npm i --save-dev babel-loader@8.2.5 @babel/preset-env @babel/preset-react @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator
```
and configure the loader like this:
diff --git a/sites/reactflow.dev/src/pages/learn/troubleshooting/migrate-to-v11.mdx b/sites/reactflow.dev/src/pages/learn/troubleshooting/migrate-to-v11.mdx
index 9c322ac99..6130116e4 100644
--- a/sites/reactflow.dev/src/pages/learn/troubleshooting/migrate-to-v11.mdx
+++ b/sites/reactflow.dev/src/pages/learn/troubleshooting/migrate-to-v11.mdx
@@ -39,7 +39,7 @@ A lot changed in v11 but this time we've tried to keep the breaking changes smal
- **Pan over nodes** when they are not draggable (`draggable=false` or `nodesDraggable` false)
- you can disable this behaviour by adding the class name `nopan` to a wrapper of a custom node
- **[`
-
-
-```bash
+```bash npm2yarn
npm install @xyflow/react
```
-
-
-
-```bash
-pnpm add @xyflow/react
-```
-
-
-
-
-```bash
-yarn add @xyflow/react
-```
-
-
-
-
{/* this is a workaround to hide headlines from the TOC */}
{1. A new npm package name }
diff --git a/sites/reactflow.dev/src/pages/learn/troubleshooting/remove-attribution.mdx b/sites/reactflow.dev/src/pages/learn/troubleshooting/remove-attribution.mdx
index b1717b63d..f0b2d994b 100644
--- a/sites/reactflow.dev/src/pages/learn/troubleshooting/remove-attribution.mdx
+++ b/sites/reactflow.dev/src/pages/learn/troubleshooting/remove-attribution.mdx
@@ -10,6 +10,10 @@ This example demonstrates how you can remove the React Flow attribution from the
import { Callout } from 'nextra/components';
import { RemoteCodeViewer } from 'xy-shared';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['learn/remove-attribution']);
+
+
If you’re considering removing the attribution, we’d first like to mention:
@@ -23,8 +27,4 @@ Thank you for supporting the React Flow team ✌🏻
-
In this tutorial, you will learn to create a simple mind map tool with React Flow that can be used for brainstorming, organizing an idea, or mapping your thoughts in a visual way. To build this app, we'll be using state management, custom nodes and edges, and more.
@@ -23,8 +34,7 @@ Before we get our hands dirty, I want to show you the mindmapping tool we'll hav
@@ -328,8 +336,7 @@ const edgeTypes = {
and then pass the newly created types to the React Flow component.
-
To test the new functionality you can start a connection from a handle and then end it on the pane. You should see a new node being added to the mind map.
@@ -561,8 +564,7 @@ In order to make the whole node a handle, we also update the style of the source
@@ -647,8 +649,7 @@ We add a wrapper div with the class name `inputWrapper` and a div with the class
@@ -734,8 +735,7 @@ As you see we are focusing the input field if the user releases the mouse button
@@ -770,8 +770,7 @@ useEffect(() => {
Today we'll be looking at how to create an interactive audio playground using React
@@ -99,7 +107,7 @@ all do largely the same thing. You could also choose to use TypeScript instead
of JavaScript. To keep things simple we won't use it today, but React Flow is
fully typed (and written entirely in TypeScript) so it's a breeze to use!
-```bash
+```bash npm2yarn
npm create vite@latest -- --template react
```
@@ -206,8 +214,7 @@ Here's what we put together, in case you weren't following along at home:
@@ -656,8 +662,7 @@ const useStore = createWithEqualityFn((set, get) => ({
-
## Final thoughts
diff --git a/sites/reactflow.dev/src/pages/learn/tutorials/slide-shows-with-react-flow.mdx b/sites/reactflow.dev/src/pages/learn/tutorials/slide-shows-with-react-flow.mdx
index 147c99d1c..6f2d1a9d3 100644
--- a/sites/reactflow.dev/src/pages/learn/tutorials/slide-shows-with-react-flow.mdx
+++ b/sites/reactflow.dev/src/pages/learn/tutorials/slide-shows-with-react-flow.mdx
@@ -12,9 +12,19 @@ image: /img/tutorials/presentation/slideshow-thumb.png
import { Cards, Callout } from 'nextra/components';
import { Bleed } from 'nextra-theme-docs';
-import { Image, RemoteCodeViewer } from 'xy-shared';
+import { Image, RemoteCodeViewer, TutorialLayout } from 'xy-shared';
import { Emoji } from '@xyflow/xy-ui';
-import { TutorialLayout } from '@/layouts/tutorial-with-frontmatter';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode([
+ 'tutorials/presentation/app',
+ 'tutorials/presentation/scaffold',
+ 'tutorials/presentation/rendering-markdown',
+ 'tutorials/presentation/layout-demo',
+ 'tutorials/presentation/focus-on-click',
+ 'tutorials/presentation/slide-controls',
+ 'tutorials/presentation/app',
+]);
We recently published the findings from our React Flow 2023 end-of-year survey with an [interactive presentation](/developer-survey-2023) of the key findings, using React Flow itself. There were lots of useful bits built into this slideshow app, so we wanted to share how we built it!
@@ -41,8 +51,7 @@ Once you're done, the app will look like this!
@@ -581,8 +587,7 @@ that was clicked.
) {
@@ -784,8 +788,7 @@ what we've learned.
diff --git a/sites/reactflow.dev/src/pages/pro/case-studies/doubleloop-case-study.mdx b/sites/reactflow.dev/src/pages/pro/case-studies/doubleloop-case-study.mdx
index 97da2d8ba..104ac43ba 100644
--- a/sites/reactflow.dev/src/pages/pro/case-studies/doubleloop-case-study.mdx
+++ b/sites/reactflow.dev/src/pages/pro/case-studies/doubleloop-case-study.mdx
@@ -10,7 +10,7 @@ image_height: 1646
---
import QandA from '@/components/case-study-qa';
-import CaseStudyLayout from '@/layouts/case-study-with-metadata';
+import { CaseStudyLayout } from 'xy-shared';
diff --git a/sites/reactflow.dev/src/pages/pro/case-studies/hubql-case-study.mdx b/sites/reactflow.dev/src/pages/pro/case-studies/hubql-case-study.mdx
index 191c911dc..c78d6ad79 100644
--- a/sites/reactflow.dev/src/pages/pro/case-studies/hubql-case-study.mdx
+++ b/sites/reactflow.dev/src/pages/pro/case-studies/hubql-case-study.mdx
@@ -10,7 +10,7 @@ image_height: 1080
---
import QandA from '@/components/case-study-qa';
-import CaseStudyLayout from '@/layouts/case-study-with-metadata';
+import { CaseStudyLayout } from 'xy-shared';
diff --git a/sites/reactflow.dev/src/pages/pro/case-studies/index.mdx b/sites/reactflow.dev/src/pages/pro/case-studies/index.mdx
index bc4db7821..2278674a6 100644
--- a/sites/reactflow.dev/src/pages/pro/case-studies/index.mdx
+++ b/sites/reactflow.dev/src/pages/pro/case-studies/index.mdx
@@ -3,6 +3,6 @@ title: React Flow Pro Case Studies
description: Case studies and success stories from some of our React Flow Pro subscribers.
---
-import CaseStudiesPage from '@/sites/pro/case-studies';
+import CaseStudiesPage from '@/layouts/pro/case-studies';
diff --git a/sites/reactflow.dev/src/pages/pro/examples.mdx b/sites/reactflow.dev/src/pages/pro/examples.mdx
index 4104ee276..a13a0644e 100644
--- a/sites/reactflow.dev/src/pages/pro/examples.mdx
+++ b/sites/reactflow.dev/src/pages/pro/examples.mdx
@@ -3,7 +3,7 @@ title: React Flow Pro Examples
description: Advanced React Flow code examples to use in your node-based UIs, crafted by the React Flow core team.
---
-import ReactFlowProExamplesPage from '@/sites/pro/examples';
+import ReactFlowProExamplesPage from '@/layouts/pro/examples';
import getStaticPropsProExamples from '@/utils/get-static-props/pro-examples-list';
export const getStaticProps = getStaticPropsProExamples;
diff --git a/sites/reactflow.dev/src/pages/pro/index.mdx b/sites/reactflow.dev/src/pages/pro/index.mdx
index 5a2340a33..ffc06aa71 100644
--- a/sites/reactflow.dev/src/pages/pro/index.mdx
+++ b/sites/reactflow.dev/src/pages/pro/index.mdx
@@ -3,6 +3,6 @@ title: React Flow Pro
description: Subscribe to React Flow Pro to get access to exclusive features of React Flow, a highly customizable library for building node-based editors, interactive graphs and flow charts
---
-import ReactFlowProPage from '@/sites/pro';
+import ReactFlowProPage from '@/layouts/pro';
(
+ `../../apps/ui-components/public/registry/${id}.json`,
+ );
+
+ const demo = loadJSONFile(
+ `../../apps/ui-components/public/demo/${id}.json`,
+ );
+
+ const componentName = kebabCaseToCamelCase(id);
+
+ const demoString = demo.files[0].content;
+ const demoMDX = await compileCodeSnippet(demoString, {
+ filetype: 'tsx',
+ showCopy: true,
+ highlight: componentName,
+ });
+
+ const componentString = data.files[0].content;
+ const componentMDX = await compileCodeSnippet(componentString, {
+ filetype: 'tsx',
+ showCopy: true,
+ filename: `${componentName}.tsx`,
+ });
+
+ const jsonUrl = `${process.env.NEXT_PUBLIC_UI_COMPONENTS_URL}/${data.name}`;
+ const installMDX = await compileCodeSnippet(
+ `npx shadcn@latest add ${jsonUrl}`,
+ {
+ filetype: 'bash',
+ showCopy: true,
+ npm2yarn: true,
+ },
+ );
+
+ const npmDependencies = (data.dependencies || []).map((dep) => ({
+ label: dep,
+ url: `https://www.npmjs.com/package/${dep}`,
+ }));
+ const npmString = `npm install ${npmDependencies
+ .map((dep) => dep.label)
+ .join(' ')}`;
+ const npmMDX = await compileCodeSnippet(npmString, {
+ filetype: 'bash',
+ showCopy: true,
+ npm2yarn: true,
+ });
+
+ return {
+ props: {
+ ssg: {
+ ...data,
+ demo,
+ demoMDX,
+ componentMDX,
+ installMDX,
+ npmMDX,
+ },
+ },
+ revalidate: 60 * 60 * 24,
+ };
+ };
+}
diff --git a/sites/reactflow.dev/src/utils/get-static-props/github-npm-stats.ts b/sites/reactflow.dev/src/utils/get-static-props/github-npm-stats.ts
index c7a8917c3..d4a976491 100644
--- a/sites/reactflow.dev/src/utils/get-static-props/github-npm-stats.ts
+++ b/sites/reactflow.dev/src/utils/get-static-props/github-npm-stats.ts
@@ -1,4 +1,4 @@
-import { fetchJSON } from '..';
+import { fetchJSON } from 'xy-shared';
export default async function getStaticProps() {
const { stargazers_count: stars = 0 } = await fetchJSON(
@@ -10,7 +10,11 @@ export default async function getStaticProps() {
const { downloads: reactFlowDownloads = 0 } = await fetchJSON(
process.env.NPM_REACT_FLOW,
);
- const downloads = reactFlowLegacyDownloads + reactFlowDownloads;
+ const { downloads: xyflowReactDownloads = 0 } = await fetchJSON(
+ process.env.NPM_XYFLOW_REACT,
+ );
+ const downloads =
+ reactFlowLegacyDownloads + reactFlowDownloads + xyflowReactDownloads;
if (!downloads || !stars) {
console.log('could not fetch downloads and stars. please try again.');
diff --git a/sites/reactflow.dev/src/utils/get-static-props/pro-examples-list.ts b/sites/reactflow.dev/src/utils/get-static-props/pro-examples-list.ts
index 7ed4fca5f..6046e0693 100644
--- a/sites/reactflow.dev/src/utils/get-static-props/pro-examples-list.ts
+++ b/sites/reactflow.dev/src/utils/get-static-props/pro-examples-list.ts
@@ -1,4 +1,4 @@
-import { fetchJSON } from '..';
+import { fetchJSON } from 'xy-shared';
export default async function getStaticProps() {
const data = await fetchJSON(
diff --git a/sites/reactflow.dev/src/utils/index.ts b/sites/reactflow.dev/src/utils/index.ts
index f762ab334..a3820983e 100644
--- a/sites/reactflow.dev/src/utils/index.ts
+++ b/sites/reactflow.dev/src/utils/index.ts
@@ -1,38 +1 @@
-import { getPagesUnderRoute } from 'nextra/context';
-import { isMdxFile } from 'xy-shared';
-import { type Route, type ExternalRoute, type InternalRoute } from './routes';
-
-export function getMdxPagesUnderRoute(route: InternalRoute) {
- return getPagesUnderRoute(route).filter(isMdxFile);
-}
-
-// used for pagination for blog and case studies to display prev and next post/ case study
-export function getPrevAndNextPagesByTitle(title, route: InternalRoute) {
- const pages = getMdxPagesUnderRoute(route);
-
- const currentIndex = pages.findIndex(
- (page) => page.frontMatter?.title === title,
- );
- const prevIndex = currentIndex === 0 ? pages.length - 1 : currentIndex - 1;
- const nextIndex = currentIndex === pages.length - 1 ? 0 : currentIndex + 1;
-
- const prevPage = pages[prevIndex];
- const nextPage = pages[nextIndex];
-
- return [prevPage, nextPage];
-}
-
-export async function fetchJSON(url: string): Promise> {
- let json = {};
-
- try {
- const resp = await fetch(url, { headers: { 'User-Agent': 'webkid' } });
- json = await resp.json();
- } catch (err) {
- console.log(err);
- }
-
- return json;
-}
-
-export type { Route, ExternalRoute, InternalRoute };
+export * from './routes';
diff --git a/sites/reactflow.dev/src/utils/routes.ts b/sites/reactflow.dev/src/utils/routes.ts
index 2e6cda878..72ec12820 100644
--- a/sites/reactflow.dev/src/utils/routes.ts
+++ b/sites/reactflow.dev/src/utils/routes.ts
@@ -6,6 +6,7 @@ export type InternalRoute =
| '/'
| '/api-reference'
| '/api-reference/components'
+ | '/api-reference/components/_meta.tsx'
| '/api-reference/components/background'
| '/api-reference/components/base-edge'
| '/api-reference/components/control-button'
@@ -20,10 +21,12 @@ export type InternalRoute =
| '/api-reference/components/panel'
| '/api-reference/components/viewport-portal'
| '/api-reference/hooks'
+ | '/api-reference/hooks/_meta.tsx'
| '/api-reference/hooks/use-connection'
| '/api-reference/hooks/use-edges'
| '/api-reference/hooks/use-edges-state'
| '/api-reference/hooks/use-handle-connections'
+ | '/api-reference/hooks/use-internal-node'
| '/api-reference/hooks/use-key-press'
| '/api-reference/hooks/use-node-id'
| '/api-reference/hooks/use-nodes'
@@ -40,6 +43,7 @@ export type InternalRoute =
| '/api-reference/react-flow'
| '/api-reference/react-flow-provider'
| '/api-reference/types'
+ | '/api-reference/types/_meta.tsx'
| '/api-reference/types/background-variant'
| '/api-reference/types/connection'
| '/api-reference/types/connection-line-component-props'
@@ -55,6 +59,7 @@ export type InternalRoute =
| '/api-reference/types/fit-view-options'
| '/api-reference/types/handle'
| '/api-reference/types/handle-connection'
+ | '/api-reference/types/internal-node'
| '/api-reference/types/marker-type'
| '/api-reference/types/mini-map-node-props'
| '/api-reference/types/node'
@@ -74,13 +79,13 @@ export type InternalRoute =
| '/api-reference/types/viewport'
| '/api-reference/types/xy-position'
| '/api-reference/utils'
+ | '/api-reference/utils/_meta.tsx'
| '/api-reference/utils/add-edge'
| '/api-reference/utils/apply-edge-changes'
| '/api-reference/utils/apply-node-changes'
| '/api-reference/utils/get-bezier-path'
| '/api-reference/utils/get-connected-edges'
| '/api-reference/utils/get-incomers'
- | '/api-reference/utils/get-marker-end'
| '/api-reference/utils/get-nodes-bounds'
| '/api-reference/utils/get-outgoers'
| '/api-reference/utils/get-simple-bezier-path'
@@ -91,8 +96,22 @@ export type InternalRoute =
| '/api-reference/utils/is-edge'
| '/api-reference/utils/is-node'
| '/api-reference/utils/reconnect-edge'
+ | '/components'
+ | '/components/_meta.tsx'
+ | '/components/annotation'
+ | '/components/base-handle'
+ | '/components/base-node'
+ | '/components/button-edge'
+ | '/components/database-schema-node'
+ | '/components/labeled-handle'
+ | '/components/motivation'
+ | '/components/placeholder-node'
+ | '/components/tooltip-node'
+ | '/components/zoom-slider'
| '/developer-survey-2023'
| '/examples'
+ | '/examples/_meta.tsx'
+ | '/examples/edges/_meta.tsx'
| '/examples/edges/animating-edges'
| '/examples/edges/custom-connectionline'
| '/examples/edges/custom-edges'
@@ -106,6 +125,7 @@ export type InternalRoute =
| '/examples/edges/reconnect-edge'
| '/examples/edges/simple-floating-edges'
| '/examples/edges/temporary-edges'
+ | '/examples/interaction/_meta.tsx'
| '/examples/interaction/collaborative'
| '/examples/interaction/collision-detection'
| '/examples/interaction/computing-flows'
@@ -122,6 +142,7 @@ export type InternalRoute =
| '/examples/interaction/undo-redo'
| '/examples/interaction/validation'
| '/examples/interaction/zoom-transitions'
+ | '/examples/layout/_meta.tsx'
| '/examples/layout/auto-layout'
| '/examples/layout/dagre'
| '/examples/layout/elkjs'
@@ -132,9 +153,12 @@ export type InternalRoute =
| '/examples/layout/horizontal'
| '/examples/layout/sub-flows'
| '/examples/layout/workflow-builder'
+ | '/examples/misc/_meta.tsx'
| '/examples/misc/download-image'
| '/examples/misc/provider'
+ | '/examples/misc/static-server-side-generation'
| '/examples/misc/use-react-flow-hook'
+ | '/examples/nodes/_meta.tsx'
| '/examples/nodes/add-node-on-edge-drop'
| '/examples/nodes/connection-limit'
| '/examples/nodes/custom-node'
@@ -152,12 +176,14 @@ export type InternalRoute =
| '/examples/nodes/stress'
| '/examples/nodes/update-node'
| '/examples/overview'
+ | '/examples/styling/_meta.tsx'
| '/examples/styling/base-style'
| '/examples/styling/dark-mode'
| '/examples/styling/styled-components'
| '/examples/styling/tailwind'
| '/examples/styling/turbo-flow'
| '/learn'
+ | '/learn/advanced-use/_meta.tsx'
| '/learn/advanced-use/accessibility'
| '/learn/advanced-use/computing-flows'
| '/learn/advanced-use/devtools-and-debugging'
@@ -166,20 +192,25 @@ export type InternalRoute =
| '/learn/advanced-use/testing'
| '/learn/advanced-use/typescript'
| '/learn/advanced-use/uncontrolled-flow'
+ | '/learn/concepts/_meta.tsx'
+ | '/learn/concepts/built-in-components'
| '/learn/concepts/core-concepts'
| '/learn/concepts/introduction'
- | '/learn/concepts/plugin-components'
| '/learn/concepts/terms-and-definitions'
| '/learn/concepts/the-viewport'
+ | '/learn/customization/_meta.tsx'
| '/learn/customization/custom-edges'
| '/learn/customization/custom-nodes'
| '/learn/customization/theming'
+ | '/learn/getting-started/_meta.tsx'
| '/learn/getting-started/adding-interactivity'
| '/learn/getting-started/building-a-flow'
| '/learn/getting-started/installation-and-requirements'
+ | '/learn/layouting/_meta.tsx'
| '/learn/layouting/layouting'
| '/learn/layouting/sub-flows'
| '/learn/troubleshooting'
+ | '/learn/troubleshooting/_meta.tsx'
| '/learn/troubleshooting/migrate-to-v10'
| '/learn/troubleshooting/migrate-to-v11'
| '/learn/troubleshooting/migrate-to-v12'
@@ -214,4 +245,8 @@ export type InternalRoute =
| '/whats-new/2024-06-11'
| '/whats-new/2024-07-09'
| '/whats-new/2024-07-22'
- | '/whats-new/2024-08-14';
\ No newline at end of file
+ | '/whats-new/2024-08-14'
+ | '/whats-new/2024-09-12'
+ | '/whats-new/2024-09-26'
+ | '/whats-new/2024-10-10'
+ | '/whats-new/2024-11-04';
\ No newline at end of file
diff --git a/sites/reactflow.dev/theme.config.tsx b/sites/reactflow.dev/theme.config.tsx
index aaec6b782..d680e689c 100644
--- a/sites/reactflow.dev/theme.config.tsx
+++ b/sites/reactflow.dev/theme.config.tsx
@@ -3,9 +3,9 @@ import { useRouter } from 'next/router';
import { useConfig, Navbar } from 'nextra-theme-docs';
import { Footer, Button, LogoLabel } from '@xyflow/xy-ui';
-import { Search, SidebarTitle, Head } from 'xy-shared';
+import { Search, SidebarTitle, getMdxPagesUnderRoute } from 'xy-shared';
import { SparklesIcon } from '@heroicons/react/24/outline';
-import { getMdxPagesUnderRoute, type Route } from '@/utils';
+import { type Route } from '@/utils';
import { defaultFooterCategories } from '@xyflow/xy-ui';
function useIsPro() {
@@ -25,26 +25,15 @@ const baseUrl =
? 'https://reactflow.dev'
: 'http://localhost:3002';
+const faviconUrl = `${baseUrl}/img/favicon.ico`;
+
export default {
- logo: () =>
- GitHub
-
- ),
- },
darkMode: false,
nextThemes: {
forcedTheme: 'light',
@@ -61,7 +50,7 @@ export default {
// className="flex justify-center items-center max-w-xs mx-auto hover:underline"
// href="/learn/troubleshooting/migrate-to-v12"
// >
- // 🔥 React Flow 12 is here! SSR, dark mode, computing flows, and more
+ // 🔥 React Flow 12 is here! SSR, dark mode, computing flows, and
//
// ),
},
@@ -86,6 +75,7 @@ export default {
route: '/pro/examples',
},
{ title: 'Case Studies', route: '/pro/case-studies' },
+ { title: 'Contact Us', href: 'https://xyflow.com/contact' },
] satisfies { title: string; route?: Route; href?: Route }[]
}
/>
@@ -96,11 +86,17 @@ export default {
},
extraContent: () => {
const isPro = useIsPro();
+ const router = useRouter();
+
+ const isProSubpage = router.pathname === '/pro';
if (isPro) {
return (
-
-
+
@@ -108,15 +104,56 @@ export default {
}
return (
-
-
- React Flow
- Pro
-
-
-
+ <>
+ {!isProSubpage && (
+ <>
+
+
+ GitHub
+
+
+
+
+ Discord
+
+
+
+ )}
+
+
+ React Flow
+ Pro
+
+
+
+
);
},
},
@@ -222,15 +259,37 @@ export default {
? `${frontMatter.title} - React Flow`
: 'React Flow';
+ const description = frontMatter.description ?? defaultDescription;
+ const pageUrl = `${baseUrl}${router.asPath}`;
+
+ // We are not allowed to render components inside head!
+ // https://github.com/shuding/nextra/issues/3529
return (
-
+ <>
+ {title}
+ ();
-
- return (
- {children}
- );
-}
-
-export default ExampleLayout;
diff --git a/sites/svelteflow.dev/src/sites/examples/overview.tsx b/sites/svelteflow.dev/src/layouts/examples/overview.tsx
similarity index 98%
rename from sites/svelteflow.dev/src/sites/examples/overview.tsx
rename to sites/svelteflow.dev/src/layouts/examples/overview.tsx
index b321e2dd7..2d8c9eaa8 100644
--- a/sites/svelteflow.dev/src/sites/examples/overview.tsx
+++ b/sites/svelteflow.dev/src/layouts/examples/overview.tsx
@@ -10,9 +10,8 @@ import {
Button,
Link,
} from '@xyflow/xy-ui';
-import { ProjectPreview } from 'xy-shared';
+import { ProjectPreview, getMdxPagesUnderRoute } from 'xy-shared';
-import { getMdxPagesUnderRoute } from '@/utils';
import { ArrowRightCircleIcon } from '@heroicons/react/24/solid';
export default function ExamplesOverviewPage({
diff --git a/sites/svelteflow.dev/src/sites/home/flows/flow-a.tsx b/sites/svelteflow.dev/src/layouts/home/flows/flow-a.tsx
similarity index 100%
rename from sites/svelteflow.dev/src/sites/home/flows/flow-a.tsx
rename to sites/svelteflow.dev/src/layouts/home/flows/flow-a.tsx
diff --git a/sites/svelteflow.dev/src/sites/home/flows/flow-b.tsx b/sites/svelteflow.dev/src/layouts/home/flows/flow-b.tsx
similarity index 100%
rename from sites/svelteflow.dev/src/sites/home/flows/flow-b.tsx
rename to sites/svelteflow.dev/src/layouts/home/flows/flow-b.tsx
diff --git a/sites/svelteflow.dev/src/sites/home/flows/flow-c.tsx b/sites/svelteflow.dev/src/layouts/home/flows/flow-c.tsx
similarity index 100%
rename from sites/svelteflow.dev/src/sites/home/flows/flow-c.tsx
rename to sites/svelteflow.dev/src/layouts/home/flows/flow-c.tsx
diff --git a/sites/svelteflow.dev/src/sites/home/index.tsx b/sites/svelteflow.dev/src/layouts/home/index.tsx
similarity index 98%
rename from sites/svelteflow.dev/src/sites/home/index.tsx
rename to sites/svelteflow.dev/src/layouts/home/index.tsx
index cf9916bac..b73e4b264 100644
--- a/sites/svelteflow.dev/src/sites/home/index.tsx
+++ b/sites/svelteflow.dev/src/layouts/home/index.tsx
@@ -90,7 +90,7 @@ const features = [
];
export default function SvelteFlowHome() {
- const { downloads = 450 } = useData();
+ const { downloads = 450, version = '0.1.21' } = useData();
return (
@@ -120,7 +120,7 @@ export default function SvelteFlowHome() {
stats={[
{
label: 'Current Version',
- value: process.env.SVELTE_FLOW_VERSION,
+ value: version,
},
{
label: 'Weekly Installs',
diff --git a/sites/svelteflow.dev/src/sites/showcase.tsx b/sites/svelteflow.dev/src/layouts/showcase.tsx
similarity index 100%
rename from sites/svelteflow.dev/src/sites/showcase.tsx
rename to sites/svelteflow.dev/src/layouts/showcase.tsx
diff --git a/sites/svelteflow.dev/src/sites/svelte-flow-support.tsx b/sites/svelteflow.dev/src/layouts/svelte-flow-support.tsx
similarity index 100%
rename from sites/svelteflow.dev/src/sites/svelte-flow-support.tsx
rename to sites/svelteflow.dev/src/layouts/svelte-flow-support.tsx
diff --git a/sites/svelteflow.dev/src/sites/whats-new.tsx b/sites/svelteflow.dev/src/layouts/whats-new.tsx
similarity index 100%
rename from sites/svelteflow.dev/src/sites/whats-new.tsx
rename to sites/svelteflow.dev/src/layouts/whats-new.tsx
diff --git a/sites/svelteflow.dev/src/pages/_app.tsx b/sites/svelteflow.dev/src/pages/_app.tsx
index ea057bacf..9950c115a 100644
--- a/sites/svelteflow.dev/src/pages/_app.tsx
+++ b/sites/svelteflow.dev/src/pages/_app.tsx
@@ -1,33 +1,20 @@
-import localFont from 'next/font/local';
-import { Fira_Mono } from 'next/font/google';
import { useRouter } from 'next/router';
import { cn } from '@xyflow/xy-ui';
-import { useFathom } from 'xy-shared';
-import 'styles/global.css';
+import { useConfig } from 'nextra-theme-docs';
+import { useData } from 'nextra/hooks';
-const ntDapperFont = localFont({
- src: [
- { path: '../styles/fonts/NTDapper-regular.woff2', weight: '400' },
- { path: '../styles/fonts/NTDapper-medium.woff2', weight: '500' },
- { path: '../styles/fonts/NTDapper-bold.woff2', weight: '700' },
- { path: '../styles/fonts/NTDapper-black.woff2', weight: '900' },
- ],
- variable: '--font-ntdapper',
-});
+import { SharedContext, useFathom } from 'xy-shared';
+import { ntDapperFont, fontClassNames } from 'xy-shared/fonts';
-const firaMonoFont = Fira_Mono({
- weight: ['400'],
- subsets: ['latin'],
- variable: '--font-firamono',
-});
-
-const className = `${ntDapperFont.variable} ${firaMonoFont.variable} font-sans`;
+import '../global.css';
const fathomOptions = {
id: 'PFWQXXRR',
};
+const sharedContext = { useConfig, useData };
+
export default function App({ Component, pageProps }) {
const router = useRouter();
// we need this to be able to override nextra theme styles for specific pages
@@ -42,8 +29,10 @@ export default function App({ Component, pageProps }) {
font-family: ${ntDapperFont.style.fontFamily}, sans-serif;
}
`}
-
-
+
+
+
);
diff --git a/sites/svelteflow.dev/src/pages/api-reference/components/background.mdx b/sites/svelteflow.dev/src/pages/api-reference/components/background.mdx
index cdb425d42..4e59d51f2 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/components/background.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/components/background.mdx
@@ -8,7 +8,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { backgroundProps } from '@/page-data/reference/components/Background.ts';
+import { backgroundProps } from '@/references/components/Background.ts';
# <Background />
diff --git a/sites/svelteflow.dev/src/pages/api-reference/components/base-edge.mdx b/sites/svelteflow.dev/src/pages/api-reference/components/base-edge.mdx
index 481787d28..07a621fe4 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/components/base-edge.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/components/base-edge.mdx
@@ -8,7 +8,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { baseEdgeProps } from '@/page-data/reference/components/BaseEdge.ts';
+import { baseEdgeProps } from '@/references/components/BaseEdge.ts';
# <BaseEdge />
diff --git a/sites/svelteflow.dev/src/pages/api-reference/components/control-button.mdx b/sites/svelteflow.dev/src/pages/api-reference/components/control-button.mdx
index a56c36902..3f5996be5 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/components/control-button.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/components/control-button.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { controlsProps } from '@/page-data/reference/components/Controls.ts';
+import { controlsProps } from '@/references/components/Controls.ts';
# <ControlButton />
diff --git a/sites/svelteflow.dev/src/pages/api-reference/components/controls.mdx b/sites/svelteflow.dev/src/pages/api-reference/components/controls.mdx
index b66269b41..70b7aab0c 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/components/controls.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/components/controls.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { controlsProps } from '@/page-data/reference/components/Controls.ts';
+import { controlsProps } from '@/references/components/Controls.ts';
# <Controls />
diff --git a/sites/svelteflow.dev/src/pages/api-reference/components/edge-label-renderer.mdx b/sites/svelteflow.dev/src/pages/api-reference/components/edge-label-renderer.mdx
index fe97a4e44..1a4f4a2cd 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/components/edge-label-renderer.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/components/edge-label-renderer.mdx
@@ -9,7 +9,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { edgeLabelRendererProps } from '@/page-data/reference/components/EdgeLabelRenderer.ts';
+import { edgeLabelRendererProps } from '@/references/components/EdgeLabelRenderer.ts';
# <EdgeLabelRenderer />
diff --git a/sites/svelteflow.dev/src/pages/api-reference/components/edge-label.mdx b/sites/svelteflow.dev/src/pages/api-reference/components/edge-label.mdx
index 6eee48896..c95298524 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/components/edge-label.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/components/edge-label.mdx
@@ -5,7 +5,7 @@ description: The Edge Label component can be used to add labels to edges.
---
import { PropsTable } from '@/components/props-table';
-import { edgeLabelProps } from '@/page-data/reference/components/EdgeLabel.ts';
+import { edgeLabelProps } from '@/references/components/EdgeLabel.ts';
# <EdgeLabel />
diff --git a/sites/svelteflow.dev/src/pages/api-reference/components/handle.mdx b/sites/svelteflow.dev/src/pages/api-reference/components/handle.mdx
index 6a17a0d53..29882586a 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/components/handle.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/components/handle.mdx
@@ -5,7 +5,7 @@ description: The Handle component is used in your custom nodes to define connect
---
import { PropsTable } from '@/components/props-table';
-import { handleProps } from '@/page-data/reference/components/Handle.ts';
+import { handleProps } from '@/references/components/Handle.ts';
# <Handle />
diff --git a/sites/svelteflow.dev/src/pages/api-reference/components/mini-map.mdx b/sites/svelteflow.dev/src/pages/api-reference/components/mini-map.mdx
index 5639fb85f..bfdc40819 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/components/mini-map.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/components/mini-map.mdx
@@ -12,7 +12,7 @@ import { PropsTable } from '@/components/props-table';
import {
miniMapProps,
miniMapNodeProps,
-} from '@/page-data/reference/components/MiniMap.ts';
+} from '@/references/components/MiniMap.ts';
# <MiniMap />
diff --git a/sites/svelteflow.dev/src/pages/api-reference/components/node-resize-control.mdx b/sites/svelteflow.dev/src/pages/api-reference/components/node-resize-control.mdx
index 5723bc9fa..649afb997 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/components/node-resize-control.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/components/node-resize-control.mdx
@@ -8,7 +8,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { nodeResizeControlProps } from '@/page-data/reference/components/NodeResizeControl.ts';
+import { nodeResizeControlProps } from '@/references/components/NodeResizeControl.ts';
# <NodeResizeControl />
diff --git a/sites/svelteflow.dev/src/pages/api-reference/components/node-resizer.mdx b/sites/svelteflow.dev/src/pages/api-reference/components/node-resizer.mdx
index 963854ba6..dd22c496e 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/components/node-resizer.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/components/node-resizer.mdx
@@ -9,7 +9,9 @@ description:
import { RemoteCodeViewer } from 'xy-shared';
import { PropsTable } from '@/components/props-table';
-import { nodeResizerProps } from '@/page-data/reference/components/NodeResizer.ts';
+import { nodeResizerProps } from '@/references/components/NodeResizer.ts';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/nodes/node-resizer']);
# <NodeResizer />
@@ -43,8 +45,7 @@ as `NodeResizerProps`.
Head over to the [example page](/examples/nodes/node-resizer) to see how this is done.
diff --git a/sites/svelteflow.dev/src/pages/api-reference/components/node-toolbar.mdx b/sites/svelteflow.dev/src/pages/api-reference/components/node-toolbar.mdx
index c4d8e3cca..e87034611 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/components/node-toolbar.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/components/node-toolbar.mdx
@@ -5,7 +5,7 @@ description: 'The NodeToolbar component can be used to display a toolbar on a si
---
import { PropsTable } from '@/components/props-table';
-import { nodetoolbarProps } from '@/page-data/reference/components/NodeToolbar.ts';
+import { nodetoolbarProps } from '@/references/components/NodeToolbar.ts';
# <NodeToolbar />
diff --git a/sites/svelteflow.dev/src/pages/api-reference/components/panel.mdx b/sites/svelteflow.dev/src/pages/api-reference/components/panel.mdx
index 990839980..cb1508201 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/components/panel.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/components/panel.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { panelProps } from '@/page-data/reference/components/Panel.ts';
+import { panelProps } from '@/references/components/Panel.ts';
# <Panel />
diff --git a/sites/svelteflow.dev/src/pages/api-reference/hooks/use-connection.mdx b/sites/svelteflow.dev/src/pages/api-reference/hooks/use-connection.mdx
index 7551740a8..4ecf8d455 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/hooks/use-connection.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/hooks/use-connection.mdx
@@ -8,7 +8,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useConnection.ts';
+import { signature } from '@/references/hooks/useConnection.ts';
# useConnection
diff --git a/sites/svelteflow.dev/src/pages/api-reference/hooks/use-edges.mdx b/sites/svelteflow.dev/src/pages/api-reference/hooks/use-edges.mdx
index 90365cddc..3085a1421 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/hooks/use-edges.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/hooks/use-edges.mdx
@@ -4,7 +4,7 @@ description: The useEdges hook returns an array of the current edges store.
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useEdges.ts';
+import { signature } from '@/references/hooks/useEdges.ts';
# useEdges
diff --git a/sites/svelteflow.dev/src/pages/api-reference/hooks/use-handle-connections.mdx b/sites/svelteflow.dev/src/pages/api-reference/hooks/use-handle-connections.mdx
index c149fedb3..adca321f3 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/hooks/use-handle-connections.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/hooks/use-handle-connections.mdx
@@ -4,7 +4,7 @@ description: This hook can be used to get notified when the connections of a han
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useHandleConnections.ts';
+import { signature } from '@/references/hooks/useHandleConnections.ts';
# useHandleConnections
diff --git a/sites/svelteflow.dev/src/pages/api-reference/hooks/use-internal-node.mdx b/sites/svelteflow.dev/src/pages/api-reference/hooks/use-internal-node.mdx
index 8d63dfabc..c586649e7 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/hooks/use-internal-node.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/hooks/use-internal-node.mdx
@@ -4,7 +4,7 @@ description: The useInternalNode hook returns an internal node.
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useInternalNode.ts';
+import { signature } from '@/references/hooks/useInternalNode.ts';
# useInternalNode
diff --git a/sites/svelteflow.dev/src/pages/api-reference/hooks/use-nodes-data.mdx b/sites/svelteflow.dev/src/pages/api-reference/hooks/use-nodes-data.mdx
index 761d8ea6f..703fcd313 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/hooks/use-nodes-data.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/hooks/use-nodes-data.mdx
@@ -4,7 +4,7 @@ description: With this hook you can receive the data of the passed node ids.
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useNodesData.ts';
+import { signature } from '@/references/hooks/useNodesData.ts';
# useNodesData
diff --git a/sites/svelteflow.dev/src/pages/api-reference/hooks/use-nodes-initialized.mdx b/sites/svelteflow.dev/src/pages/api-reference/hooks/use-nodes-initialized.mdx
index ded0b2254..a75884044 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/hooks/use-nodes-initialized.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/hooks/use-nodes-initialized.mdx
@@ -4,7 +4,7 @@ description: The useNodesInitialized hook can be used to check if all nodes are
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useNodesInitialized.ts';
+import { signature } from '@/references/hooks/useNodesInitialized.ts';
# useNodesInitialized
diff --git a/sites/svelteflow.dev/src/pages/api-reference/hooks/use-nodes.mdx b/sites/svelteflow.dev/src/pages/api-reference/hooks/use-nodes.mdx
index 3bf5505a8..cc384d6e5 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/hooks/use-nodes.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/hooks/use-nodes.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useNodes.ts';
+import { signature } from '@/references/hooks/useNodes.ts';
# useNodes
diff --git a/sites/svelteflow.dev/src/pages/api-reference/hooks/use-store.mdx b/sites/svelteflow.dev/src/pages/api-reference/hooks/use-store.mdx
index d0015afaa..b05d0899d 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/hooks/use-store.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/hooks/use-store.mdx
@@ -5,7 +5,7 @@ description: The useStore hook can be used to access the internal store of the S
import { Callout } from 'nextra/components';
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useStore.ts';
+import { signature } from '@/references/hooks/useStore.ts';
# useStore
diff --git a/sites/svelteflow.dev/src/pages/api-reference/hooks/use-svelte-flow.mdx b/sites/svelteflow.dev/src/pages/api-reference/hooks/use-svelte-flow.mdx
index 225012ab7..4ac913854 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/hooks/use-svelte-flow.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/hooks/use-svelte-flow.mdx
@@ -6,7 +6,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useSvelteFlow.ts';
+import { signature } from '@/references/hooks/useSvelteFlow.ts';
# useSvelteFlow
diff --git a/sites/svelteflow.dev/src/pages/api-reference/hooks/use-update-node-internals.mdx b/sites/svelteflow.dev/src/pages/api-reference/hooks/use-update-node-internals.mdx
index e252b474f..a13977824 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/hooks/use-update-node-internals.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/hooks/use-update-node-internals.mdx
@@ -8,7 +8,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/hooks/useUpdateNodeInternals.ts';
+import { signature } from '@/references/hooks/useUpdateNodeInternals.ts';
# useUpdateNodeInternals
diff --git a/sites/svelteflow.dev/src/pages/api-reference/svelte-flow.mdx b/sites/svelteflow.dev/src/pages/api-reference/svelte-flow.mdx
index 8b43a898c..3a13b8720 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/svelte-flow.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/svelte-flow.mdx
@@ -16,7 +16,7 @@ import {
interactionProps,
connectionLineProps,
keyboardProps,
-} from '@/page-data/reference/SvelteFlow.ts';
+} from '@/references/SvelteFlow.ts';
# <SvelteFlow />
diff --git a/sites/svelteflow.dev/src/pages/api-reference/types/connection.mdx b/sites/svelteflow.dev/src/pages/api-reference/types/connection.mdx
index 47c304002..dda23b2ac 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/types/connection.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/types/connection.mdx
@@ -4,7 +4,7 @@ description: The Connection type is the basic minimal description of an Edge bet
---
import { PropsTable } from '@/components/props-table';
-import { connectionFields } from '@/page-data/reference/types/Connection.fields.ts';
+import { connectionFields } from '@/references/types/Connection.fields.ts';
# Connection
diff --git a/sites/svelteflow.dev/src/pages/api-reference/types/default-edge-options.mdx b/sites/svelteflow.dev/src/pages/api-reference/types/default-edge-options.mdx
index 0f25caade..9747cee61 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/types/default-edge-options.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/types/default-edge-options.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { defaultEdgeOptionsFields } from '@/page-data/reference/types/DefaultEdgeOptions.fields.ts';
+import { defaultEdgeOptionsFields } from '@/references/types/DefaultEdgeOptions.fields.ts';
# DefaultEdgeOptions
diff --git a/sites/svelteflow.dev/src/pages/api-reference/types/edge-marker.mdx b/sites/svelteflow.dev/src/pages/api-reference/types/edge-marker.mdx
index 1c5310ab4..0c11af0c7 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/types/edge-marker.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/types/edge-marker.mdx
@@ -4,7 +4,7 @@ description: You can customize the built-in edge markers with the edgeMarker pro
---
import { PropsTable } from '@/components/props-table';
-import { edgeMarkerFields } from '@/page-data/reference/types/EdgeMarker.ts';
+import { edgeMarkerFields } from '@/references/types/EdgeMarker.ts';
# EdgeMarker
diff --git a/sites/svelteflow.dev/src/pages/api-reference/types/edge-props.mdx b/sites/svelteflow.dev/src/pages/api-reference/types/edge-props.mdx
index cb5fcb0cd..b968d605e 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/types/edge-props.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/types/edge-props.mdx
@@ -6,7 +6,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { edgePropsFields } from '@/page-data/reference/types/EdgeProps.ts';
+import { edgePropsFields } from '@/references/types/EdgeProps.ts';
# EdgeProps
diff --git a/sites/svelteflow.dev/src/pages/api-reference/types/edge.mdx b/sites/svelteflow.dev/src/pages/api-reference/types/edge.mdx
index b6227b7af..127f1c228 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/types/edge.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/types/edge.mdx
@@ -10,7 +10,7 @@ import {
defaultEdgeFields,
smoothStepEdgeTypeFields,
bezierEdgeTypeFields,
-} from '@/page-data/reference/types/Edge.fields.ts';
+} from '@/references/types/Edge.fields.ts';
# Edge<T>
diff --git a/sites/svelteflow.dev/src/pages/api-reference/types/fit-view-options.mdx b/sites/svelteflow.dev/src/pages/api-reference/types/fit-view-options.mdx
index 57102c6a3..51aeeb59f 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/types/fit-view-options.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/types/fit-view-options.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { fitViewOptionsFields } from '@/page-data/reference/types/FitViewOptions.ts';
+import { fitViewOptionsFields } from '@/references/types/FitViewOptions.ts';
# FitViewOptions
diff --git a/sites/svelteflow.dev/src/pages/api-reference/types/internal-node.mdx b/sites/svelteflow.dev/src/pages/api-reference/types/internal-node.mdx
index 7877cee8f..6f1b74487 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/types/internal-node.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/types/internal-node.mdx
@@ -4,7 +4,7 @@ description: The internal node is an extension of the user nod. It is used inter
---
import { PropsTable } from '@/components/props-table';
-import { nodeFields } from '@/page-data/reference/types/Node.fields.ts';
+import { nodeFields } from '@/references/types/Node.fields.ts';
# InternalNode<NodeType>
diff --git a/sites/svelteflow.dev/src/pages/api-reference/types/key-definition.mdx b/sites/svelteflow.dev/src/pages/api-reference/types/key-definition.mdx
index acd681abd..4cfbe07d4 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/types/key-definition.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/types/key-definition.mdx
@@ -4,7 +4,7 @@ description: A key definition is a string or an object that describes a key and
---
import { PropsTable } from '@/components/props-table';
-import { connectionFields } from '@/page-data/reference/types/Connection.fields.ts';
+import { connectionFields } from '@/references/types/Connection.fields.ts';
# KeyDefinition
diff --git a/sites/svelteflow.dev/src/pages/api-reference/types/node-props.mdx b/sites/svelteflow.dev/src/pages/api-reference/types/node-props.mdx
index 6dbabf439..7bfa5fe79 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/types/node-props.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/types/node-props.mdx
@@ -8,7 +8,7 @@ description:
import { Callout } from 'nextra/components';
import { PropsTable } from '@/components/props-table';
-import { nodePropsFields } from '@/page-data/reference/types/NodeProps.fields.ts';
+import { nodePropsFields } from '@/references/types/NodeProps.fields.ts';
# NodeProps
diff --git a/sites/svelteflow.dev/src/pages/api-reference/types/node.mdx b/sites/svelteflow.dev/src/pages/api-reference/types/node.mdx
index e57e0f590..0f9e40ed9 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/types/node.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/types/node.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { nodeFields } from '@/page-data/reference/types/Node.fields.ts';
+import { nodeFields } from '@/references/types/Node.fields.ts';
# Node<NodeData, NodeType>
diff --git a/sites/svelteflow.dev/src/pages/api-reference/types/svelte-flow-store.mdx b/sites/svelteflow.dev/src/pages/api-reference/types/svelte-flow-store.mdx
index ae2041b56..be4eac531 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/types/svelte-flow-store.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/types/svelte-flow-store.mdx
@@ -5,7 +5,7 @@ description: The internal data structure of the Svelte Flow store.
import { Callout } from 'nextra/components';
import { PropsTable } from '@/components/props-table';
-import { svelteFlowStoreFields } from '@/page-data/reference/types/SvelteFlowStore.ts';
+import { svelteFlowStoreFields } from '@/references/types/SvelteFlowStore.ts';
# SvelteFlowStore
diff --git a/sites/svelteflow.dev/src/pages/api-reference/types/viewport.mdx b/sites/svelteflow.dev/src/pages/api-reference/types/viewport.mdx
index 07691a118..8315be211 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/types/viewport.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/types/viewport.mdx
@@ -6,7 +6,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { viewportFields } from '@/page-data/reference/types/Viewport.fields.ts';
+import { viewportFields } from '@/references/types/Viewport.fields.ts';
# Viewport
diff --git a/sites/svelteflow.dev/src/pages/api-reference/utils/add-edge.mdx b/sites/svelteflow.dev/src/pages/api-reference/utils/add-edge.mdx
index 0981f9df8..d4ccd0dd2 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/utils/add-edge.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/utils/add-edge.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/addEdge.ts';
+import { signature } from '@/references/utils/addEdge.ts';
# addEdge()
diff --git a/sites/svelteflow.dev/src/pages/api-reference/utils/get-bezier-path.mdx b/sites/svelteflow.dev/src/pages/api-reference/utils/get-bezier-path.mdx
index 6848222cc..cdc98731e 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/utils/get-bezier-path.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/utils/get-bezier-path.mdx
@@ -6,7 +6,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/getBezierPath.ts';
+import { signature } from '@/references/utils/getBezierPath.ts';
# getBezierPath()
diff --git a/sites/svelteflow.dev/src/pages/api-reference/utils/get-connected-edges.mdx b/sites/svelteflow.dev/src/pages/api-reference/utils/get-connected-edges.mdx
index 03d25a4e5..ff3d9c871 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/utils/get-connected-edges.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/utils/get-connected-edges.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/getConnectedEdges.ts';
+import { signature } from '@/references/utils/getConnectedEdges.ts';
# getConnectedEdges()
diff --git a/sites/svelteflow.dev/src/pages/api-reference/utils/get-incomers.mdx b/sites/svelteflow.dev/src/pages/api-reference/utils/get-incomers.mdx
index 6c5c8721d..124b6d7b7 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/utils/get-incomers.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/utils/get-incomers.mdx
@@ -6,7 +6,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/getIncomers.ts';
+import { signature } from '@/references/utils/getIncomers.ts';
# getIncomers()
diff --git a/sites/svelteflow.dev/src/pages/api-reference/utils/get-nodes-bounds.mdx b/sites/svelteflow.dev/src/pages/api-reference/utils/get-nodes-bounds.mdx
index 5475ca916..4a9ede0a0 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/utils/get-nodes-bounds.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/utils/get-nodes-bounds.mdx
@@ -8,7 +8,7 @@ description:
import { Callout } from 'nextra/components';
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/getRectOfNodes.ts';
+import { signature } from '@/references/utils/getRectOfNodes.ts';
# getNodesBounds()
diff --git a/sites/svelteflow.dev/src/pages/api-reference/utils/get-outgoers.mdx b/sites/svelteflow.dev/src/pages/api-reference/utils/get-outgoers.mdx
index cebc7e96a..d25734f6f 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/utils/get-outgoers.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/utils/get-outgoers.mdx
@@ -6,7 +6,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/getOutgoers.ts';
+import { signature } from '@/references/utils/getOutgoers.ts';
# getOutgoers()
diff --git a/sites/svelteflow.dev/src/pages/api-reference/utils/get-simple-bezier-path.mdx b/sites/svelteflow.dev/src/pages/api-reference/utils/get-simple-bezier-path.mdx
index f56a05db0..71a09b5d5 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/utils/get-simple-bezier-path.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/utils/get-simple-bezier-path.mdx
@@ -6,7 +6,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/getSimpleBezierPath.ts';
+import { signature } from '@/references/utils/getSimpleBezierPath.ts';
# getSimpleBezierPath()
diff --git a/sites/svelteflow.dev/src/pages/api-reference/utils/get-smooth-step-path.mdx b/sites/svelteflow.dev/src/pages/api-reference/utils/get-smooth-step-path.mdx
index 3cb1edb22..2ff90aa1c 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/utils/get-smooth-step-path.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/utils/get-smooth-step-path.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/getSmoothStepPath.ts';
+import { signature } from '@/references/utils/getSmoothStepPath.ts';
# getSmoothStepPath()
diff --git a/sites/svelteflow.dev/src/pages/api-reference/utils/get-straight-path.mdx b/sites/svelteflow.dev/src/pages/api-reference/utils/get-straight-path.mdx
index e621a810f..6c101c938 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/utils/get-straight-path.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/utils/get-straight-path.mdx
@@ -4,7 +4,7 @@ description: 'Calculates the straight line path between two points.'
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/getStraightPath.ts';
+import { signature } from '@/references/utils/getStraightPath.ts';
# getStraightPath()
diff --git a/sites/svelteflow.dev/src/pages/api-reference/utils/get-viewport-for-bounds.mdx b/sites/svelteflow.dev/src/pages/api-reference/utils/get-viewport-for-bounds.mdx
index b9116284d..8ee06d4ea 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/utils/get-viewport-for-bounds.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/utils/get-viewport-for-bounds.mdx
@@ -7,7 +7,7 @@ description: 'This util returns the viewport for the given bounds.
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/getViewportForBounds.ts';
+import { signature } from '@/references/utils/getViewportForBounds.ts';
# getViewportForBounds()
diff --git a/sites/svelteflow.dev/src/pages/api-reference/utils/is-edge.mdx b/sites/svelteflow.dev/src/pages/api-reference/utils/is-edge.mdx
index 0856409dc..12543a98e 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/utils/is-edge.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/utils/is-edge.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/isEdge.ts';
+import { signature } from '@/references/utils/isEdge.ts';
# isEdge()
diff --git a/sites/svelteflow.dev/src/pages/api-reference/utils/is-node.mdx b/sites/svelteflow.dev/src/pages/api-reference/utils/is-node.mdx
index 17f3b07d9..31014b391 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/utils/is-node.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/utils/is-node.mdx
@@ -7,7 +7,7 @@ description:
---
import { PropsTable } from '@/components/props-table';
-import { signature } from '@/page-data/reference/utils/isNode.ts';
+import { signature } from '@/references/utils/isNode.ts';
# isNode()
diff --git a/sites/svelteflow.dev/src/pages/examples/edges/custom-connectionline.mdx b/sites/svelteflow.dev/src/pages/examples/edges/custom-connectionline.mdx
index 53f1b9401..ee14a66a3 100644
--- a/sites/svelteflow.dev/src/pages/examples/edges/custom-connectionline.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/edges/custom-connectionline.mdx
@@ -3,16 +3,20 @@ title: Connection Line
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
import UnusedPropWarning from '@/components/unused-prop-warning';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/edges/custom-connectionline']);
+
+
A Connection Line is what you see when you click and drag out from a handle. It represents a possible edge and can snap to valid handles in close proximity.
You can implement your own Connection Line by passing a Svelte component with `slot="connectionLine"`. The `useConnection` hook gives you access to the current `connection`.
diff --git a/sites/svelteflow.dev/src/pages/examples/edges/custom-edges.mdx b/sites/svelteflow.dev/src/pages/examples/edges/custom-edges.mdx
index 0897ba9dc..b4a0ba9f0 100644
--- a/sites/svelteflow.dev/src/pages/examples/edges/custom-edges.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/edges/custom-edges.mdx
@@ -4,14 +4,18 @@ description: Svelte Flow has four edge types- bezier, straight, step and smooths
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/edges/custom-edges']);
+
Svelte Flow comes with four different edge types - `default` (bezier), `straight`, `step` and `smoothstep`. It's also possible to create a [custom edge](/api-reference/types/edge-props), if you need a special edge routing or controls at the edge. In this example we are demonstrating how to implement an edge with a button, a bi-directional edge, a self connecting edge. In all examples we are using the [BaseEdge](/api-reference/components/base-edge) component as a helper.
diff --git a/sites/svelteflow.dev/src/pages/examples/edges/edge-label-renderer.mdx b/sites/svelteflow.dev/src/pages/examples/edges/edge-label-renderer.mdx
index 2b4eeae8e..0c82c728b 100644
--- a/sites/svelteflow.dev/src/pages/examples/edges/edge-label-renderer.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/edges/edge-label-renderer.mdx
@@ -3,15 +3,19 @@ title: Edge Label Renderer
description: The EdgeLabelRenderer component can be used to render labels
---
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
import { RemoteCodeViewer } from 'xy-shared';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/edges/edge-label-renderer']);
+
+
If you need more control of your edge labels, you can use the `EdgeLabelRenderer` component. It's a portal component that lets you render edge labels as divs on top of the edges. If you want to add mouse interactions you need to set `pointer-events: all` on the label.
diff --git a/sites/svelteflow.dev/src/pages/examples/edges/edge-markers.mdx b/sites/svelteflow.dev/src/pages/examples/edges/edge-markers.mdx
index 4356564c9..4ae0c44ab 100644
--- a/sites/svelteflow.dev/src/pages/examples/edges/edge-markers.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/edges/edge-markers.mdx
@@ -4,14 +4,18 @@ description: Example for demonstrating edge markers in Svelte Flow.
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/edges/edge-markers']);
+
Svelte Flow has built-in support for different marker types for your edges. It's possible to add your own [SVG markers](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker), too.
diff --git a/sites/svelteflow.dev/src/pages/examples/edges/edge-types.mdx b/sites/svelteflow.dev/src/pages/examples/edges/edge-types.mdx
index e6f29035f..3c6e17c6e 100644
--- a/sites/svelteflow.dev/src/pages/examples/edges/edge-types.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/edges/edge-types.mdx
@@ -3,15 +3,19 @@ title: Edge Types
description: example showing different kinds of edge types in svelte flow
---
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
import { RemoteCodeViewer } from 'xy-shared';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/edges/edge-types']);
+
+
You can choose different kinds of [edge types](/api-reference/types/edge) in Svelte Flow: `default` (bezier), `straight`, `step` and `smoothstep`. As you can see, you can define a type for each edge and mix them in one graph.
diff --git a/sites/svelteflow.dev/src/pages/examples/edges/simple-floating-edges.mdx b/sites/svelteflow.dev/src/pages/examples/edges/simple-floating-edges.mdx
index 2a3686f54..b2be04935 100644
--- a/sites/svelteflow.dev/src/pages/examples/edges/simple-floating-edges.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/edges/simple-floating-edges.mdx
@@ -3,15 +3,19 @@ title: Simple Floating Edges
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
import UnusedPropWarning from '@/components/unused-prop-warning';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/edges/simple-floating-edges']);
+
+
This example shows how to implement an edge type that dynamically connects to the closest handle.
diff --git a/sites/svelteflow.dev/src/pages/examples/index.mdx b/sites/svelteflow.dev/src/pages/examples/index.mdx
index cf97dea15..add21be6c 100644
--- a/sites/svelteflow.dev/src/pages/examples/index.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/index.mdx
@@ -3,7 +3,7 @@ title: Examples
description: Overview of React Flow examples for practical copy-paste solutions to common use cases.
---
-import ExamplesOverviewPage from '@/sites/examples/overview';
+import ExamplesOverviewPage from '@/layouts/examples/overview';
# Examples
diff --git a/sites/svelteflow.dev/src/pages/examples/interaction/computing-flows.mdx b/sites/svelteflow.dev/src/pages/examples/interaction/computing-flows.mdx
index a919d7ae9..7a7c2c8e6 100644
--- a/sites/svelteflow.dev/src/pages/examples/interaction/computing-flows.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/interaction/computing-flows.mdx
@@ -3,15 +3,18 @@ title: Computing Flows
description: This example combines some hooks and helper functions for computing the data flow between nodes.
---
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
import { RemoteCodeViewer } from 'xy-shared';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/interaction/computing-flows']);
+
+
This example combines [`useHandleConnections`](/api-reference/hooks/use-handle-connections),[`useNodesData`](/api-reference/hooks/use-nodes-data) and [`updateNodeData`](/api-reference/hooks/use-svelte-flow) helpers for handling data flow between nodes.
The [onNodeContextMenu](/api-reference/svelte-flow#event-on:nodecontextmenu) event can be used to show a custom menu when right-clicking a node. This example shows a simple menu with buttons to duplicate or delete the clicked node.
This example shows how the current zoom level can be used by a node to decide which content to show.
We can access the zoom inside the viewport writable via the [`useSvelteStore` hook](/api-reference/hooks/use-svelte-flow) to update our custom node whenever the zoom changes.
diff --git a/sites/svelteflow.dev/src/pages/examples/interaction/drag-and-drop.mdx b/sites/svelteflow.dev/src/pages/examples/interaction/drag-and-drop.mdx
index d903f8779..7fdcd225c 100644
--- a/sites/svelteflow.dev/src/pages/examples/interaction/drag-and-drop.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/interaction/drag-and-drop.mdx
@@ -3,15 +3,19 @@ title: Drag and Drop
description: This example shows how to implement a sidebar with a drag and drop functionality.
---
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
import { RemoteCodeViewer } from 'xy-shared';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/interaction/drag-and-drop']);
+
+
This example shows how to implement a sidebar with a drag and drop functionality using the native [drag and drop events](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API).
For validating new connections between nodes, you can use the `isValidConnection` prop as shown in this example.
-
diff --git a/sites/svelteflow.dev/src/pages/examples/layout/dagre.mdx b/sites/svelteflow.dev/src/pages/examples/layout/dagre.mdx
index a8894f32d..8c1d373d2 100644
--- a/sites/svelteflow.dev/src/pages/examples/layout/dagre.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/layout/dagre.mdx
@@ -4,16 +4,16 @@ description: You can integrate dagre.js with Svelte Flow to create tree layouts.
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/layout/dagre']);
+
This example shows how you can integrate [dagre.js](https://github.com/dagrejs/dagre) with Svelte Flow to create simple tree layouts. Good alternatives to dagre are [d3-hierarchy](https://github.com/d3/d3-hierarchy) or [elkjs](https://github.com/kieler/elkjs) if you are looking for a more advanced layouting library.
-
Like our [dagre example](examples/layout/dagre), this example shows how you can integrate [elkjs](https://github.com/kieler/elkjs) with Svelte Flow for more advanced tree layouts. The code for this example builds a similar tree to the dagre example, but you can look at the reference [here](https://www.eclipse.org/elk/reference.html) to see what you can configure (hint: it's a lot).
A diagram can go from left to right or from top to bottom, but you can also create mixed ones.
For controlling the direction of a diagram you can adjust the handle positions of a node with the [`sourcePosition` and `targetPosition`](/api-reference/types/node#sourceposition?) props.
-
diff --git a/sites/svelteflow.dev/src/pages/examples/layout/subflows.mdx b/sites/svelteflow.dev/src/pages/examples/layout/subflows.mdx
index b34f4874f..a8b7181b3 100644
--- a/sites/svelteflow.dev/src/pages/examples/layout/subflows.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/layout/subflows.mdx
@@ -3,16 +3,15 @@ title: Subflows
description: You can create nested flows - known as subflows - with Svelte Flow. Here you can see how to implement them.
---
-import ExampleLayout from '@/layouts/example-with-frontmatter';
-import { RemoteCodeViewer } from 'xy-shared';
+import { RemoteCodeViewer, ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/layout/subflows']);
+
Svelte Flow supports rendering nested graphs and grouping of nodes. You can configure the behaviour of the child nodes using `extent: parent` and render group elements without handles by passing `type: group` to the node configuration. See [Sub Flows](/learn/guides/sub-flows) for more information.
-
diff --git a/sites/svelteflow.dev/src/pages/examples/misc/download-image.mdx b/sites/svelteflow.dev/src/pages/examples/misc/download-image.mdx
index ddfba1e0c..dbe48da6a 100644
--- a/sites/svelteflow.dev/src/pages/examples/misc/download-image.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/misc/download-image.mdx
@@ -3,14 +3,18 @@ title: Download Image
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/misc/download-image']);
+
This example shows how to download a flow as an image with [html-to-image](https://github.com/bubkoo/html-to-image).
diff --git a/sites/svelteflow.dev/src/pages/examples/misc/threlte-flow.mdx b/sites/svelteflow.dev/src/pages/examples/misc/threlte-flow.mdx
index e4b67d7af..9ab88bba7 100644
--- a/sites/svelteflow.dev/src/pages/examples/misc/threlte-flow.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/misc/threlte-flow.mdx
@@ -4,18 +4,18 @@ description: This example shows how you can use Svelte Flow in combination with
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
import UnusedPropWarning from '@/components/unused-prop-warning';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/misc/threlte-flow']);
+
+
You may have noticed that the hero flow on our [our homepage](/) is actually written in React 🙈.
For all the non-believers, here it is written in Svelte with help from the [amazing Threlte library](https://threlte.xyz/).
-
diff --git a/sites/svelteflow.dev/src/pages/examples/misc/use-svelte-flow.mdx b/sites/svelteflow.dev/src/pages/examples/misc/use-svelte-flow.mdx
index f88c73d83..35627f55a 100644
--- a/sites/svelteflow.dev/src/pages/examples/misc/use-svelte-flow.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/misc/use-svelte-flow.mdx
@@ -3,15 +3,18 @@ title: useSvelteFlow
description: The useSvelteFlow hook gives you access to the Svelte Flow store and provides some functions for updating the viewport.
---
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
import { RemoteCodeViewer } from 'xy-shared';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/misc/use-svelte-flow']);
+
+
The `useSvelteFlow` hook gives you access to the Svelte Flow store and provides some functions for updating the viewport.
You can create a new node when you drop the connection line on the pane by using the `onConnectionStart` and `onConnectionStop` handlers.
diff --git a/sites/svelteflow.dev/src/pages/examples/nodes/connection-limit.mdx b/sites/svelteflow.dev/src/pages/examples/nodes/connection-limit.mdx
index ed93dfd48..89b03c3de 100644
--- a/sites/svelteflow.dev/src/pages/examples/nodes/connection-limit.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/nodes/connection-limit.mdx
@@ -3,20 +3,20 @@ title: Connection Limit
description: This is an example of a custom node limiting the amount of connections a handle can have using the `isConnectalbe` prop.
---
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
import { RemoteCodeViewer } from 'xy-shared';
import UnusedPropWarning from '@/components/unused-prop-warning';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/nodes/connection-limit']);
+
+
This is an example of a custom node with a custom handle that can limit the amount of connections a handle can have using the `isConnectable` prop.
You can use a boolean, a number (the number of max. connections the handle should have) or a callback function that returns a boolean
as an arg for the `isConnectable` prop of the CustomHandle component.
-
diff --git a/sites/svelteflow.dev/src/pages/examples/nodes/custom-node.mdx b/sites/svelteflow.dev/src/pages/examples/nodes/custom-node.mdx
index 635920a2a..cdac085a7 100644
--- a/sites/svelteflow.dev/src/pages/examples/nodes/custom-node.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/nodes/custom-node.mdx
@@ -3,16 +3,20 @@ title: Custom Nodes
description: This is an example of a custom node implementation. Svelte Flow nodes are Svelte components, and you can display any content that you want.
---
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
import { RemoteCodeViewer } from 'xy-shared';
import UnusedPropWarning from '@/components/unused-prop-warning';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/nodes/custom-node']);
+
+
Creating your own nodes is as easy as creating a regular Svelte component and passing them to `nodeTypes`. Being just regular components, you can essentially display any content and implement any functionality you like. Inside, you have access to a number of props that let you implement and extend default node behaviour.
diff --git a/sites/svelteflow.dev/src/pages/examples/nodes/drag-handle.mdx b/sites/svelteflow.dev/src/pages/examples/nodes/drag-handle.mdx
index e2dd9a96e..d9a8cec8f 100644
--- a/sites/svelteflow.dev/src/pages/examples/nodes/drag-handle.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/nodes/drag-handle.mdx
@@ -2,16 +2,20 @@
title: Drag Handle
---
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
import { RemoteCodeViewer } from 'xy-shared';
import UnusedPropWarning from '@/components/unused-prop-warning';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/nodes/drag-handle']);
+
+
You can restrict dragging to a specific part of node, by specifiying a class that will act as a [`dragHandle`](/api-reference/types/node).
diff --git a/sites/svelteflow.dev/src/pages/examples/nodes/easy-connect.mdx b/sites/svelteflow.dev/src/pages/examples/nodes/easy-connect.mdx
index 96ee42b05..5ab65352e 100644
--- a/sites/svelteflow.dev/src/pages/examples/nodes/easy-connect.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/nodes/easy-connect.mdx
@@ -2,18 +2,22 @@
title: Easy Connect
---
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
import { RemoteCodeViewer } from 'xy-shared';
import UnusedPropWarning from '@/components/unused-prop-warning';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/nodes/easy-connect']);
+
+
Fed up with tiny little connection handles? Make your whole node act as one!
Keep in mind though that you need to define seperate drag handles in this case
to still be able to drag the node.
diff --git a/sites/svelteflow.dev/src/pages/examples/nodes/intersections.mdx b/sites/svelteflow.dev/src/pages/examples/nodes/intersections.mdx
index 135feef0c..569f6cdff 100644
--- a/sites/svelteflow.dev/src/pages/examples/nodes/intersections.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/nodes/intersections.mdx
@@ -2,15 +2,19 @@
title: Intersections
---
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
import { RemoteCodeViewer } from 'xy-shared';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/nodes/intersections']);
+
+
The `useSvelteFlow` hook exports helpers to check intersections of nodes and areas. In this example you can drag a node and get a visual feedback when it intersects with another node.
diff --git a/sites/svelteflow.dev/src/pages/examples/nodes/node-resizer.mdx b/sites/svelteflow.dev/src/pages/examples/nodes/node-resizer.mdx
index 954cabccc..214414f7d 100644
--- a/sites/svelteflow.dev/src/pages/examples/nodes/node-resizer.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/nodes/node-resizer.mdx
@@ -3,15 +3,19 @@ title: Node Resizer
created_at: 2024-01-11
---
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
import { RemoteCodeViewer } from 'xy-shared';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/nodes/node-resizer']);
+
+
The [`
diff --git a/sites/svelteflow.dev/src/pages/examples/nodes/proximity-connect.mdx b/sites/svelteflow.dev/src/pages/examples/nodes/proximity-connect.mdx
index aeb655898..c0ae4584b 100644
--- a/sites/svelteflow.dev/src/pages/examples/nodes/proximity-connect.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/nodes/proximity-connect.mdx
@@ -3,15 +3,19 @@ title: Proximity Connect
description: Example showing how to automatically create edges when nodes get close to each other
---
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
import { RemoteCodeViewer } from 'xy-shared';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/nodes/proximity-connect']);
+
+
This example shows how to automatically create edges when a node is dropped in close proximity to another one. While dragging, a dotted connection line is displayed to show which edge will be created if you drop the node.
diff --git a/sites/svelteflow.dev/src/pages/examples/nodes/stress.mdx b/sites/svelteflow.dev/src/pages/examples/nodes/stress.mdx
index c7a6b4100..7ab9f6f02 100644
--- a/sites/svelteflow.dev/src/pages/examples/nodes/stress.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/nodes/stress.mdx
@@ -3,15 +3,19 @@ title: Stress Test
description: A stress test with a lot of nodes and edges.
---
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
import { RemoteCodeViewer } from 'xy-shared';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/nodes/stress']);
+
+
This example shows a flow with 450 nodes and edges.
diff --git a/sites/svelteflow.dev/src/pages/examples/nodes/update-node.mdx b/sites/svelteflow.dev/src/pages/examples/nodes/update-node.mdx
index cf9ee689d..e4ca383fb 100644
--- a/sites/svelteflow.dev/src/pages/examples/nodes/update-node.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/nodes/update-node.mdx
@@ -3,10 +3,14 @@ title: Updating Nodes
description: This example shows how to update the data field of a specific node.
---
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
import { RemoteCodeViewer } from 'xy-shared';
import { Callout } from 'nextra/components';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/nodes/update-node']);
+
+
You can update properties of nodes and edges freely.Don't forget to [self
assign](https://svelte.dev/docs/svelte-components#script-2-assignments-are-reactive)
@@ -17,10 +21,6 @@ import { Callout } from 'nextra/components';
diff --git a/sites/svelteflow.dev/src/pages/examples/overview.mdx b/sites/svelteflow.dev/src/pages/examples/overview.mdx
index 315f68297..b4fc98eec 100644
--- a/sites/svelteflow.dev/src/pages/examples/overview.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/overview.mdx
@@ -3,17 +3,17 @@ title: Feature Overview
description: An feature overview example showing the most used features of Svelte Flow - controls, MiniMap, node types, edge types, edge labels, and custom styling.
---
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
import { RemoteCodeViewer } from 'xy-shared';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/misc/feature-overview']);
+
+
This is a overview example with all the built in features of Svelte Flow.
You can see different node types (input, default, output), edge types (bezier, step and smoothstep), edge labels and custom styled edge labels. On the bottom left you see the [Controls](/api-reference/components/controls) and on the bottom right the [MiniMap component](/api-reference/components/mini-map).
-
diff --git a/sites/svelteflow.dev/src/pages/examples/styling/base-style.mdx b/sites/svelteflow.dev/src/pages/examples/styling/base-style.mdx
index 6540b0ae7..3cfe73d16 100644
--- a/sites/svelteflow.dev/src/pages/examples/styling/base-style.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/styling/base-style.mdx
@@ -4,14 +4,18 @@ description: Svelte Flow comes with a default style and a base style. This examp
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/styling/base-style']);
+
Svelte Flow comes with a default style and a minimal base style (used in this example). The base style is mandatory for a flow to work. You can find more information about how to style a flow in the [theming guide](/learn/guides/theming).
diff --git a/sites/svelteflow.dev/src/pages/examples/styling/dark-mode.mdx b/sites/svelteflow.dev/src/pages/examples/styling/dark-mode.mdx
index 7601e9b9b..e38f53099 100644
--- a/sites/svelteflow.dev/src/pages/examples/styling/dark-mode.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/styling/dark-mode.mdx
@@ -4,14 +4,18 @@ description: Svelte Flow comes with a default style and a base style. This examp
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/styling/dark-mode']);
+
Svelte Flow comes with a built-in light & dark mode. You can set the [`colorMode`](/api-reference/svelte-flow#color-mode) prop that allows you to switch between `'dark'`, `'light'` and `'system'`.
diff --git a/sites/svelteflow.dev/src/pages/examples/styling/tailwind.mdx b/sites/svelteflow.dev/src/pages/examples/styling/tailwind.mdx
index 763d7fecf..b11416618 100644
--- a/sites/svelteflow.dev/src/pages/examples/styling/tailwind.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/styling/tailwind.mdx
@@ -4,15 +4,17 @@ description: In this example we demonstrate how to use tailwind for styling a fl
---
import { RemoteCodeViewer } from 'xy-shared';
-import ExampleLayout from '@/layouts/example-with-frontmatter';
+import { ExampleLayout } from 'xy-shared';
import UnusedPropWarning from '@/components/unused-prop-warning';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['examples/styling/tailwind']);
+
You can use third party libraries to style your flows. In this example we are using [tailwind](https://tailwindcss.com/).
Every part of the Svelte Flow UI is customizable. As the name implies the look is taken from the beautiful [turbo.build](https://turbo.build/pack/docs/core-concepts#function-level-caching) website. You can find more information about custom styles in the [theming guide](/learn/guides/theming). (Svelte Flow uses Turborepo and we love it 💜)
-
-
-```bash copy
+```bash copy npm2yarn
npm install @xyflow/svelte
```
-
-
-
-```bash copy
-pnpm add @xyflow/svelte
-```
-
-
-
-
-```bash copy
-yarn add @xyflow/svelte
-```
-
-
-
-
-```bash copy
-bun add @xyflow/svelte
-```
-
-
-
-
Now you can import the Svelte Flow component and the styles in your application:
```js
diff --git a/sites/svelteflow.dev/src/pages/learn/guides/custom-nodes.mdx b/sites/svelteflow.dev/src/pages/learn/guides/custom-nodes.mdx
index ffea0fd79..e55954a0a 100644
--- a/sites/svelteflow.dev/src/pages/learn/guides/custom-nodes.mdx
+++ b/sites/svelteflow.dev/src/pages/learn/guides/custom-nodes.mdx
@@ -6,6 +6,12 @@ description: Step by step guide about how to work with custom nodes in Svelte Fl
import { Callout } from 'nextra/components';
import { RemoteCodeViewer } from 'xy-shared';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode([
+ 'guides/custom-nodes/a',
+ 'guides/custom-nodes/b',
+]);
+
# Custom Nodes
A powerful feature of Svelte Flow is the ability to add custom nodes. You can render everything you want in your custom nodes. You can define multiple source and target handles and render form inputs or even interactive charts. In this guide we will implement two nodes with color input fields that update the background color of the flow.
@@ -55,6 +61,7 @@ You can add a new node type to Svelte Flow by adding it to the [`nodeTypes` prop
import { SvelteFlow } from '@xyflow/svelte';
import ColorPickerNode from './ColorPickerNode.svelte';
+
const nodeTypes = {
'color-picker': ColorPickerNode
};
@@ -81,8 +88,7 @@ const nodes = writable([
The `data` field of a node can be used to store whatever data you like. In this case we are storing the current color value in a [writable store](https://svelte.dev/docs/svelte-store#writable). This makes it easy to update it from within the custom node later. After putting it all together and adding some basic styles, we get a nice looking custom node with a color picker.
Order of Nodes:
- It's important that your parent nodes appear before their children in the `nodes`
- array to get processed correctly.
+ It's important that your parent nodes appear before their children in the
+ `nodes` array to get processed correctly.
### Defining child nodes
@@ -42,8 +46,7 @@ const nodes = writable([
In the following example, we define a fixed width and height of the parent node by using the `style` option. Additionally, we configure the child extent to 'parent' to restrict the movement of child nodes beyond the boundaries of the parent node.
-
- ```bash copy
- npm install @xyflow/svelte
- ```
-
-
-
- ```bash copy
- pnpm add @xyflow/svelte
- ```
-
-
-
- ```bash copy
- yarn add @xyflow/svelte
- ```
-
-
-
- ```bash copy
- bun add @xyflow/svelte
- ```
-
-
-
+```bash copy npm2yarn
+npm install @xyflow/svelte
+```
## Creating your first flow
diff --git a/sites/svelteflow.dev/src/pages/showcase.mdx b/sites/svelteflow.dev/src/pages/showcase.mdx
index ca95a7f01..d657f0385 100644
--- a/sites/svelteflow.dev/src/pages/showcase.mdx
+++ b/sites/svelteflow.dev/src/pages/showcase.mdx
@@ -3,6 +3,6 @@ title: Showcase
description: Projects and examples using Svelte Flow
---
-import ShowcasePage from '@/sites/showcase';
+import ShowcasePage from '@/layouts/showcase';
> {
- let json = {};
-
- try {
- const resp = await fetch(url, { headers: { 'User-Agent': 'webkid' } });
- json = await resp.json();
- } catch (err) {
- console.log(err);
- }
-
- return json;
-}
diff --git a/sites/svelteflow.dev/src/utils/get-static-props/mdx-content-under-route.ts b/sites/svelteflow.dev/src/utils/get-static-props/mdx-content-under-route.ts
deleted file mode 100644
index e5e21efb9..000000000
--- a/sites/svelteflow.dev/src/utils/get-static-props/mdx-content-under-route.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { buildDynamicMDX } from 'nextra/remote';
-import { readFile, readdir, stat } from 'fs/promises';
-import { type InternalRoute } from '../routes';
-import * as Path from 'path';
-import * as Url from 'url';
-
-const __dirname = Url.fileURLToPath(import.meta.url);
-
-// @todo can we put this in xy-shared=
-export async function getMdxContentUnderRoute(route: InternalRoute) {
- const path = Path.join(__dirname, '../../../pages', route);
- const files = await readdir(path);
- const mdx = [];
-
- for (const file of files) {
- if (file.endsWith('.mdx')) {
- const raw = await readFile(Path.join(path, file), 'utf8');
-
- const parsed = await buildDynamicMDX(raw, {});
- const frontmatter = parsed.__nextra_dynamic_opts.frontMatter;
- frontmatter.route = Path.join(route, Path.basename(file, '.mdx'));
-
- if (!frontmatter.date) {
- let lastModified;
- try {
- const { mtime } = await stat(Path.join(path, file));
- lastModified = mtime;
- } catch (_) {
- lastModified = Date.now();
- }
-
- const [date] = new Date(lastModified).toISOString().split('T');
-
- frontmatter.date = date;
- }
-
- mdx.push({
- mdx: parsed.__nextra_dynamic_mdx,
- frontmatter,
- title: parsed.__nextra_dynamic_opts.title,
- });
- }
- }
-
- return mdx.sort(
- (a, b) =>
- new Date(b.frontmatter.date).getTime() -
- new Date(a.frontmatter.date).getTime(),
- );
-}
diff --git a/sites/svelteflow.dev/src/utils/index.ts b/sites/svelteflow.dev/src/utils/index.ts
index c9de79c28..a3820983e 100644
--- a/sites/svelteflow.dev/src/utils/index.ts
+++ b/sites/svelteflow.dev/src/utils/index.ts
@@ -1,26 +1 @@
-import { getPagesUnderRoute } from 'nextra/context';
-import { isMdxFile } from 'xy-shared';
-
-import { type Route, type ExternalRoute, type InternalRoute } from './routes';
-
-export function getMdxPagesUnderRoute(route: InternalRoute) {
- return getPagesUnderRoute(route).filter(isMdxFile);
-}
-
-// used for pagination for blog and case studies to display prev and next post/ case study
-export function getPrevAndNextPagesByTitle(title, route: InternalRoute) {
- const pages = getMdxPagesUnderRoute(route);
-
- const currentIndex = pages.findIndex(
- (page) => page.frontMatter?.title === title,
- );
- const prevIndex = currentIndex === 0 ? pages.length - 1 : currentIndex - 1;
- const nextIndex = currentIndex === pages.length - 1 ? 0 : currentIndex + 1;
-
- const prevPage = pages[prevIndex];
- const nextPage = pages[nextIndex];
-
- return [prevPage, nextPage];
-}
-
-export type { Route, ExternalRoute, InternalRoute };
+export * from './routes';
diff --git a/sites/svelteflow.dev/theme.config.tsx b/sites/svelteflow.dev/theme.config.tsx
index 67c32ffc8..08107774c 100644
--- a/sites/svelteflow.dev/theme.config.tsx
+++ b/sites/svelteflow.dev/theme.config.tsx
@@ -8,7 +8,7 @@ import {
LogoLabel,
defaultFooterCategories,
} from '@xyflow/xy-ui';
-import { Head, Search } from 'xy-shared';
+import { Search } from 'xy-shared';
const defaultDescription =
'Svelte Flow - Customizable library for rendering workflows, diagrams and node-based UIs.';
@@ -22,26 +22,13 @@ const baseUrl =
? 'https://svelteflow.dev'
: 'http://localhost:3003';
+const faviconUrl = `${baseUrl}/img/favicon.ico`;
+
export default {
logo: () =>
- GitHub
-
- ),
- },
darkMode: false,
nextThemes: {
forcedTheme: 'light',
@@ -73,9 +60,46 @@ export default {
navbar: {
extraContent: () => {
return (
-
-
+ <>
+
+
+ GitHub
+
+
+
+
+ Discord
+
+
+
+
+
);
},
},
@@ -139,15 +163,37 @@ export default {
? `${frontMatter.title} - Svelte Flow`
: 'Svelte Flow';
+ const description = frontMatter.description ?? defaultDescription;
+ const pageUrl = `${baseUrl}${router.asPath}`;
+
+ // We are not allowed to render components inside head!
+ // https://github.com/shuding/nextra/issues/3529
return (
-
+ <>
+ {title}
+ ();
- const { prev, next } = getPrevAndNextPagesByTitle(title, '/blog');
-
- return (
-
- <>{children}
-
- );
-}
-
-export default BlogPostLayout;
-
-// UTILS -----------------------------------------------------------------------
-
-function getPrevAndNextPagesByTitle(title: string, route: string) {
- const pages = getMdxPagesUnderRoute(route).sort((a, b) => {
- const aDate = new Date(a.frontMatter?.date);
- const bDate = new Date(b.frontMatter?.date);
-
- return aDate.getTime() - bDate.getTime();
- });
-
- const currentIndex = pages.findIndex(
- (page) => page.frontMatter?.title === title,
- );
-
- const prev = pages[currentIndex - 1];
- const next = pages[currentIndex + 1];
-
- return { prev, next };
-}
-
-function getMdxPagesUnderRoute(route: string) {
- return getPagesUnderRoute(route).filter(isMdxFile);
-}
diff --git a/sites/xyflow.com/src/sites/blog.tsx b/sites/xyflow.com/src/layouts/blog.tsx
similarity index 94%
rename from sites/xyflow.com/src/sites/blog.tsx
rename to sites/xyflow.com/src/layouts/blog.tsx
index ba83865cf..e960af7bd 100644
--- a/sites/xyflow.com/src/sites/blog.tsx
+++ b/sites/xyflow.com/src/layouts/blog.tsx
@@ -1,7 +1,7 @@
import { ContentGrid, ContentGridItem } from '@xyflow/xy-ui';
import { BaseLayout, BlogPostPreview, Hero } from 'xy-shared';
-import { getMdxPagesUnderRoute } from '@/utils';
+import { getMdxPagesUnderRoute } from 'xy-shared';
export default function Blog() {
return (
diff --git a/sites/xyflow.com/src/sites/careers.tsx b/sites/xyflow.com/src/layouts/careers.tsx
similarity index 100%
rename from sites/xyflow.com/src/sites/careers.tsx
rename to sites/xyflow.com/src/layouts/careers.tsx
diff --git a/sites/xyflow.com/src/sites/contact.tsx b/sites/xyflow.com/src/layouts/contact.tsx
similarity index 100%
rename from sites/xyflow.com/src/sites/contact.tsx
rename to sites/xyflow.com/src/layouts/contact.tsx
diff --git a/sites/xyflow.com/src/sites/home.tsx b/sites/xyflow.com/src/layouts/home.tsx
similarity index 100%
rename from sites/xyflow.com/src/sites/home.tsx
rename to sites/xyflow.com/src/layouts/home.tsx
diff --git a/sites/xyflow.com/src/sites/open-source.tsx b/sites/xyflow.com/src/layouts/open-source.tsx
similarity index 100%
rename from sites/xyflow.com/src/sites/open-source.tsx
rename to sites/xyflow.com/src/layouts/open-source.tsx
diff --git a/sites/xyflow.com/src/pages/_app.tsx b/sites/xyflow.com/src/pages/_app.tsx
index 2834efeb1..815e9bd27 100644
--- a/sites/xyflow.com/src/pages/_app.tsx
+++ b/sites/xyflow.com/src/pages/_app.tsx
@@ -1,31 +1,17 @@
-import localFont from 'next/font/local';
-import { Fira_Mono } from 'next/font/google';
-import { useFathom } from 'xy-shared';
+import { useConfig } from 'nextra-theme-docs';
+import { useData } from 'nextra/hooks';
-import 'styles/global.css';
+import { useFathom, SharedContext } from 'xy-shared';
+import { ntDapperFont, fontClassNames } from 'xy-shared/fonts';
-const ntDapperFont = localFont({
- src: [
- { path: '../styles/fonts/NTDapper-regular.woff2', weight: '400' },
- { path: '../styles/fonts/NTDapper-medium.woff2', weight: '500' },
- { path: '../styles/fonts/NTDapper-bold.woff2', weight: '700' },
- { path: '../styles/fonts/NTDapper-black.woff2', weight: '900' },
- ],
- variable: '--font-ntdapper',
-});
-
-const firaMonoFont = Fira_Mono({
- weight: ['400'],
- subsets: ['latin'],
- variable: '--font-firamono',
-});
-
-const className = `${ntDapperFont.variable} ${firaMonoFont.variable} font-sans`;
+import '../global.css';
const fathomOptions = {
id: 'JQTCQNLV',
};
+const sharedContext = { useConfig, useData };
+
export default function App({ Component, pageProps }) {
useFathom(fathomOptions);
@@ -36,8 +22,10 @@ export default function App({ Component, pageProps }) {
font-family: ${ntDapperFont.style.fontFamily}, sans-serif;
}
`}
-
-
+
+
+
);
diff --git a/sites/xyflow.com/src/pages/about.mdx b/sites/xyflow.com/src/pages/about.mdx
index 0133d364a..66ffed44f 100644
--- a/sites/xyflow.com/src/pages/about.mdx
+++ b/sites/xyflow.com/src/pages/about.mdx
@@ -3,6 +3,6 @@ title: About
description: Get to know the team behind xyflow, React Flow, and Svelte Flow.
---
-import AboutPage from '@/sites/about';
+import AboutPage from '@/layouts/about';
diff --git a/sites/xyflow.com/src/pages/blog.mdx b/sites/xyflow.com/src/pages/blog.mdx
index ca21848cf..e0cf93d79 100644
--- a/sites/xyflow.com/src/pages/blog.mdx
+++ b/sites/xyflow.com/src/pages/blog.mdx
@@ -3,6 +3,6 @@ title: Blog
description: All the latest news and updates from React Flow and Svelte Flow
---
-import BlogPage from '@/sites/blog';
+import BlogPage from '@/layouts/blog';
diff --git a/sites/xyflow.com/src/pages/blog/_meta.ts b/sites/xyflow.com/src/pages/blog/_meta.ts
index 1fd02554f..0805f88ff 100644
--- a/sites/xyflow.com/src/pages/blog/_meta.ts
+++ b/sites/xyflow.com/src/pages/blog/_meta.ts
@@ -8,6 +8,8 @@ export default {
layout: 'full',
},
},
+ 'react-flow-components':
+ 'Introducing React Flow Components - powered by shadcn CLI',
'react-flow-12-release':
'React Flow 12: Server Side Rendering, Computing Flows, Dark Mode',
'react-flow-developer-survey-2023':
diff --git a/sites/xyflow.com/src/pages/blog/asking-for-money-for-open-source.mdx b/sites/xyflow.com/src/pages/blog/asking-for-money-for-open-source.mdx
index f61bf935c..3dd9661a9 100644
--- a/sites/xyflow.com/src/pages/blog/asking-for-money-for-open-source.mdx
+++ b/sites/xyflow.com/src/pages/blog/asking-for-money-for-open-source.mdx
@@ -9,7 +9,7 @@ image: '/img/blog/oss-pricing/donate-button-banner.png'
import { Bleed } from 'nextra-theme-docs';
import { Image } from 'xy-shared';
-import { BlogPostLayout } from '@/layouts/blog-post-with-frontmatter';
+import { BlogPostLayout } from 'xy-shared';
It’s common knowledge that many open source projects are underfunded. We think one reason for this is that **the open source world is doing a bad job of asking for the money that it deserves.** By telling the right organizations exactly why and how we want them to financially support our work, OSS projects can be compensated for more fairly, and result in a healthier open source ecosystem.
diff --git a/sites/xyflow.com/src/pages/blog/react-flow-12-release.mdx b/sites/xyflow.com/src/pages/blog/react-flow-12-release.mdx
index 3e2159f8b..3ccde9d72 100644
--- a/sites/xyflow.com/src/pages/blog/react-flow-12-release.mdx
+++ b/sites/xyflow.com/src/pages/blog/react-flow-12-release.mdx
@@ -12,9 +12,13 @@ image: '/img/blog/v11-reactflow-header.png'
import { Bleed } from 'nextra-theme-docs';
import { Embed, Text, Image, RemoteCodeViewer } from 'xy-shared';
-import { BlogPostLayout } from '@/layouts/blog-post-with-frontmatter';
+import { BlogPostLayout } from 'xy-shared';
import SSRFlow from '@/components/SSRFlow';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['learn/computing-6', 'examples/styling/dark-mode']);
+
+
For the last few months we’ve been wrapping up a solid React Flow 12 release for y’all. Since the last major release, we’ve grown our core team to five people, reached more than 22k stars on Github, rebranded to xyflow, launched Svelte Flow (many great side-effects of this are baked into this release), and kept all of our office plants alive.
@@ -67,8 +71,7 @@ Check out our [server side rendering guide](https://reactflow.dev/learn/advanced
+
+
+
+ We built out an internal project called "Multiverse" that let
+ you inspect elements in a flow and copy their source code.
+
+ }
+ />
+
+
+We spent a while developing this but eventually decided to shelf the project
+after we were dissatisfied with some of the compromises we ended up making along
+the way.
+
+The biggest open-ended question we kept running into was what to do about _styling_.
+On the one hand we wanted to provide components that were easy to use and looked
+good out of the box, but on the other hand we couldn't make any assumptions about
+what styling approach folks would be taking and we couldn't easily pull in external
+dependencies without making the installation process confusing.
+
+Although we had benched the idea, it was a frequent topic of conversation in our
+team meetings. We knew the value of shipping _something_ would be high, we just
+couldn't work out _how_...
+
+## A new hope: the shadcn CLI
+
+Shadcn has had a simple CLI to install their components into your codebase for
+a while now, but more recently the CLI was given the ability to install _external_
+components as long as they followed a simple JSON schema.
+
+This solved a bunch of problems for us:
+
+- All shadcn components use Tailwind CSS, so we can add styles to our components
+ without needing to worry about the user installing additional dependencies.
+
+- Shadcn components can depend on _other shadcn components_, so we can build out
+ more sophisticated components that take advantage on the great collection of
+ shadcn components that already exist.
+
+- These components are vendored into the user's codebase meaning we don't need to
+ worry about covering every single use case or feature request: folks can implement
+ what they need!
+
+## Introducing React Flow Components
+
+This was the kick we needed to jump into the project again. We've been working
+hard to build out a collection of initial components that we think will make it
+easier for folks to put together React Flow projects going forward. Some interesting
+components from the initial set include:
+
+- A [**database schema node**](https://reactflow.dev/components/nodes/database-schema-node)
+ that makes it easy to visualise tables and relationships between columns.
+
+
diff --git a/sites/xyflow.com/src/pages/blog/react-flow-developer-survey-2023.mdx b/sites/xyflow.com/src/pages/blog/react-flow-developer-survey-2023.mdx
index 796d5d7a4..b18241721 100644
--- a/sites/xyflow.com/src/pages/blog/react-flow-developer-survey-2023.mdx
+++ b/sites/xyflow.com/src/pages/blog/react-flow-developer-survey-2023.mdx
@@ -12,7 +12,7 @@ image: '/img/blog/v11-reactflow-header.png'
import { Bleed } from 'nextra-theme-docs';
import { Embed, Text, Image } from 'xy-shared';
-import { BlogPostLayout } from '@/layouts/blog-post-with-frontmatter';
+import { BlogPostLayout } from 'xy-shared';
diff --git a/sites/xyflow.com/src/pages/blog/react-flow-fall-2022.mdx b/sites/xyflow.com/src/pages/blog/react-flow-fall-2022.mdx
index 09ff11474..cb8a6fdbc 100644
--- a/sites/xyflow.com/src/pages/blog/react-flow-fall-2022.mdx
+++ b/sites/xyflow.com/src/pages/blog/react-flow-fall-2022.mdx
@@ -10,7 +10,7 @@ image: /img/blog/v10-header.png
import { Bleed } from 'nextra-theme-docs';
import { Emoji } from '@xyflow/xy-ui';
import { Embed, Image } from 'xy-shared';
-import { BlogPostLayout } from '@/layouts/blog-post-with-frontmatter';
+import { BlogPostLayout } from 'xy-shared';
Howdy! Here’s a dispatch straight from our desks about what’s happened in the last couple of months at React Flow: updates, news, and a peek behind-the-scenes. Here we go.
diff --git a/sites/xyflow.com/src/pages/blog/react-flow-pro-platform-open-source.mdx b/sites/xyflow.com/src/pages/blog/react-flow-pro-platform-open-source.mdx
index c963c2ba4..f9886cdb6 100644
--- a/sites/xyflow.com/src/pages/blog/react-flow-pro-platform-open-source.mdx
+++ b/sites/xyflow.com/src/pages/blog/react-flow-pro-platform-open-source.mdx
@@ -8,7 +8,7 @@ image: '/img/blog/v11-reactflow-header.png'
---
import { Emoji } from '@xyflow/xy-ui';
-import { BlogPostLayout } from '@/layouts/blog-post-with-frontmatter';
+import { BlogPostLayout } from 'xy-shared';
import { Bleed } from 'nextra-theme-docs';
import { Embed, Text } from 'xy-shared';
diff --git a/sites/xyflow.com/src/pages/blog/react-flow-v-11-5.mdx b/sites/xyflow.com/src/pages/blog/react-flow-v-11-5.mdx
index 193b6f79b..24c502e54 100644
--- a/sites/xyflow.com/src/pages/blog/react-flow-v-11-5.mdx
+++ b/sites/xyflow.com/src/pages/blog/react-flow-v-11-5.mdx
@@ -10,7 +10,7 @@ image: /img/blog/v10-header.png
import { Bleed } from 'nextra-theme-docs';
import { Image } from 'xy-shared';
import { Emoji } from '@xyflow/xy-ui';
-import { BlogPostLayout } from '@/layouts/blog-post-with-frontmatter';
+import { BlogPostLayout } from 'xy-shared';
Hello again! I am super excited to share the latest improvements of React Flow. The new auto pan features and connection radius makes it way easier to connect nodes and work with bigger flows. On top of that we improved the usability on touch devices.
diff --git a/sites/xyflow.com/src/pages/blog/react-flow-v10.mdx b/sites/xyflow.com/src/pages/blog/react-flow-v10.mdx
index 94fbf8e94..cd1210cae 100644
--- a/sites/xyflow.com/src/pages/blog/react-flow-v10.mdx
+++ b/sites/xyflow.com/src/pages/blog/react-flow-v10.mdx
@@ -9,7 +9,11 @@ image: /img/blog/v10-header.png
import { Bleed } from 'nextra-theme-docs';
import { RemoteCodeViewer } from 'xy-shared';
-import { BlogPostLayout } from '@/layouts/blog-post-with-frontmatter';
+import { BlogPostLayout } from 'xy-shared';
+
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['learn/sub-flows-3']);
+
Almost two years ago we [open sourced React Flow](https://webkid.io/blog/react-flow-node-based-graph-library/) that was built for our flow-based data processing tool [Datablocks](https://datablocks.pro). Since then we invested more and more time in React Flow and it got a lot of traction (25k+ website visitors per month, 9k+ stars on Github, 1k+ Discord members, 100k+ weekly downloads on npm).
@@ -19,8 +23,7 @@ After several months of hard work, today we can finally announce the release of
A lot has happened since we published our last blog post six months ago. We got our first pro subscribers, we hired John who helps us with the docs, communication and community and we are all working full time on React Flow
Hey! We wanted to share an update about what we’ve been up to before we wrap ourselves up in blankets to hibernate until the new year (we’ll be shutting our laptops from today until January 2nd ⛄). Let’s get into what’s been up the past few months, what’s coming, and what we’re excited about right now.
diff --git a/sites/xyflow.com/src/pages/blog/reactflow-npm-package-name.mdx b/sites/xyflow.com/src/pages/blog/reactflow-npm-package-name.mdx
index 867aa1bca..36930a157 100644
--- a/sites/xyflow.com/src/pages/blog/reactflow-npm-package-name.mdx
+++ b/sites/xyflow.com/src/pages/blog/reactflow-npm-package-name.mdx
@@ -10,7 +10,7 @@ image: /img/blog/v10-header.png
import { Bleed } from 'nextra-theme-docs';
import { Image } from 'xy-shared';
import { Emoji } from '@xyflow/xy-ui';
-import { BlogPostLayout } from '@/layouts/blog-post-with-frontmatter';
+import { BlogPostLayout } from 'xy-shared';
In 2019 we started building [a library for building node based UIs](https://github.com/xyflow/xyflow), and decided to call it “React Flow.” It’s a nice name, so of course “reactflow” and “react-flow” were already taken. The best option we had for us was “react-flow-renderer,” so we took what we could get.
diff --git a/sites/xyflow.com/src/pages/blog/spring-update-2023.mdx b/sites/xyflow.com/src/pages/blog/spring-update-2023.mdx
index 0e06cefb8..31c2fcc97 100644
--- a/sites/xyflow.com/src/pages/blog/spring-update-2023.mdx
+++ b/sites/xyflow.com/src/pages/blog/spring-update-2023.mdx
@@ -10,7 +10,7 @@ image: '/img/blog/v10-header.png'
import { Bleed } from 'nextra-theme-docs';
import { Emoji } from '@xyflow/xy-ui';
import { ReactPlayer, Image, YoutubeEmbed } from 'xy-shared';
-import { BlogPostLayout } from '@/layouts/blog-post-with-frontmatter';
+import { BlogPostLayout } from 'xy-shared';
To kick it off, v11.5.0 was released! 🎉 It comes with Auto pan, snappy connections, error handling, the NodeResizer component, and more goodies that I won’t get into here, because there’s already a [write-up about the release](https://reactflow.dev/blog/react-flow-v-11-5/) by Moritz.
diff --git a/sites/xyflow.com/src/pages/blog/svelte-flow-alpha-xyflow.mdx b/sites/xyflow.com/src/pages/blog/svelte-flow-alpha-xyflow.mdx
index cc16b9f5b..e6770a238 100644
--- a/sites/xyflow.com/src/pages/blog/svelte-flow-alpha-xyflow.mdx
+++ b/sites/xyflow.com/src/pages/blog/svelte-flow-alpha-xyflow.mdx
@@ -9,7 +9,7 @@ image: '/img/blog/v11-reactflow-header.png'
import { Image } from 'xy-shared';
import { Emoji } from '@xyflow/xy-ui';
-import { BlogPostLayout } from '@/layouts/blog-post-with-frontmatter';
+import { BlogPostLayout } from 'xy-shared';
Good to see you again friends. We have big “official” updates incoming, but in the meantime, we wanted to share what’s been going on over here for the past months.
@@ -40,7 +40,7 @@ Hayleigh has been hard at work restructuring our docs, which were much needed fo
For those with keen eyes, you may have noticed a xyflow branch in the react-flow repo, and that’s because we’ve ported React Flow to Svelte, and now you can install it and try it out!! 🚀
-```jsx
+```bash npm2yarn
npm install @xyflow/svelte
```
diff --git a/sites/xyflow.com/src/pages/blog/svelte-flow-launch.mdx b/sites/xyflow.com/src/pages/blog/svelte-flow-launch.mdx
index 621f2a725..c33401a24 100644
--- a/sites/xyflow.com/src/pages/blog/svelte-flow-launch.mdx
+++ b/sites/xyflow.com/src/pages/blog/svelte-flow-launch.mdx
@@ -9,11 +9,9 @@ image: '/img/blog/v11-reactflow-header.png'
import Image from 'next/image';
import { Bleed } from 'nextra-theme-docs';
-import { Embed, Text } from 'xy-shared';
+import { Embed, Text, BlogPostLayout } from 'xy-shared';
import { Emoji } from '@xyflow/xy-ui';
-import { BlogPostLayout } from '@/layouts/blog-post-with-frontmatter';
-
Today we are excited to launch Svelte Flow! 🎉⚡️ Svelte Flow is a library for creating workflow builders, database visualizers, data processing tools, and anything else you can imagine with nodes on a screen.
diff --git a/sites/xyflow.com/src/pages/blog/update-react-flow-12-svelte-flow-1.mdx b/sites/xyflow.com/src/pages/blog/update-react-flow-12-svelte-flow-1.mdx
index 3aee0ff7b..24047ce7d 100644
--- a/sites/xyflow.com/src/pages/blog/update-react-flow-12-svelte-flow-1.mdx
+++ b/sites/xyflow.com/src/pages/blog/update-react-flow-12-svelte-flow-1.mdx
@@ -8,13 +8,17 @@ image: '/img/blog/v11-reactflow-header.png'
---
import { Emoji } from '@xyflow/xy-ui';
-import { BlogPostLayout } from '@/layouts/blog-post-with-frontmatter';
+import { BlogPostLayout } from 'xy-shared';
import { Bleed } from 'nextra-theme-docs';
import { Embed, Text, RemoteCodeViewer } from 'xy-shared';
import Image from 'next/image';
+import { getStaticCode } from 'xy-shared/server';
+export const getStaticProps = getStaticCode(['learn/devtools']);
+
+
Birds are chirping again– wait no, it’s snowing. Wait no. I don’t know anymore, but it’s certainly been a while since we told everyone about what’s going on with our team. Let’s get into React Flow 12, Svelte Flow 1.0.0 in Svelte 5, our 2023 end-of-year survey, editable edges, and investigating our team’s working rhythm.
@@ -53,8 +57,7 @@ Here's a sneak-peek of the findings:
A lot of people have asked us if [React Flow](https://reactflow.dev/) will be ported to their favorite front-end framework. Two people went as far as to create their own libraries ([Svelvet](https://www.svelvet.io/) and [Vue Flow](https://vueflow.dev/)), both citing React Flow as a jumping-off point. Even though there is an obvious need for this sort of tool in other framework, we've stuck with React until only recently.
diff --git a/sites/xyflow.com/src/pages/careers.mdx b/sites/xyflow.com/src/pages/careers.mdx
index d1f2ef3a7..0753a2689 100644
--- a/sites/xyflow.com/src/pages/careers.mdx
+++ b/sites/xyflow.com/src/pages/careers.mdx
@@ -3,6 +3,6 @@ title: Careers
description: Keep up to date with our open jobs and opportunities.
---
-import CareersPage from '@/sites/careers';
+import CareersPage from '@/layouts/careers';
@@ -20,7 +21,7 @@ export default {
xyflow
-
);
},
@@ -97,18 +100,42 @@ export default {
const hasImage =
frontMatter.image && frontMatter.imageWidth && frontMatter.imageHeight;
+ const ogImage = {
+ url: `${baseUrl}${hasImage || '/img/og/xyflow.jpg'}`,
+ width: frontMatter.imageWidth,
+ height: frontMatter.imageHeight,
+ };
+
+ const description = frontMatter.description ?? defaultDescription;
+ const pageUrl = `${baseUrl}${router.asPath}`;
+
+ // We are not allowed to render components inside head!
+ // https://github.com/shuding/nextra/issues/3529
return (
-
+ <>
+ {title}
+ 
-
- Presets for popular tools
- Easy setup for TypeScript, SCSS and more.
-
-
-
- 
-
- Build configuration
- How to customize webpack and Babel
-
-
-
- 
-
- Styling
- How to load and configure CSS libraries
-
-
-
- 
-
- Data
- Providers and mocking for data libraries
-
-
-
-
- Storybook documentation
- Configure, customize, and extend
-
-
-
- 
-
- In-depth guides
- Best practices from leading teams
-
-
-
- 
-
- GitHub project
- View the source and add issues
-
-
-
- 
-
- Discord chat
- Chat with maintainers and the community
-
-
-