11 ms·
Show HN: Svelvet – A component library for building interactive flow diagrams
- awillettnyc 4y agoLaunch 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!
- johnm 4y agoNice! Would be great if it could generate static images of a diagram in e.g. SVG.
- TIPSIO 4y agoReally 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.
- anulepau 4y agothank you :) our team worked really hard and it definitely pushed our abilities further! and I really enjoyed working with Svelte!
- DenseComet 4y agoIt looks like the title got changed and now it says Svelte instead of Svelvet. Congrats on the launch!
- nileshtrivedi 4y agoAre 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.
- NonNefarious 4y agoI thought that's what this was... What's the purpose, then?
- moklick 4y agoThanks 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.
- toqy 4y agoLooks 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.
- bmitc 4y ago> 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.
- schnebbau 4y agoWhy not? If the content is technical and the concept is near identical then why waste time writing the same thing a different way?
- klysm 4y agoThanks for making it MIT! This is exactly what MIT means. Perhaps you should change the license.
- NegativeLatency 4y agoIs 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.
- anulepau 4y agothis 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!
- simonbarker87 4y agoNice, so React Flow for Svelte?
- ramshorst 4y agoSvelte https://github.com/oslabs-beta/Svelvet https://github.com/oslabs-beta/Svelvet
- bennyp101 4y agoSeems 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-diagramming-with-svelvet-a8f664731243 https://medium.com/@alexander.zambrano/simplify-application-...
- steve_taylor 4y agoIt’s a timely development given React Flow’s recent cash grab.
- tobr 4y agoNice! Consider making this a proper Show HN instead! https://news.ycombinator.com/showhn.html https://news.ycombinator.com/showhn.html
- awillettnyc 4y agoThanks for the advice! Do you think the mods would mind a double post?
- pvg 4y agoDon'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.
- photochemsyn 4y agoToo 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]
- datashaman 4y agoIt'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 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.
- the_arun 4y agoMy eyes tricked me to read it as - Servlet!
- whiddershins 4y agoThis 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.
- johnm 4y agoIndeed, they are draggable.
- anulepau 4y agohi, 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.
- whiddershins 4y agoRight. 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.
- welder 4y agoThe page causes my CPU to go crazy.
- red_trumpet 4y agoScrolling on my smartphone was a pain. Interestingly the diagram did scroll fine, but the whole page mad problems.
- deleted 4y ago[deleted]
- b0ner_t0ner 4y agoOn 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.
- crackinmalackin 4y agoThis is awesome! Great work! I’m so excited to see more things being built with svelte.
- encryptluks2 4y agoWhile 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?
- bee_rider 4y agoIf 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).
- graphviz 4y agoWe 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.
- Philip-J-Fry 4y agoThe 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.
- darkerside 4y agoLooks great on an S20 Note Ultra FWIW
- a2128 4y agoOn my phone, with Chrome Android it's smooth and fast, but on Firefox Android it feels about 20fps and isn't great.
- upupandup 4y agoNot 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)
- iueotnmunto 4y agoI 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.
- upupandup 4y agoI'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.
- ravenstine 4y agoOh 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.
- lhoursquentin 4y ago> 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/ https://js.cytoscape.org/
- robertlagrant 4y agoIf you're on React these days ReactFlow (https://reactflow.dev https://reactflow.dev) is good for this.
- jspaetzel 4y agoBeautiful, but so so slow. I wouldn't call this lightweight.
- deleted 4y ago[deleted]
- Sloppy 4y agoWhy? An NPM package??? I'm baffled.
- jsnk 4y agoWhat's baffling about it? It's a Svelte component library.
- deleted 4y ago[deleted]
- manishsharan 4y agoI 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.
- bmitc 4y agoWhy 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.
- deleted 4y ago[deleted]
- vlunkr 4y agoI think the problem here is with HN's obsessive title editing, not the library name.
- bmitc 4y agoI 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.
- toqy 4y agoImagine how much time Dev2 could have saved by sharing a link instead of name dropping obscure libraries they read about on HN
- bmitc 4y agoIt'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.
- swyx 4y ago@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.
- deleted 4y ago[deleted]
- pvg 4y agoYou can't fix titles by @danging but you can by emailing the mods about the problem.
- DonHopkins 4y ago@dangling references don't work?
- pvg 4y agonope, only participles, I've been told to.
- dang 4y agoWhoops - fixed now. Thanks!
- dolmen 4y agoFix the title: s/Svelte/Svelvet/
- adontz 4y agoSvelvet is a lightweight Svelte component library
- Asraelite 4y agoIt was originally correct. Not sure why it was incorrectly changed to Svelte.
- deleted 4y ago[deleted]
- DonHopkins 4y agoSvelting corrector.
- dang 4y agoI'm not sure either! Fixed now though.
- deleted 4y ago[deleted]
- george_ciobanu 4y agoAlso check out ant vision components they're super broad and they also have a node based editor. https://antv.vision/en/ https://antv.vision/en/
- deleted 4y ago[deleted]
- nrabulinski 4y agoLooks 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?
- zelphirkalt 4y agoIt 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.
- operantoperator 4y agoHow 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.”
- DonHopkins 4y agoReact doesn't, but Svelte is. https://www.youtube.com/watch?v=ZZoB5frlcnE https://www.youtube.com/watch?v=ZZoB5frlcnE
- bmitc 4y agoSvelte is an English word but Svelvet, the actual name of the posted project, is not.
- ec109685 4y agoNice 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.
- DonHopkins 4y agoVery 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.
- bthomas 4y ago> schema driven custom views for json data structures Is there a React library that does this well?
- FunnyLookinHat 4y agoThis 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!
- deleted 4y ago[deleted]
- nabeards 4y agoShouldn’t the title be Svelvet: A component library…
- deleted 4y ago[deleted]
- chrisweekly 4y agoMods: typo in title - it's SVELVET (not Svelte, a web framework which Svelvet happens to use)
- deleted 4y ago[deleted]
- pitaj 4y agoIs there a way to select and move multiple nodes at once?
- mcv 4y agoThis 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.
- deleted 4y ago[deleted]
- yoda97 4y agoSo clean! love it.
- junon 4y agoNot 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 https://github.com/qix-/node-editor
- irq-1 4y agoAlso check out: https://sebastien.drouyer.com/jquery.flowchart-demo/ https://sebastien.drouyer.com/jquery.flowchart-demo/
- deleted 4y ago[deleted]
- nileshtrivedi 4y agoThis looks potentially useful. Is there a demo somewhere? And an example where the node graph created by users can be saved and served again?
- junon 4y agoThanks! 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.
- skeletonjelly 4y agoLooks great! Is there an interactive demo somewhere? I couldn't see a link sorry
- junon 4y agoJust the test.html in the repo that can be served locally. I should probably host it somewhere.
- tunesmith 4y agoWhat's the layout library? elkjs?
- netsharc 4y agoMan, 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/flowchart.png http://jcosine.if.unram.ac.id/public/site/images/suwardiman/...
- airbreather 4y agoAppears to have no named ports on nodes, key feature for many uses in my domain.
- greyhair 4y agoCan it import DOT data? I have too many graphviz tools to just abandon dot.