Kabel

Node-based visual editor framework with an API inspired by Google’s Blockly project.
Fully extensible with custom nodes, fields, and renderers.
Written in TypeScript and ready to use out of the box.

Installation

You can install Kabel in two main ways:

Using npm (recommended):

cd path/to/your/project
npm install @kabel-project/kabel

Cloning from GitHub (Experimental builds):

git clone https://github.com/FentFentFent/Kabel.git --depth 1
cd Kabel
npm install
npm run build

Then import Kabel from the build:

import Kabel from './Kabel/dist/kabel.js';

Quick Starter HTML

<div id="workspace-container" style="width:800px;height:600px;"></div>
<script type="module">
  import Kabel from 'kabel';
  Kabel.inject('workspace-container', {
    /* Your options here... */
  });
</script>

Features

• ⚡ Extensible: create custom nodes, fields, and renderers.
• 🛠️ TypeScript support out of the box.
• 🎨 Renderer override system for custom visuals.
• ⌨️ Built-in workspace controls (WASD movement, drag, etc.).

Example

import Kabel from 'kabel';

const ws = Kabel.inject('workspace-container', {
  controls: { wasd: true, wasdSmooth: true }
});

// Register a simple node
Kabel.Nodes['example'] = {
  init() {
    this.jsonInit({
      labelText: 'Hello Kabel',
      type: 'example_node',
      primaryColor: '#cc0c00'
    });
  }
};

For another example refer to Kabel Test

Documentation

Please refer to Kabel Guide

License

MIT