{"id":23946043,"url":"https://github.com/miguelsalesvieira/solid-flow","last_synced_at":"2025-10-13T12:28:00.567Z","repository":{"id":60500860,"uuid":"541527141","full_name":"miguelsalesvieira/solid-flow","owner":"miguelsalesvieira","description":"Solidjs component for building interactive flow-based diagrams and graphs","archived":false,"fork":false,"pushed_at":"2023-09-19T13:21:50.000Z","size":608,"stargazers_count":144,"open_issues_count":2,"forks_count":21,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-25T19:56:16.484Z","etag":null,"topics":["flow","flowchart","graph","solidjs","ui","visualization"],"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/miguelsalesvieira.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-09-26T10:25:23.000Z","updated_at":"2025-09-24T08:31:18.000Z","dependencies_parsed_at":"2023-01-19T02:01:25.403Z","dependency_job_id":null,"html_url":"https://github.com/miguelsalesvieira/solid-flow","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/miguelsalesvieira/solid-flow","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miguelsalesvieira%2Fsolid-flow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miguelsalesvieira%2Fsolid-flow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miguelsalesvieira%2Fsolid-flow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miguelsalesvieira%2Fsolid-flow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/miguelsalesvieira","download_url":"https://codeload.github.com/miguelsalesvieira/solid-flow/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miguelsalesvieira%2Fsolid-flow/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279015061,"owners_count":26085643,"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-13T02:00:06.723Z","response_time":61,"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":["flow","flowchart","graph","solidjs","ui","visualization"],"created_at":"2025-01-06T08:02:31.672Z","updated_at":"2025-10-13T12:28:00.560Z","avatar_url":"https://github.com/miguelsalesvieira.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv style=\"border-radius: 6px; overflow:hidden; height:247px; margin-bottom: 16px\"\u003e\n\u003cimg src=\"assets/solid-flow.png\" alt=\"Solid Flow logo\"/\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\nA simple yet complex [Solidjs](https://www.solidjs.com/) component for building interactive node-based diagrams and editors\n\n[📖 Documentation](https://miguel-vieira.gitbook.io/solid-flow/) | \n[🧪 Demo](https://solidflowdemo.netlify.app/)\n\n\u003c/div\u003e\n\n---\n\n## Installation\n\nTo install it, simply run\n\n```bash\n$ npm install solid-flow\n```\n\n## Usage\n\nA very simple example to get started with solid-flow. If you want to check out more complex examples plese refer to [examples](#examples)\n\n```javascript\nimport { createEffect, createSignal } from \"solid-js\";\nimport { SolidFlow } from \"solid-flow\";\nimport styles from \"./styles.module.css\";\n\nconst initialNodes = [\n    {\n        id: \"node-1\",\n        position: { x: 50, y: 100 },\n        data: {\n            content: \u003cp\u003eThis is a simple node\u003c/p\u003e,\n        },\n        inputs: 0,\n        outputs: 1,\n    },\n    {\n        id: \"node-2\",\n        position: { x: 350, y: 100 },\n        data: {\n            label: \"Node with label\",\n            content: \u003cp\u003eThis is a node with a label\u003c/p\u003e,\n        },\n        inputs: 1,\n        outputs: 0,\n    },\n];\n\nconst initialEdges = [\n    {\n        id: \"edge_node-1:0_node-2:0\",\n        sourceNode: \"node-1\",\n        sourceOutput: 0,\n        targetNode: \"node-2\",\n        targetInput: 0,\n    },\n];\n\nconst Example = () =\u003e {\n    const [nodes, setNodes] = createSignal(initialNodes);\n    const [edges, setEdges] = createSignal(initialEdges);\n\n    return (\n        \u003cdiv class={styles.main}\u003e\n            \u003cSolidFlow\n                nodes={nodes()}\n                edges={edges()}\n                onNodesChange={(newNodes) =\u003e {\n                    setNodes(newNodes);\n                }}\n                onEdgesChange={(newEdges) =\u003e {\n                    setEdges(newEdges);\n                }}\n            /\u003e\n        \u003c/div\u003e\n    );\n};\n```\n\n\u003ca name=\"development\"\u003e\u003c/a\u003e\n\n## Development\n\nTo begin development first you need to `git clone` this repository to your local machine. Once that's done, on the main directory, run\n\n```bash\nnpm install\n```\n\nto install the packages and then run\n\n```bash\nnpm start\n```\n\nto rollup the project.\n\nFrom here, everytime a change is made the project will be built automatically. To test it out follow the instructions on [examples](#examples) and use of the examples as a development template.\n\n\u003ca name=\"examples\"\u003e\u003c/a\u003e\n\n## Examples\n\nYou can run the examples on your local machine and tinker with them or if you simply want to have a look, you can go directly to the [demo page](https://solidflowdemo.netlify.app/).\nTo run the examples first make sure your've gone trough all the steps explained in [development](#development). Once you've got that set up then go to the examples directory\n\n```bash\ncd examples\n```\n\nInstall it\n\n```bash\nnpm install\n```\n\nand run it\n\n```bash\nnpm start\n```\n\nyou should now be able to check it out on your [localhost](http://127.0.0.1:3000/). You can use the examples as a template for development.\n\n## Credits\n\nCredits go to [Product Dock](https://productdock.com/) by giving the means to be able to build this project.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiguelsalesvieira%2Fsolid-flow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmiguelsalesvieira%2Fsolid-flow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiguelsalesvieira%2Fsolid-flow/lists"}