https://github.com/ranitmanik/reactflow-prototype

This project is a complex prototype implementation of ReactFlow using the free version of @xyflow, showcasing advanced features such as custom nodes, custom edges, connection validation, and complex grouping of elements.
https://github.com/ranitmanik/reactflow-prototype

reactflow reactflow-example xyflow

Last synced: 7 months ago
JSON representation

This project is a complex prototype implementation of ReactFlow using the free version of @xyflow, showcasing advanced features such as custom nodes, custom edges, connection validation, and complex grouping of elements.

• Host: GitHub
• URL: https://github.com/ranitmanik/reactflow-prototype
• Owner: RanitManik
• License: gpl-2.0
• Created: 2024-11-14T18:32:36.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-11-22T08:49:41.000Z (11 months ago)
• Last Synced: 2025-03-19T19:46:58.629Z (7 months ago)
• Topics: reactflow, reactflow-example, xyflow
• Language: TypeScript
• Homepage: https://reactflow-pro.netlify.app/
• Size: 233 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
# ReactFlow Prototype

![GitHub Created At](https://img.shields.io/github/created-at/RanitManik/ReactFlow-prototype)

![GitHub repo size](https://img.shields.io/github/repo-size/RanitManik/ReactFlow-prototype)

![GitHub Discussions](https://img.shields.io/github/discussions/RanitManik/ReactFlow-prototype)

![GitHub License](https://img.shields.io/github/license/RanitManik/ReactFlow-prototype)

![wakatime](https://wakatime.com/badge/github/RanitManik/ReactFlow-prototype.svg)

![Deploy Status](https://api.netlify.com/api/v1/badges/f5d91c72-5486-47f6-91d2-ad31c57e04e4/deploy-status)

This repository contains a complex implementation of ReactFlow using the free version of `@xyflow/react`, showcasing advanced features such as **custom nodes**, **custom edges**, **connection validation** and **complex grouping** of elements.

## Features

- **Custom Nodes**: This project demonstrates how to create custom nodes with advanced styles and logic.

- **Custom Edges**: The custom edges provide dynamic behavior with interactive and visually appealing connections.

- **Complex Grouping**: Nodes and edges are grouped into logical units, making it easy to manage large flows.

- **Connection Validation**: When two nodes are connected by edges, validation is required. For example, self-connections are not allowed for nodes, etc.

- **Interactive Design**: Users can interact with the flow by dragging nodes, creating connections, and manipulating groups of nodes and edges.

## Demo

Check out the live demo here:  

[Live Demo](https://reactflow-pro.netlify.app/)

## Installation

To get started with the project locally, follow these steps:

1. **Clone the repository:**

   ```bash

   git clone https://github.com/RanitManik/ReactFlow-prototype.git

   cd ReactFlow-prototype

   ```

2. **Install dependencies:**

   This project uses `npm` or `yarn` for dependency management. Install the necessary dependencies by running:

   ```bash

   npm install

   ```

   or, if you prefer yarn:

   ```bash

   yarn install

   ```

3. **Run the project:**

   Start the local development server:

   ```bash

   npm start

   ```

   This will open the application in your browser at `http://localhost:3000`.

## Contributing

We welcome contributions! To contribute to this project:

1. Fork this repository.

2. Create a new branch.

3. Make your changes and add tests (if necessary).

4. Open a pull request with a description of your changes.

Please ensure that your code follows the existing style and passes all linting and tests before submitting a pull request.

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.