{"id":31940335,"url":"https://github.com/dsnchz/solid-flow","last_synced_at":"2025-10-14T08:53:30.247Z","repository":{"id":278797563,"uuid":"934617514","full_name":"dsnchz/solid-flow","owner":"dsnchz","description":"SolidJS Port of React/Svelte Flow","archived":false,"fork":false,"pushed_at":"2025-09-25T02:05:43.000Z","size":416,"stargazers_count":21,"open_issues_count":6,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-25T04:12:51.981Z","etag":null,"topics":["graph","graph-editor","node-editor","node-ui","solid-js","solidjs","typescript","ui","visual-programming","workflow","workflow-builder"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dsnchz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-02-18T06:04:23.000Z","updated_at":"2025-09-25T02:05:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"076a05a1-6c57-46de-90f5-2a32828b25b8","html_url":"https://github.com/dsnchz/solid-flow","commit_stats":null,"previous_names":["thedanchez/solid-flow","dsnchz/solid-flow"],"tags_count":5,"template":false,"template_full_name":"thedanchez/template-solidjs-library","purl":"pkg:github/dsnchz/solid-flow","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-flow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-flow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-flow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-flow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dsnchz","download_url":"https://codeload.github.com/dsnchz/solid-flow/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-flow/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279018312,"owners_count":26086348,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["graph","graph-editor","node-editor","node-ui","solid-js","solidjs","typescript","ui","visual-programming","workflow","workflow-builder"],"created_at":"2025-10-14T08:52:57.670Z","updated_at":"2025-10-14T08:53:30.236Z","avatar_url":"https://github.com/dsnchz.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://assets.solidjs.com/banner?project=solid-flow\u0026type=Ecosystem\u0026background=tiles\" alt=\"@dschz/solid-flow banner\" /\u003e\n\u003c/p\u003e\n\n# Solid Flow\n\n[![License](https://img.shields.io/badge/license-MIT-green)](LICENSE)\n[![npm](https://img.shields.io/npm/v/@dschz/solid-flow?color=blue)](https://www.npmjs.com/package/@dschz/solid-flow)\n[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@dschz/solid-flow)](https://bundlephobia.com/package/@dschz/solid-flow)\n[![CI](https://github.com/dsnchz/solid-flow/actions/workflows/ci.yaml/badge.svg)](https://github.com/dsnchz/solid-flow/actions/workflows/ci.yaml)\n\n\u003e Solid Flow is a port of [React Flow](https://reactflow.dev/) and [Svelte Flow](https://svelteflow.dev/) for SolidJS.\n\n☣️ **Solid Flow is alpha and currently under development. The API intends to follow React/Svelte Flow closely but some things might change for the sake of SolidJS.** ☣️\n\n## Current Unsupported Features:\n\n- [onlyRenderVisibleElements](https://github.com/dsnchz/solid-flow/issues/15): render only visible elements.\n- [Custom MiniMap Nodes](https://github.com/dsnchz/solid-flow/issues/12): define custom minimap jsx node elements.\n- [Edge Reconnect Anchors](https://github.com/dsnchz/solid-flow/issues/13): the ability to re-connect already connected edges.\n\n## Key Features\n\n- **Easy to use:** Seamless zooming and panning, single- and multi selection of graph elements and keyboard shortcuts are supported out of the box\n- **Customizable:** Different node types (Input, Output, Default, Group) and edge types (Bezier, Straight, Step, SmoothStep) with full support for custom nodes and edges\n- **Fast rendering:** Only nodes that have changed are re-rendered using SolidJS's fine-grained reactivity\n- **Rich Plugin Ecosystem:** Background patterns, Interactive MiniMap, Zoom Controls, Node Toolbar, and Node Resizer components\n- **Powerful Hooks:** Comprehensive set of reactive hooks for nodes, edges, viewport, connections, and data management\n- **Full Accessibility:** Complete keyboard navigation, screen reader support, ARIA labels, and focus management\n- **Drag \u0026 Drop:** Built-in dragging for nodes, external drag-and-drop support, and customizable drag handles\n- **Advanced Features:** Node grouping, intersection detection, connection validation, and subflow support\n- **TypeScript First:** Fully typed API with generic type support and IntelliSense integration\n\n## Installation\n\nThe easiest way to get the latest version of Solid Flow is to install it via npm, yarn or pnpm:\n\n```sh\nnpm install @dschz/solid-flow\npnpm install @dschz/solid-flow\nyarn install @dschz/solid-flow\nbun install @dschz/solid-flow\n```\n\n## Quick Start\n\nThis is a basic example to get you started. For more advanced examples and full API documentation, explore the playground examples included in this repository.\n\n```tsx\nimport {\n  SolidFlow,\n  SolidFlowProvider,\n  Controls,\n  Background,\n  MiniMap,\n  addEdge,\n  type EdgeConnection,\n  createEdgeStore,\n  createNodeStore,\n  type Viewport,\n} from \"@dschz/solid-flow\";\nimport \"@dschz/solid-flow/styles\"; // Required styles\n\nimport { createStore, produce } from \"solid-js/store\";\n\nexport default function Page() {\n  return (\n    \u003cSolidFlowProvider\u003e\n      \u003cFlow /\u003e\n    \u003c/SolidFlowProvider\u003e\n  )\n}\n\nfunction Flow() {\n  // Can invoke useSolidFlow due to parent Page + SolidFlowProvider wrapper. Contains all helper APIs\n  const { .. } = useSolidFlow();\n\n  // Use createNodeStore and createEdgeStore for reactive state management\n  const [nodes, setNodes] = createNodeStore([\n    {\n      id: \"1\",\n      type: \"input\",\n      data: { label: \"Input Node\" },\n      position: { x: 250, y: 0 },\n    },\n    {\n      id: \"2\",\n      type: \"default\",\n      data: { label: \"Default Node\" },\n      position: { x: 100, y: 100 },\n    },\n    {\n      id: \"3\",\n      type: \"output\",\n      data: { label: \"Output Node\" },\n      position: { x: 250, y: 200 },\n    },\n  ]);\n\n  const [edges, setEdges] = createEdgeStore([\n    { id: \"e1-2\", source: \"1\", target: \"2\" },\n    { id: \"e2-3\", source: \"2\", target: \"3\" },\n  ]);\n\n  const [viewport, setViewport] = createStore\u003cViewport\u003e({\n    x: 100,\n    y: 100,\n    zoom: 5,\n  });\n\n  const updateViewport = () =\u003e {\n    setViewport(\"x\", (prev) =\u003e prev + 10);\n  };\n\n  const onConnect = (connection: EdgeConnection) =\u003e {\n    /**\n     * Solid Flow updates the node/edge stores internally. The user-land edge store will have the connection inserted by the time onConnect fires so we can just go ahead and update the state of it\n     */\n    setEdges(\n      (edge) =\u003e edge.id === connection.id,\n      produce((edge) =\u003e {\n        edge.animated = true;\n      }),\n    );\n  };\n\n  return (\n    \u003cSolidFlow nodes={nodes} edges={edges} onConnect={onConnect} fitView\u003e\n      \u003cControls /\u003e\n      \u003cMiniMap /\u003e\n      \u003cPanel position=\"top-left\"\u003e\n        \u003cbutton onClick={updateViewport}\u003eUpdate viewport\u003c/button\u003e\n      \u003c/Panel\u003e\n      \u003cBackground variant=\"dots\" /\u003e\n    \u003c/SolidFlow\u003e\n  );\n}\n```\n\n## Core Components\n\n### Built-in Node Types\n\n- **InputNode** - Nodes with source handles only (starting points)\n- **OutputNode** - Nodes with target handles only (ending points)\n- **DefaultNode** - Standard nodes with both source and target handles\n- **GroupNode** - Container nodes for organizing other nodes\n\n### Built-in Edge Types\n\n- **BezierEdge** - Smooth curved connections (default)\n- **StraightEdge** - Direct straight line connections\n- **StepEdge** - Right-angle step connections\n- **SmoothStepEdge** - Rounded step connections\n\n### Plugin Components\n\n- **Background** - Customizable canvas backgrounds (dots, lines, cross patterns)\n- **Controls** - Zoom in/out, fit view, lock/unlock interactions\n- **MiniMap** - Interactive overview with viewport indicator\n- **NodeToolbar** - Context-sensitive toolbars for nodes\n- **NodeResizer** - Real-time node resizing with handles\n\n## Hooks \u0026 Utilities\n\n### Essential Hooks\n\n```tsx\n// Main flow instance with full API\nconst solidFlow = useSolidFlow();\n\n// Reactive access to nodes and edges\nconst nodes = useNodes();\nconst edges = useEdges();\n\n// Viewport control and monitoring\nconst viewport = useViewport();\n\n// Connection state during drag operations\nconst connection = useConnection();\n\n// Reactive access to node data\nconst nodeData = useNodesData([\"node-1\", \"node-2\"]);\n\n// Node connection information\nconst connections = useNodeConnections(\"node-1\");\n```\n\n### Utility Functions\n\n```tsx\n// Create reactive stores (replaces signals)\nconst [nodes, setNodes] = createNodeStore(initialNodes);\nconst [edges, setEdges] = createEdgeStore(initialEdges);\n\n// Update stores with SolidJS patterns\nimport { produce } from \"solid-js/store\";\nsetNodes(\n  (node) =\u003e node.id === \"1\",\n  produce((node) =\u003e {\n    node.position.x += 20;\n  }),\n);\n\n// Add new connections\nsetEdges(addEdge(connection, edges));\n\n// Coordinate transformations (via useSolidFlow)\nconst { screenToFlowPosition, flowToScreenPosition } = useSolidFlow();\n\n// Node/edge utilities\ngetNodesBounds(nodes);\ngetIntersectingNodes(node, nodes);\n```\n\n## Advanced Features\n\n### Custom Nodes and Edges\n\nCreate fully customized components with multiple handles:\n\n```tsx\nimport { Handle, type NodeProps } from \"@dschz/solid-flow\";\n\n// Type-safe custom node component\nfunction CustomNode(props: NodeProps\u003c{ label: string }, \"custom\"\u003e) {\n  return (\n    \u003cdiv class=\"custom-node\" style={{ padding: \"10px\", background: \"white\" }}\u003e\n      \u003cHandle type=\"target\" position=\"top\" /\u003e\n      \u003cdiv\u003e{props.data.label}\u003c/div\u003e\n      \u003cHandle type=\"source\" position=\"bottom\" id=\"output-a\" /\u003e\n      \u003cHandle type=\"source\" position=\"bottom\" id=\"output-b\" style={{ left: \"80%\" }} /\u003e\n    \u003c/div\u003e\n  );\n}\n\n// Create type-safe node types\nconst nodeTypes = {\n  custom: CustomNode,\n} satisfies NodeTypes;\n\n// Use with typed store\nconst [nodes] = createNodeStore\u003ctypeof nodeTypes\u003e([...]);\n\n\u003cSolidFlow nodeTypes={nodeTypes} nodes={nodes} ... /\u003e\n```\n\n### Connection Validation\n\n```tsx\nimport { type Connection } from \"@dschz/solid-flow\";\n\nconst isValidConnection = (connection: Connection) =\u003e {\n  // Custom validation logic\n  return connection.source !== connection.target;\n};\n\nconst onConnect = (connection: Connection) =\u003e {\n  console.log(\"New connection:\", connection);\n  setEdges(addEdge(connection, edges));\n};\n\n\u003cSolidFlow\n  isValidConnection={isValidConnection}\n  onConnect={onConnect}\n  ...\n/\u003e\n```\n\n### Event Handling\n\n```tsx\n\u003cSolidFlow\n  onNodeClick={(event, node) =\u003e console.log(\"Node clicked:\", node)}\n  onNodeDrag={(event, node) =\u003e console.log(\"Node dragged:\", node)}\n  onEdgeClick={(event, edge) =\u003e console.log(\"Edge clicked:\", edge)}\n  onPaneClick={(event) =\u003e console.log(\"Pane clicked\")}\n  onSelectionChange={(params) =\u003e console.log(\"Selection changed:\", params)}\n/\u003e\n```\n\n## Accessibility\n\nSolid Flow includes comprehensive accessibility features:\n\n- Full keyboard navigation support\n- Screen reader compatibility with ARIA labels\n- Focus management and visual indicators\n- High contrast and color mode support\n- Customizable keyboard shortcuts\n\n## Performance\n\n- **Reactive Updates**: Only re-renders components when their specific data changes\n- **Viewport Optimization**: Option to render only visible elements (coming soon)\n- **Memory Efficient**: Optimized data structures for large graphs\n- **Stress Tested**: Handles hundreds of nodes smoothly\n\n## Examples\n\nThe repository includes a comprehensive playground with 25+ examples:\n\n- **Basic Usage** - Simple flows and interactions\n- **Custom Nodes** - Creating specialized node types\n- **Edge Types** - Different connection styles\n- **Drag \u0026 Drop** - External elements and node creation\n- **Validation** - Connection rules and constraints\n- **Subflows** - Hierarchical node organization\n- **Performance** - Large dataset handling\n- **Accessibility** - Keyboard navigation and screen readers\n\nRun the examples locally:\n\n```bash\nbun start\n```\n\n## Contributing: Getting Started\n\nSome pre-requisites before install dependencies:\n\n- Install Node Version Manager (NVM)\n  ```bash\n  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash\n  ```\n- Install Bun\n  ```bash\n  curl -fsSL https://bun.sh/install | bash\n  ```\n\n### Installing Dependencies\n\n```bash\nnvm use\nbun install\n```\n\n### Local Development Build\n\n```bash\nbun start\n```\n\n### Linting \u0026 Formatting\n\n```bash\nbun run lint    # checks source for lint violations\nbun run format  # checks source for format violations\n\nbun run lint:fix    # fixes lint violations\nbun run format:fix  # fixes format violations\n```\n\n### Contributing\n\nThe only requirements when contributing are:\n\n- You keep a clean git history in your branch\n  - rebasing `main` instead of making merge commits.\n- Using proper commit message formats that adhere to [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/)\n  - Additionally, squashing (via rebase) commits that are not [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/)\n- CI checks pass before merging into `main`\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdsnchz%2Fsolid-flow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdsnchz%2Fsolid-flow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdsnchz%2Fsolid-flow/lists"}