Odysea NPM | npm.io

Convert Your Ideas To A Simple And Excitig Journay With Odysea!

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 Component's Props

Name	Type	default	Description
nodes	Node[]	[]	array of nodes
edges	Edge[]	[]	array of edges
width	string	"auto"	width of the container
height	string	"auto"	height of the container
transition	string	0, 0	view coordinates
scale	string	1	scale of the container
bg	string	none	background color of the container

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,
};