Webish

Visual SVG web of connected draggable components.

• Demo

Features

• Super Lightweight (400B compressed)
• Uses SVG web for performance.
• Pure Javascript (Uses No JQuery or Frameworks).
  • But can be used with any.
• Typescript (Types included).
• Fully customizable using CSS.
• Works in Chrome, Safari, IE, Firefox.

Usage

<div id=container>
    <div class=box id=e1></div>
    <div class=box id=e2></div>
    <div class=long-box id=e3></div>
</div>

import Webish from 'webish';

let container = document.getElementById('container');
let web = new Webish(container /* containerEl */, [
    
    // Array of the connected components, with the direction of connection.
    // The components would be connected clockwise in order.
    {node: document.getElementById('e1'), direction: 'bottom'},
    {node: document.getElementById('e2'), direction: 'right'},
    {node: document.getElementById('e3'), direction: 'top'}
]);

// To redraw the web, maybe on dragEnd
container.addEventListener('dragend', (e) => {
    // ...
    webish.redraw();
})

.webish-connector {
	fill: rgba(0, 0, 255, 0.1); // Color of the web
}