[HN Gopher] Show HN: Svelvet - A component library for building ...
___________________________________________________________________
Show HN: Svelvet - A component library for building interactive
flow diagrams
Author : awillettnyc
Score : 281 points
Date : 2022-06-02 15:09 UTC (7 hours ago)
(HTM) web link (svelvet.io)
(TXT) w3m dump (svelvet.io)
| yoda97 wrote:
| So clean! love it.
| Philip-J-Fry wrote:
| 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.
| upupandup wrote:
| 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)
| iueotnmunto wrote:
| 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.
| upupandup wrote:
| 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.
| iueotnmunto wrote:
| I'm talking specifically about electron.
| darkerside wrote:
| Looks great on an S20 Note Ultra FWIW
| a2128 wrote:
| On my phone, with Chrome Android it's smooth and fast, but on
| Firefox Android it feels about 20fps and isn't great.
| jspaetzel wrote:
| Beautiful, but so so slow. I wouldn't call this lightweight.
| [deleted]
| awillettnyc wrote:
| 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!
| TIPSIO wrote:
| 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.
| johnm wrote:
| Nice!
|
| Would be great if it could generate static images of a diagram
| in e.g. SVG.
| nileshtrivedi wrote:
| 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.
| DenseComet wrote:
| It looks like the title got changed and now it says Svelte
| instead of Svelvet. Congrats on the launch!
| moklick wrote:
| 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.
| schnebbau wrote:
| Why not? If the content is technical and the concept is near
| identical then why waste time writing the same thing a
| different way?
| toqy wrote:
| 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.
| Sloppy wrote:
| Why? An NPM package??? I'm baffled.
| [deleted]
| jsnk wrote:
| What's baffling about it?
|
| It's a Svelte component library.
| bmitc wrote:
| 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.
| [deleted]
| vlunkr wrote:
| I think the problem here is with HN's obsessive title editing,
| not the library name.
| bmitc wrote:
| 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.
| toqy wrote:
| Imagine how much time Dev2 could have saved by sharing a
| link instead of name dropping obscure libraries they read
| about on HN
| the_arun wrote:
| My eyes tricked me to read it as - Servlet!
| dolmen wrote:
| Fix the title: s/Svelte/Svelvet/
| [deleted]
| adontz wrote:
| Svelvet is a lightweight _Svelte_ component library
| Asraelite wrote:
| It was originally correct. Not sure why it was incorrectly
| changed to Svelte.
| DonHopkins wrote:
| Svelting corrector.
| dang wrote:
| I'm not sure either! Fixed now though.
| [deleted]
| swyx wrote:
| @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.
| dang wrote:
| Whoops - fixed now. Thanks!
| [deleted]
| pvg wrote:
| You can't fix titles by @danging but you can by emailing the
| mods about the problem.
| DonHopkins wrote:
| @dangling references don't work?
| pvg wrote:
| nope, only participles, I've been told to.
| simonbarker87 wrote:
| Nice, so React Flow for Svelte?
| ramshorst wrote:
| Svelte https://github.com/oslabs-beta/Svelvet
| bennyp101 wrote:
| 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-...
| steve_taylor wrote:
| It's a timely development given React Flow's recent cash
| grab.
| zelphirkalt wrote:
| 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.
| nabeards wrote:
| Shouldn't the title be _Svelvet_ : A component library...
| [deleted]
| operantoperator wrote:
| 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."
| DonHopkins wrote:
| React doesn't, but Svelte is.
|
| https://www.youtube.com/watch?v=ZZoB5frlcnE
| bmitc wrote:
| Svelte is an English word but Svelvet, the actual name of the
| posted project, is not.
| tunesmith wrote:
| What's the layout library? elkjs?
| ec109685 wrote:
| 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.
| FunnyLookinHat wrote:
| 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!
| [deleted]
| george_ciobanu wrote:
| Also check out ant vision components they're super broad and they
| also have a node based editor. https://antv.vision/en/
| [deleted]
| ravenstine wrote:
| 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.
| robertlagrant wrote:
| If you're on React these days ReactFlow (https://reactflow.dev)
| is good for this.
| lhoursquentin wrote:
| > 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/
| whiddershins wrote:
| 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.
| anulepau wrote:
| 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.
| johnm wrote:
| Indeed, they are draggable.
| welder wrote:
| The page causes my CPU to go crazy.
| [deleted]
| red_trumpet wrote:
| Scrolling on my smartphone was a pain. Interestingly the
| diagram did scroll fine, but the whole page mad problems.
| junon wrote:
| 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
| irq-1 wrote:
| Also check out: https://sebastien.drouyer.com/jquery.flowchart-
| demo/
| [deleted]
| nileshtrivedi wrote:
| 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?
| pitaj wrote:
| Is there a way to select and move multiple nodes at once?
| tobr wrote:
| Nice! Consider making this a proper Show HN instead!
| https://news.ycombinator.com/showhn.html
| awillettnyc wrote:
| Thanks for the advice! Do you think the mods would mind a
| double post?
| pvg wrote:
| 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.
| crackinmalackin wrote:
| This is awesome! Great work! I'm so excited to see more things
| being built with svelte.
| nrabulinski wrote:
| 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?
| photochemsyn wrote:
| 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]
| datashaman wrote:
| 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.
| manishsharan wrote:
| 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.
| mcv wrote:
| 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.
| [deleted]
| encryptluks2 wrote:
| 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?
| bee_rider wrote:
| 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).
| chrisweekly wrote:
| Mods: typo in title - it's SVELVET (not Svelte, a web framework
| which Svelvet happens to use)
| [deleted]
| DonHopkins wrote:
| 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.
| bthomas wrote:
| > schema driven custom views for json data structures
|
| Is there a React library that does this well?
___________________________________________________________________
(page generated 2022-06-02 23:00 UTC)