https://github.com/ryusufe/solid-kitx

Minimal and Fully Customizable Node-Based Canvas for SolidJS
https://github.com/ryusufe/solid-kitx

canvas flowchart library node-based solidjs

Last synced: 29 days ago
JSON representation

Minimal and Fully Customizable Node-Based Canvas for SolidJS

• Host: GitHub
• URL: https://github.com/ryusufe/solid-kitx
• Owner: ryusufe
• License: mit
• Created: 2025-11-20T22:51:08.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2025-11-22T20:21:11.000Z (about 1 month ago)
• Last Synced: 2025-11-22T22:12:37.961Z (about 1 month ago)
• Topics: canvas, flowchart, library, node-based, solidjs
• Language: TypeScript
• Homepage:
• Size: 334 KB
• Stars: 3
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
![Solid Kit Banner](https://github.com/ryusufe/solid-kitx/raw/main/assets/banner.png)

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



📖Wiki

✨DEMO

💖Support



---

```bash

npm install solid-kitx

```

## Basic Usage

```tsx

import { createSignal, Component } from "solid-js";

import { SolidKitx, ConnectionType, NodeType, ViewPort } from "solid-kitx";

import "solid-kitx/index.css";

const App: Component = () => {

  const [nodes, setNodes] = createSignal([

    {

      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 [connections, setConnections] = createSignal([

    {

      id: "connection-1",

      from: { id: "node-1", side: "right" },

      to: { id: "node-2", side: "left" },

    },

  ]);

  const [viewport, setViewport] = createSignal({ x: 0, y: 0, zoom: 1 });

  return (

    


      

    

  );

};


export default App;

```