A minimal, lightweight, and highly customizable node-based editor library for SolidJS. Built with performance and flexibility in mind.

📖Wiki ✨DEMO (Kitx Lab) 💖Support

---

npm install solid-kitx

Basic Usage

import { createStore, Component } from "solid-js";
import { SolidKitx, ConnectionType, NodeType, ViewPort } from "solid-kitx";
import "solid-kitx/index.css";

const App: Component = () => {
  const nodesStore = createStore<NodeType[]>([
    {
      id: "node-1",
      x: 100,
      y: 100,
      width: 150,
      height: 100,
      data: { label: "Node 1" },
    },
    {
      id: "node-2",
      x: 400,
      y: 200,
      width: 150,
      height: 100,
      data: { label: "Node 2" },
    },
  ]);

  const connectionsStore = createStore<ConnectionType[]>([
    {
      id: "connection-1",
      from: { id: "node-1", side: "right" },
      to: { id: "node-2", side: "left" },
    },
  ]);

  const onNodesChange = () => {
        // save in db
  }
  const onConnectionsChange = () => {
        // save in db
  }
  const onViewportChange = () => {
        //
  }

  const viewportSignal = createSignal<ViewPort>({ x: 0, y: 0, zoom: 1 });

  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <SolidKitx
        nodesStore={nodesStore}
        connectionsStore={connectionsStore}
        viewportSignal={viewportSignal}
        onNodesChange={onNodesChange}
        onConnectionsChange={onConnectionsChange}
        onViewportChange={onViewportChange}
        gridSize={50}
      />
    </div>
  );
};

export default App;

Kitx Lab

KitX Lab is an experimental space for visualizing ideas using nodes and connections. It’s meant to help you map out structures, explore relationships, and think through systems in a more visual way.

This project is still in active development, and many parts are incomplete or may change as it evolves. That's why it includes backup which you should always consider when finishing a design.

Developers are welcome to contribute, experiment, or suggest ideas. If you want to explore the source code, everything is available in the dev/ directory of this repository.