Svelvet 9.0 — Advancing Node-Based UIs with Svelte 4.0 Integration and Improved Developer Experience

5 min readNov 16, 2023

Version 9.0 By Henry Sweat, Spencer Huey, Jeremy David and John Costello

Intro

We are thrilled to announce the release of Svelvet 9.0, the latest update to the leading node-based UI library for the Svelte frontend framework, bringing new features and enhancements to elevate your development experience. This upgrade features a comprehensive migration to Svelte 4.0 and introduces new components that leverage our robust dataflow system. Additionally, we’ve streamlined popular existing components, added shapes frequently used for flowcharting applications, and much more! With these enhancements, Svelvet 9.0 reaffirms our commitment to empowering developers to create more dynamic, efficient, and visually appealing applications than ever before.

New Features

Compatibility with Svelte 4

Equally important to advancing our product is the commitment to maintaining Svelvet’s compatibility with its dependencies, especially Svelte, our primary framework. Launched in the summer of 2023, Svelte 4.0 brought enhancements in performance and stability that we were eager to incorporate into our library. Thanks to the active participation of our developer community, we were able to swiftly identify and resolve all known issues related to the migration. This ensures users are able to take advantage of the latest and greatest features both Svelte and Svelvet have to offer.

End-to-End Testing Coverage

In order to enable rapid and efficient developer contributions while safeguarding the integrity of the existing codebase, we are excited to announce that we have nearly doubled our testing coverage to include almost every component in the library. With more extensive testing coverage, contributors can confidently make changes, knowing that any potential issues are likely to be caught early in the development cycle.

User Requested Features (arrows and pannable)

Svelvet 9.0 introduces a couple of features that are a direct response to user requests! Notably, users can now seamlessly incorporate arrows at the ends of edges. Custom Edge components gain new properties, “start” and “end,” empowering users to easily introduce arrows to specific edges. Arrows can also be created on all edges on the canvas via the “endStyles” property on the Svelvet component. While setting a global standard, this feature maintains flexibility by allowing custom edges to selectively overwrite these styles, emphasizing Svelvet 9.0’s commitment to user-centric updates and enhanced customization options.

Moreover, Svelvet 9.0 introduces enhanced control over canvas interactions. The new “pannable” property within the Svelvet component empowers users to regulate panning behavior on the canvas. This feature complements the existing “fixedZoom” property, which adds an additional layer of control by preventing canvas zooming (fixedZoom is not a new property, however it was not included in the previous documentation).

Toggle Data Flow Component

One of the standout features in Svelvet is the data flow system. Included in this update is a new addition to the existing suite of data flow components — the Toggle! The Toggle component renders a simple switch on your nodes that can be used with Svelvet’s input and output stores to transfer a boolean between nodes. That boolean can then be used to do whatever conditional logic you desire. See below for a demonstration of the new component (and the new arrows as well!).

Reworked Editor Component

Another existing feature that we’ve reworked is the editor component. Prior to the rework, the component required some debugging as it wasn’t fully functional. After reworking the component, with just one right-click a node can be edited. Users now have the ability to edit the label of a node, resize its height and width, as well as finally being able to delete a node. Below is a demonstration of the editor in action.

Node Shapes Example

In order to demonstrate what Svelvet is capable of, we took a moment to see what other industry leaders are doing in the space. What we found is that there was an opportunity for us to not just meet an industry benchmark, but to redefine the standards and enhance user experiences in unprecedented ways. That opportunity came in the form of Svelvet node shapes. The premise was simple: enable users to effortlessly wrap an SVG element within a Svelvet node, allowing them to craft stunning, customizable shapes with minimal effort.

Below is an example that barely scratches the surface of what’s possible. Beyond what you see here lies endless possibilities with endless customization.

Flowchart

The Flowchart component, leveraging the simplicity of Mermaid syntax, allows for the creation of detailed, node-based flowcharts from plain text descriptions. By assigning a Mermaid string to the ‘mermaid’ property of the Svelvet component, users can instantly convert their text-based flowcharts into dynamic, interactive diagrams. The Flowchart component ensures a smooth, user-friendly interface, making it ideal for both novice and experienced designers seeking to visualize complex processes or data flows.

For example, a user can pass the following string to the Svelvet component and receive the output below:

<script>
 import  Svelvet  from 'svelvet';

 const mermaidStr = `A[Flowchart Time!] --> B[Choice of Tool]
    B --> |Ye Olde Static Flowchart| C[Back to the Stone Age]
    B --> |Svelvet's Flowchart Component| D[Smooth interactivity]
    D --> E[Effortless styling]
    D --> F[Unparalleled customization]`;
</script>

<body>
 <Svelvet 
  theme="dark" 
  width={800} 
  height={800} 
  title="flowchart" 
  controls 
  mermaid={mermaidStr} />
</body>