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.
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.
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)...
Readit News
Easy install with a NPM or Yarn package!
Would be great if it could generate static images of a diagram in e.g. SVG.
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.
What's the purpose, then?
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)
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.
Has anybody made a customizable JSON tree editor / browser for Svelte? Especially one that supports schema driven custom views for json data structures.
Is there a React library that does this well?
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).
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.
[1] http://jcosine.if.unram.ac.id/public/site/images/suwardiman/...
"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-...