{"id":17463295,"url":"https://github.com/pixeledcode/react-flow","last_synced_at":"2025-06-21T16:35:37.722Z","repository":{"id":167497111,"uuid":"643126255","full_name":"PixeledCode/react-flow","owner":"PixeledCode","description":"A flow diagram app built with react-flow","archived":false,"fork":false,"pushed_at":"2024-02-18T09:14:52.000Z","size":371,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-14T18:52:36.385Z","etag":null,"topics":["pwa","react","react-flow","tailwindcss","vite"],"latest_commit_sha":null,"homepage":"https://chatbot-flow.vercel.app/","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/PixeledCode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-05-20T07:16:45.000Z","updated_at":"2025-02-12T15:22:13.000Z","dependencies_parsed_at":"2023-05-22T16:30:42.566Z","dependency_job_id":null,"html_url":"https://github.com/PixeledCode/react-flow","commit_stats":null,"previous_names":["pixeledcode/react-flow"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/PixeledCode/react-flow","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PixeledCode%2Freact-flow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PixeledCode%2Freact-flow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PixeledCode%2Freact-flow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PixeledCode%2Freact-flow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PixeledCode","download_url":"https://codeload.github.com/PixeledCode/react-flow/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PixeledCode%2Freact-flow/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261159312,"owners_count":23117990,"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","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":["pwa","react","react-flow","tailwindcss","vite"],"created_at":"2024-10-18T10:09:17.243Z","updated_at":"2025-06-21T16:35:32.700Z","avatar_url":"https://github.com/PixeledCode.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Flow\n\nAn implementation of a node based editor using react flow\n\n## Installation\n\nTo get started with this application, you will need to follow these steps:\n\n1. Clone the repository: `git clone https://github.com/PixeledCode/react-flow.git`\n2. Install dependencies: `pnpm install`\n3. Start the development server: `pnpm run dev`\n4. Open the application in your browser at http://localhost:5173\n\n## Usage\n\nThe application allows users to create flow diagrams. The user can create multiple nodes and connect them with edges. Each node can be customized with a label.\n\n## Directory Structure\n\n```\n├── public\n├── src\n│   ├── assets\n│   ├── components\n│   │   ├── nodes\n│   │   ├── panels\n│   │   └── ui\n│   │   └── index.ts\n│   ├── config\n│   │   ├── site.ts\n│   │   └── store.ts\n│   ├── lib\n│   │   └── utils.ts\n│   ├── styles\n│   ├── App.tsx\n```\n\n## Terminology\n\nYou can read about the terminology [here](https://reactflow.dev/docs/concepts/terms-and-definitions/) but here is a quick summary:\n\n- **Node**: A node is a single element in the flow diagram. It can be connected to other nodes with edges.\n- **Edge**: An edge is a connection between two nodes. It can be used to connect two nodes together.\n- **Graph**: A graph is a collection of nodes and edges. A graph can have multiple nodes and edges.\n- **Panel**: A panel is a component that is used to change the settings of a node or add a new node to the graph.\n\n## Features\n\nSome of the key features of the application include:\n\n- Creating multiple Nodes.\n- Creating Edges between Nodes.\n- Creating Nodes from a list of available options.\n- Change the settings of a Node.\n- Validating Graph Integrity.\n- Offline Functionality with PWA.\n\n## Styling\n\nThe application uses [Tailwind CSS](https://tailwindcss.com/) for styling.\n\n## Add a new Node\n\nCurrently, the application only supports a single type of Node (Text). To add a new Node, you will need to follow these steps:\n\n1. Create a new file in the `src/components/nodes` directory for a new type of node.\n2. Create a new file in the `src/components/panel` directory for a new setting panel.\n3. Add the new Node to the `nodeTypes` object in the `src/config/site` file.\n4. Add the new panel to the `getPanel` function in the `src/components/panel` file.\n5. Add the update logic for the new Node in the zustand store in `src/config/store`.\n\n## Contributing\n\nContributions to this project are always welcome. Here are some ways you can contribute:\n\n- Test the application and report any bugs or issues\n- Suggest new features or improvements\n- Submit a pull request with bug fixes or new features\n\nWhen contributing to this repository, please first discuss the change you wish to make via issue, email or any other communication method before making a change.\n\n## License\n\nThis application is licensed under the MIT License. Feel free to use and modify the code for personal or commercial use.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixeledcode%2Freact-flow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpixeledcode%2Freact-flow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixeledcode%2Freact-flow/lists"}