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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
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.
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.
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)...
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.
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?
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.
@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.
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 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.
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.
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!
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.
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.
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.
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]
Easy install with a NPM or Yarn package!