Show HN: Svelvet – A component library for building interactive flow diagrams | Hacker News Reader

Show HN: Svelvet – A component library for building interactive flow diagrams

svelvet.io

354 pointsawillettnyc91 comments

Launch day is here! Our team is proud to present our open source product, Svelvet is a lightweight Svelte component library for building interactive node-based flow diagrams.

Easy install with a NPM or Yarn package!

Nice!

Would be great if it could generate static images of a diagram in e.g. SVG.

Really cool. Love stuff like this and appreciate the time spent doing a nice documentation page. Congrats and hopefully a fun learning challenge for you all.

thank you :) our team worked really hard and it definitely pushed our abilities further! and I really enjoyed working with Svelte!

It looks like the title got changed and now it says Svelte instead of Svelvet. Congrats on the launch!

Are you planning to offer authoring of such flow diagrams as a capability? Users should be able to nost just reposition nodes, but add/modify/remove nodes and edges both and edit their metadata.

This would be super-useful because currently not many tools exist for non-tech users for creating graph datasets AND visually laying them out in a sensible way.

I thought that's what this was...

What's the purpose, then?

Thanks for the credits (creator of React Flow here)! Our website is MIT and so are the docs and all the content but I don't get that you just copied content like whole sentences of the docs or parts of the readme for example.

Why not? If the content is technical and the concept is near identical then why waste time writing the same thing a different way?

Looks like a software bootcamp project, so they probably did it to save time on that bit. But you picked the wrong license if you don't want people to copy you.

> Looks like a software bootcamp project

Bootcamps are treasure troves of stolen projects. I got into a rabbit hole on this a few weeks ago, and you'll find the same "project" done by several different people at several different bootcamps. There were even some that were verbatim the same despite proudly saying the project was independent.

Thanks for making it MIT! This is exactly what MIT means. Perhaps you should change the license.

Is this like a business or are you just really committed to the project? I see you all have it listed on your linkedin, and was wondering what the long term goals are for the project.

this is a 100% an open source product developed under tech accelerator OSLabs! :) we noticed svelte developers requesting a library like this, so we built it to try to fill that need. long-term, we hope to maintain the codebase, create features, fix bugs and respond to requests from the larger svelte dev community!

The performance on my S21 Ultra is pretty bad. Feels like ~40fps and stuttering. Also, it doesn't have mobile interaction for dragging nodes. I can only pan the canvas.

Looks great on an S20 Note Ultra FWIW

On my phone, with Chrome Android it's smooth and fast, but on Firefox Android it feels about 20fps and isn't great.

Not to detract this component but I can say with certainty that people will be writing Desktop applications with Svelte/React running inside Electron that takes up gigs of ram. It will be interesting to see how this performs in such environment.

Bit off topic but I really dig the clean look and feel of this. Is there anything close in Flutter? Think building this in Flutter might improve performance for your case (running on a high end samsung phone)

I keep hearing this, but I've never figured out why it might be the case, and particularly with Electron over Chrome/FF?

Surely if react/svelte etc are built well they're relatively low processor / compute? When manipulating canvas / images / rich-whatever, I assume graphic accelerated functions would work substantially better than alternatives.

I'm not sure what the issue was, could be the particular browser they are using (Samsung browser is horrible) but I wouldn't be surprised if it runs into performance issues as number of nodes increase.

I'm talking specifically about electron.

Runs flawlessly on my Pixel 4 XL

Very nice! I love Svelte, and reading code like this is a great way to learn how to use it better.

Has anybody made a customizable JSON tree editor / browser for Svelte? Especially one that supports schema driven custom views for json data structures.

> schema driven custom views for json data structures

Is there a React library that does this well?

It would be great to have some more helper lines when dragging things aroung and some optional snapping to the helper lines, to be able to properly align everything. I often use yEd Graph Editor (offline) and have yet to find a tool, doing it as good as yEd. It also looks like the connectors of a node, where an edge joins with the node, are always in the middle of a side of the rectangles. For many diagrams you will need more than that and an edge should be able to join with a rectangle at any place.

While I can see how point-and-clickers love things like this, I prefer building connections using markup. So things like Graphviz, PlantUML, and Mermaid appeal to me. However, they leave a lot left to be desired in terms of simplicity. Wouldn't YAML or something similar be better at representing connections, and just have some markup options for types?

If you are going to let the program do the layout automatically, then graphviz dot already does really good, right?

I think the reason people make these projects is specifically because they want to manually place some nodes at particular 2d positions, which I think is a little difficult if you are just recording nodes and connections. (I think many people are not as excited about solutions like "just use a bunch of invisible edges to enforce additional position requirements" as us).

We think maybe we should add a layout alg. based on the input being relative or absolute grid position (plus maybe unconstrained nodes). Someone should create a summer intern project to get this started.

This is so great.

How hard would/will it be to make the nodes draggable?

Edit: maybe it already does this but it is hard to interact with on the phone.

Edit2: can’t move them on iPad either. Maybe a use case for long press? Double-tap? Two finger select?

Edit3: Is Svelte in general under-developed when it comes to handling touch events? I can’t find a good touch example with draggable components.

Indeed, they are draggable.

hi, thank you for this suggestion! We noticed the same issue during development and we definitely have it listed as a feature we'd like to add on. :) I do not believe that handling touch events is an issue with Svelte - for example, with Svelvet you should still be able to pan and zoom across the graph on your phone. We just don't have that functionality with dragging nodes yet.

Right. Sounds great. I’m just mentioning I haven’t seen a svelte touch draggable element example in any of the repls or demos so far.

Man, I understood something else under "interactive", I didn't see any flow diagrams either. I thought it'd be a system where you can enter inputs and then it would visually show which paths are taken through the flowchart, e.g. given this diagram [1] and some inputs one could step through the chart (and even change inputs to see the new paths taken)...

[1] http://jcosine.if.unram.ac.id/public/site/images/suwardiman/...

Nice, so React Flow for Svelte?

Svelte https://github.com/oslabs-beta/Svelvet

Seems to be - which is cool, Im a fan of Svelte so more community investment is great!

"Svelvet is an open source Svelte component library which seeks to port React Flow functionality over to Svelte." [1]

[1] https://medium.com/@alexander.zambrano/simplify-application-...

It’s a timely development given React Flow’s recent cash grab.

I use PlantUML + Dropbox to share . It's not pretty but it is powerful. We make it interactive by editing the text file and saving the changes. There is also a VSCode plugin for PlantUML,which I have not tried.

Oh man, I could have really used something like this 4 years ago. I was doing a personal project that would have involved a node graph UI, and it was actually kind of challenging finding an existing library this simple and nice looking. Yeah, I know there's D3.js but that involved way more knowledge and learning than I was interested in. If I remember correctly, I ended up writing my own.

Dunno if it's feasible with the way it's designed, but it'd be really useful for this to have force-directed drawing, even if it's not a real-time thing.

> Yeah, I know there's D3.js but that involved way more knowledge and learning than I was interested in.

Same, d3 looked very powerful but had a steep learning curve. I was looking for something simple to generate process trees in real time and ended up using cytoscape js [0], helped me have a working POC in an hour, highly recommended.

[0] https://js.cytoscape.org/

If you're on React these days ReactFlow (https://reactflow.dev) is good for this.

This is awesome! Great work! I’m so excited to see more things being built with svelte.

Looks very good! I haven’t read all the documentation but I haven’t seen it so I’ll ask here: is it possible to automatically position the nodes in rows? Or are there APIs which would allow me to do that?

Nice project.

Quite sad Google Diagrams is stuck in the stone ages. They solved the hard parts of multi-user editing diagrams before anyone else and then just basically stopped. This would be a nice feature.

Can it import DOT data? I have too many graphviz tools to just abandon dot.

How do JS folks come up with these names? Probably coincidentally it means to starve in Norwegian.

EDIT: Ohh, it’s an English word

“(of a person) slender and elegant.”

React doesn't, but Svelte is.

https://www.youtube.com/watch?v=ZZoB5frlcnE

Svelte is an English word but Svelvet, the actual name of the posted project, is not.

My eyes tricked me to read it as - Servlet!

Appears to have no named ports on nodes, key feature for many uses in my domain.

Beautiful, but so so slow. I wouldn't call this lightweight.

Is there a way to select and move multiple nodes at once?

What's the layout library? elkjs?

So clean! love it.

@dang or whoever changed the title - this title "Svelte: A component library for building interactive node-based flow diagrams" is incorrect, Svelte is the underlying JS framework but Svelvet is the product that is being shared here.

You can't fix titles by @danging but you can by emailing the mods about the problem.

@dangling references don't work?

nope, only participles, I've been told to.

Whoops - fixed now. Thanks!

Nice! Consider making this a proper Show HN instead! https://news.ycombinator.com/showhn.html

Thanks for the advice! Do you think the mods would mind a double post?

Don't double post, just email the mods to add the Show HN: prefix. If you're here to talk about your thing, this is already a show hn.

Fix the title: s/Svelte/Svelvet/

Svelvet is a lightweight Svelte component library

It was originally correct. Not sure why it was incorrectly changed to Svelte.

Svelting corrector.

I'm not sure either! Fixed now though.

This title suggests Svelte is the component library, which confused me, because I knew Svelte as a front-end framework.

The component library is called Svelvet, and it's (presumably) made for Svelte.

Why was such a confusing name chosen? Even the Hacker News title already gets it wrong. Just think how many times this will cause confusion that wastes time being clarified.

I think the problem here is with HN's obsessive title editing, not the library name.

I agree on the title editing, which I in general dislike, especially when no comment is left.

But I disagree that this isn't confusing. Imagine the conversation:

    Dev1: Says something about nodal diagrams.
    Dev2: Suggests taking a look at Svelvet.
    Dev1: Confused since they're already using Svelte and ignores the comment or suggestion and moves on.
    <months later>
    Dev1: We're developing our own internal nodal diagram library.
    Dev2: Did you look at Svelvet like I suggested.
    Dev1: Yes, we're already using Svelte.
    Dev2: No, I mean *Svelvet*.
    Dev1: Oh...

It's like calling a React library Reactor or Reacts or something like that. It's way too close for no reason.

Just look at this thread for many examples of why naming your library so close to the framework it sits on top of is a bad idea.

Imagine how much time Dev2 could have saved by sharing a link instead of name dropping obscure libraries they read about on HN

It's an anecdote. Conversations, text-based or auditory, happen in passing. Maybe you missed where someone literally did drop a link (this post) and people, including the mods who renamed the title from Svelvety to Svelte and then back again, confused the two.

Normally I consider this kind of comment boring, but... wow. I completely agree.

I think they should have just called it Velvet. (or something else entirely)

Not to detract, but if you're looking for something similar that isn't batteries-included, I wrote a web component library for node editors. Requires a bit of setup but gives you absolute control, would be interested for someone to try it in a new project and give feedback!

https://github.com/qix-/node-editor

Also check out: https://sebastien.drouyer.com/jquery.flowchart-demo/

This looks potentially useful. Is there a demo somewhere? And an example where the node graph created by users can be saved and served again?

Thanks! Not at the moment, this was built for an app idea I had that I haven't worked on beyond this. I have a couple of ideas for which I wish such a library existed, so I made one. It's just the display components, no plumbing/serialization.

Looks great! Is there an interactive demo somewhere? I couldn't see a link sorry

Just the test.html in the repo that can be served locally. I should probably host it somewhere.

This post [Svelte: A component library for building interactive node-based flow diagrams (svelvet.io)] is named incorrectly. Svelte is a "framework" - whereas this is Svelvet.

This looks awesome though! Thank you for sharing!

Mods: typo in title - it's SVELVET (not Svelte, a web framework which Svelvet happens to use)

The page causes my CPU to go crazy.

Scrolling on my smartphone was a pain. Interestingly the diagram did scroll fine, but the whole page mad problems.

On desktop Firefox, quite a lot of jank scrolling past the "Beautiful and Customizable" section. The diagram itself is fine, but the diagram embedding on the page seems to cause a performance hit.

Shouldn’t the title be Svelvet: A component library…

Why? An NPM package??? I'm baffled.

What's baffling about it?

It's a Svelte component library.

Also check out ant vision components they're super broad and they also have a node based editor. https://antv.vision/en/

Too bad the page requires Javascript to view. This trend is not conducive to expanding engagement by those of us who run script blockers like NoScript as the default mode.

[edit: If you show some minimal page description that doesn't rely on JS being run in the browser, then more people will be willing to unblock the script if the site looks interesting]

It's an _interactive_ component. How do you propose this be done _without_ javascript?

There is also the github page at https://github.com/oslabs-beta/Svelvet

EDIT: I see what you mean and I agree - _nothing_ works on the page without Javascript. It's just blank.

Reply on news.ycombinator.com