Svelvet 6.0 — The Svelte Component Library for Building Interactive Node-Based Diagrams

5 min readFeb 9, 2023

Introduction

Svelte is a highly popular frontend compiler due to its user-friendly design and outstanding performance. Svelvet, a component library for Svelte developers, enables the creation of interactive UI using node-based components. With the release of Svelvet 6.0, we have added 8 new features while focusing mainly on enhancing the application’s growth and scalability through a complete overhaul of the code base. This makes Svelvet more efficient and its components more modular, enhancing the developer experience.

New Features

Resizable Nodes —

Svelvet now makes nodes more powerful by enabling resizability as a new default feature for all the nodes in Svelvet component. Hover your mouse to the right bottom corner of each node, you can see a purple mini dot attached. Click and drag to watch the magic happen.

Adaptive/Dynamic Anchors —

Anchors now automatically arrange themselves in an aesthetically pleasing way without user input. Adaptive anchors are now the default anchor mode.

Custom Anchor Positions —

The default anchors can appear at the top, bottom, left, or right center of the node but it does not always satisfy developers’ specific needs. Svelvet 6.0 introduces custom anchor position as a new feature. Developers can now pass in a custom callback function to decide where they want the anchors to appear on the node.

Custom Classes —

Custom classes for edges to allow for CSS styling. Each edge can now have an added custom class property to allow for the user to style and customize edges with the full scope of CSS properties.

Click Event for Edges —

This event executes a user-defined callback. In the example below, we used a simple event pop-up. Developers can define their own callback functions!

Interactive Editable Edges—

Users are now able to interactively edit edges in their diagrams. The edit modal of edges are enabled using the editable prop as the node edit modal. Right click on the edge to bring up a modal that will have customizable options! You can change the edge label, edge type and delete the edge through the modal. To make our interactive edges more user friendly, they now highlight when you hover and click on them, increasing accessibility.

Unfold and Collapse the Diagram—

Unfold and collapse is a feature requested by a lot of Svelvet users and now it’s available as an additional prop that developers can specify in their Svelvet components to enable the unfold and collapse functionality. To enable unfold and collapse functionality, just pass collapsible prop and set the value to true into your Svelvet component.

Installation

npm

To install and save your package.json dependencies, run the command below using npm:

npm install svelvet

or yarn

yarn add svelvet

After you’ve installed Svelvet, head over to Basic Usage to see how to render the component. To import Svelvet into the portion of code that will be using it, simply put this in the file:

import Svelvet from 'svelvet'

DEMO

The Svelvet component library is composed of nodes and edges, these nodes and edges will render according to the values you assign them in your application. In this example we will be rendering the nodes and edges with the information below:

 <script>
  import Svelvet from 'svelvet';

  const initialNodes = [
    {
      id: 1,
      position: { x: 225, y: 10 },
      data: { label: "Resize node" },
      width: 100,
      height: 100,
      bgColor: "pink",
      borderColor: "transparent"
    },
    {
      id: 2,
      position: { x: 390, y: 180 },
      data: { label: "Mixed Anchors" },
      width: 125,
      height: 40,
      bgColor: "white",
      textColor: "black",
      targetPosition: "left"
    }
  ];

  const initialEdges = [
    { id: "e1-2", source: 1, target: 2, label: "edge label" }
  ];
</script>

<Svelvet
  nodes={initialNodes}
  edges={initialEdges}
  width={500}
  height={500}
  initialLocation={{ x: 350, y: 200 }}
  nodeCreate={true}
  editable={true}
  shareable={true}
  background
/>

Once you render the Svelvet component with the information you have just initialized you will see the diagram below:

Once rendered the diagram will be interactive and dynamic with the functionalities of drag, resize, edit, and delete.

Final Thoughts

We want to thank the Svelte community for all the support we have received! Please feel free to suggest new features (and notify us about bugs) on Github . If our product was helpful we would appreciate a star on GitHub; your support is greatly appreciated!