A simple yet complex Solidjs component for building interactive node-based diagrams and editors

📖 Documentation | 🧪 Demo

---

Installation

To install it, simply run

$ npm install solid-flow

Usage

A very simple example to get started with solid-flow. If you want to check out more complex examples plese refer to examples

import { createEffect, createSignal } from "solid-js";
import { SolidFlow } from "solid-flow";
import styles from "./styles.module.css";

const initialNodes = [
    {
        id: "node-1",
        position: { x: 50, y: 100 },
        data: {
            content: <p>This is a simple node</p>,
        },
        inputs: 0,
        outputs: 1,
    },
    {
        id: "node-2",
        position: { x: 350, y: 100 },
        data: {
            label: "Node with label",
            content: <p>This is a node with a label</p>,
        },
        inputs: 1,
        outputs: 0,
    },
];

const initialEdges = [
    {
        id: "edge_node-1:0_node-2:0",
        sourceNode: "node-1",
        sourceOutput: 0,
        targetNode: "node-2",
        targetInput: 0,
    },
];

const Example = () => {
    const [nodes, setNodes] = createSignal(initialNodes);
    const [edges, setEdges] = createSignal(initialEdges);

    return (
        <div class={styles.main}>
            <SolidFlow
                nodes={nodes()}
                edges={edges()}
                onNodesChange={(newNodes) => {
                    setNodes(newNodes);
                }}
                onEdgesChange={(newEdges) => {
                    setEdges(newEdges);
                }}
            />
        </div>
    );
};

Development

To begin development first you need to git clone this repository to your local machine. Once that's done, on the main directory, run

npm install

to install the packages and then run

npm start

to rollup the project.

From here, everytime a change is made the project will be built automatically. To test it out follow the instructions on examples and use of the examples as a development template.

Examples

You 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. To run the examples first make sure your've gone trough all the steps explained in development. Once you've got that set up then go to the examples directory

cd examples

Install it

npm install

and run it

npm start

you should now be able to check it out on your localhost. You can use the examples as a template for development.

Credits

Credits go to Product Dock by giving the means to be able to build this project.