Odysea

A lightweight and minimal Solid component for building interactive graphs and node-based editors.

Key Features

• Easy to use: Just provide the nodes and edges data and it automatically gets converted to an interactive graph with seamless zooming and panning.
• Customizable: Different edge types and support for custom nodes and custom edges.
• Fast rendering: Only nodes that have changed are re-rendered and only those in the viewport are displayed
• Reliable: Written in Typescript.

Installation

The easiest way to get the latest version of Odysea is to install it via npm:

npm install odysea # or yarn add

Quick Start

import Flow from "odysea";

function Flow(props) {
  return <Flow nodes={props.nodes} edges={props.edges}></Flow>;
}

Flow Component's Props

type Node = {
  id: string,
  data: T,
  type: string ("regular(default)" | "dot" | "note" | "backdrop"),
  position: { x: number, y: number },
  inputPosition?: "top" | "bottom" | "left" | "right",
  outputPosition?: "top" | "bottom" | "left" | "right",
  width?: number,
  height?: number,
  inputHandle?: boolean,
  outputHandle?: boolean,
  bgColor?: string,
  fontSize?: number,
  borderColor?: string,
  borderRadius?: number,
  textColor?: string,
};

type Edge = {
  source: string,
  target: string,
  label?: string,
  type?: "bezier(default)" | "straight" | "smoothStep" | "step",
  animated?: boolean,
  arrow?: boolean,
  style?: JSX.CSSProperties,
  labelStyle?: JSX.CSSProperties,
  labelBgStyle?: JSX.CSSProperties,
};

Live Demo

Live Example On stackblitz

• Pan: alt + drag
• Zoom: mouse wheel

More Fine Grained API

There is also other components if you need more control on your flow

import Flow from "odysea";
import { Node, Edge } from "odysea";

function Flow(props) {
  return (
    <Flow nodes={props.nodes} edges={props.edges}>
      <Node data={...} />
      <Edge data={...} />
    </Flow>
  );
}

Development

Before you start you need to build the project using npm run build. Then install the Odysea dependencies via npm install.

If you want to contribute or develop custom features the easiest way is to start the dev server:

npm start

Credits

Odysea is heavily based on react flow. Without them Odysea would not exist. Please consider donating to them.

• solid-styled - for styling components

License

Odysea is MIT licensed.