[{"data":1,"prerenderedAt":409},["ShallowReactive",2],{"project-26860381":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":36,"aspects":37,"strip":46,"post_text":48,"what":49,"said":83,"maker_in_thread":201,"shape":209,"grid":213,"attempts":367,"same_week":372,"maker_shows":39,"maker_hidden":401,"reader_version":402,"card":403},"26860381","React Flow","library for creating node based editors and apps","title","Show HN: React Flow – library for creating node based editors and apps","https:\u002F\u002Fgithub.com\u002Fwbkd\u002Freact-flow","github.com","moklick",1618821982,2021,224,58,185,2533,8,"notable","languages","react ui library","library",[24,25,26,27,28],"react","node editor","flow diagram","graph editor","react library","mixed",0.339,{"positive":32,"neutral":33,"mixed":34,"critical":35},15,16,0,5,36,{"design":38,"idea":40,"execution":42,"performance":44,"docs":45},{"positive":39,"critical":34},4,{"positive":41,"critical":34},6,{"positive":43,"critical":34},1,{"positive":43,"critical":34},{"positive":43,"critical":34},[34,35,47,47,35,34,35,47,47,34,35,35,35,35,47,47,47,35,35,35,34,35,35,35,35,35,47,47,43,34,34,34,34,34,34,43,43,34,43,47],3,null,{"problem":50,"audience":59,"pricing":48,"motivation":67,"time_to_build":48,"stack":71,"openness":82,"stage":82,"team_size":82},{"value":51,"source":52,"evidence":53},"Building node-based editors and diagrams in React","maker",[54,57],{"id":55,"by":11,"text":56},"26862906","Hey. I am the maintainer of React Flow. Thanks for the kind words here :) We built it as a foundation for our node-based data wrangling tool datablocks https:\u002F\u002Fdatablocks.pro\u002F",{"id":58},"post",{"value":60,"source":61,"evidence":62},"React developers building node-based UIs","inferred",[63,64],{"id":55,"by":11,"text":56},{"id":65,"by":11,"text":66},"26872012","In this example we are using dagre https:\u002F\u002Freactflow.dev\u002Fexamples\u002Flayouting\u002F You can use the layouting engine of your choice. There is no built-in layouting.",{"value":68,"source":52,"evidence":69},"Foundation for the maker's node-based data wrangling tool datablocks",[70],{"id":55,"by":11,"text":56},[72,76],{"value":73,"source":61,"evidence":74},"React",[75],{"id":55,"by":11,"text":56},{"value":77,"source":52,"evidence":78},"d3-zoom",[79],{"id":80,"by":11,"text":81},"26871980","I did a lot of data visualizations and I am big fan of d3. It's very robust software that works in all browsers. We are using d3-zoom for panning and zooming the pan but I am…","unknown",{"praise":84,"objections":111,"requests":123,"questions":153,"alternatives":172},[85,93,104],{"value":86,"source":87,"evidence":88},"Well designed API, good docs and sane defaults","commenter",[89],{"id":90,"by":91,"text":92},"26864676","pdaddyo","I've been using this the last few weeks on a synthesizer side project and it's been absolutely fantastic. A well designed API and easy to customise, excellent docs and sane…",{"value":94,"source":87,"evidence":95},"Beautiful, clear examples and documentation",[96,100],{"id":97,"by":98,"text":99},"26863134","misnome","This is really, really impressive. Nice clear, and good looking examples, looks to have clear documentation, and nice informative README. I've been tossing some ideas around…",{"id":101,"by":102,"text":103},"26862291","andretti1977","Beautiful library",{"value":105,"source":87,"evidence":106},"Works well on phones",[107],{"id":108,"by":109,"text":110},"26863477","janaagaard","Pretty amazing that https:\u002F\u002Freactflow.dev\u002Fexamples\u002F works so well on phone.",[112],{"value":113,"source":87,"evidence":114},"Name overloads 'Flow' and 'node' terms",[115,119],{"id":116,"by":117,"text":118},"26861984","larzang","Neat project, awful name. Overloading Flow, an already important part of the React ecosystem, just makes it harder to both find information about your project and find…",{"id":120,"by":121,"text":122},"26864188","chrisweekly","Yikes; alternate uses for _two_ already-overloaded terms (\"flow\" and \"node\") in the tagline? Naming things isn't _that_ hard. Less of a nitpick and more of a red flag wrt wisdom…",[124,135,146],{"value":125,"source":87,"evidence":126},"Automatic layout built in",[127,131],{"id":128,"by":129,"text":130},"26868024","ertucetin","Does it support auto positioning like in MindMaps? e.g. everytime I hit `tab` I get sub node then I hit several times let's say I have 10 sub nodes now, auto positioned.",{"id":132,"by":133,"text":134},"26869645","adverbly","Seconding this. I'm a big fan of dagre due to its layouting. Curious if this can do the same...",{"value":136,"source":87,"evidence":137},"Svelte or vanilla version",[138,142],{"id":139,"by":140,"text":141},"26862565","pabe","Does anyone know about something like this for Vue and Svelte? :)",{"id":143,"by":144,"text":145},"26875617","FractalHQ","Is there a vanilla version so I can use this with Svelte",{"value":147,"source":87,"evidence":148},"React Native support",[149],{"id":150,"by":151,"text":152},"26862202","jfbaro","Looks amazing! Any plans on supporting React Native (RNW)? I couldn't find any mention of React Native on the github page.",[154,165],{"value":155,"source":87,"evidence":156},"Design choices of SVG vs divs vs canvas",[157,161],{"id":158,"by":159,"text":160},"26865579","technicolorwhat","Wow I really like it! Can you maybe break down some of the design decisions you've made building this? I'm especially interested in choosing full svg, svg for just the lines and…",{"id":162,"by":163,"text":164},"26900696","high_byte","I also wondered why mix divs and svg rather than doing it all in SVG? or all in HTML? although it seems to position and resize just fine",{"value":166,"source":87,"evidence":167},"Does it support ports",[168],{"id":169,"by":170,"text":171},"26863484","tracardi","Does React flow support ports?",[173,180,187,194],{"value":174,"source":87,"evidence":175},"Butterfly (alibaba)",[176],{"id":177,"by":178,"text":179},"26862770","lf-non","Butterfly [1] by alibaba has a vue wrapper (along with a React one) over a framework independent core. It is not as well documented though. [1] https:\u002F\u002Fgithub.com\u002Falibaba\u002Fbutterfly",{"value":181,"source":87,"evidence":182},"Reaflow",[183],{"id":184,"by":185,"text":186},"26872922","amcdnl","Mortiz does some awesome stuff. I built a similar project called reaflow ( https:\u002F\u002Freaflow.dev\u002F ) which handles some more complicated cases around nesting and layout.",{"value":188,"source":87,"evidence":189},"Dynamo",[190],{"id":191,"by":192,"text":193},"26867235","victorbojica","Looks cool. Looks similar to dynamo. https:\u002F\u002Fdynamobim.org\u002F I'm curious if that's your inspiration.",{"value":195,"source":87,"evidence":196},"Apache Airflow UI",[197],{"id":198,"by":199,"text":200},"26866968","robertlagrant","That's cool. It's a little like Apache Airflow's UI. (Edit: is it Airflow?)",{"comments":202,"answered":39,"key":203},10,[204,205,206],{"id":55,"text":56},{"id":80,"text":81},{"id":207,"text":208},"26865338","wow this looks really cool! Is it on Github?",{"commenters":210,"max_depth":35,"maker_replies":202,"first_comment_mins":211,"lifespan_hours":212},45,152,73,[214,216,218,220,222,223,225,227,229,233,237,238,239,241,243,247,251,254,256,259,262,263,265,269,270,273,277,280,282,286,288,291,292,296,298,300,304,308,310,312,315,318,321,324,327,330,333,336,339,341,344,347,350,351,354,358,361,365],[55,34,34,215,11,43],"maker\u002Fneutral\u002Fnone",[158,34,35,217,159,34],"maker\u002Fpositive\u002Fdesign",[80,34,34,219,11,43],"maker\u002Fneutral\u002Fperformance",[162,34,47,221,163,34],"project\u002Fneutral\u002Fdesign",[198,34,47,221,199,34],[191,34,47,224,192,34],"project\u002Fneutral\u002Fidea",[90,43,35,226,91,34],"project\u002Fpositive\u002Fexecution",[207,43,34,228,11,43],"project\u002Fneutral\u002Fnone",[230,43,35,231,232,34],"26867870","project\u002Fpositive\u002Fnone","tomduncalf",[234,235,47,224,236,34],"26865922",2,"hpen",[128,47,47,224,129,34],[132,47,47,224,133,34],[65,47,34,240,11,43],"maker\u002Fneutral\u002Fidea",[242,47,34,240,11,43],"26871996",[244,39,35,245,246,34],"26861407","project\u002Fpositive\u002Fidea","erwinh",[248,35,35,249,250,34],"26864799","project\u002Fpositive\u002Fperformance","normanrz",[252,35,34,253,11,43],"26872027","maker\u002Fpositive\u002Fnone",[255,41,35,245,199,34],"26866846",[257,41,47,224,258,34],"26867115","bradtheappguy",[108,260,35,261,109,34],7,"project\u002Fpositive\u002Fdesign",[139,18,47,228,140,34],[177,18,34,264,178,34],"other\u002Fneutral\u002Fnone",[266,267,47,221,268,34],"26868213",9,"leodriesch",[150,202,47,228,151,34],[271,202,47,228,272,34],"26862785","emteycz",[274,275,35,261,276,34],"26862603",11,"tenaciousDaniel",[97,278,35,279,98,34],12,"project\u002Fpositive\u002Fdocs",[184,281,47,228,185,34],13,[283,284,35,245,285,34],"26862503",14,"tekstar",[287,284,34,228,11,43],"26863025",[289,32,35,245,290,34],"26864555","h1fra",[143,33,47,228,144,34],[293,294,35,231,295,34],"26864996",17,"jcadam",[101,297,35,261,102,34],18,[299,297,34,215,11,43],"26865458",[301,302,35,245,303,34],"26864182",19,"unixhero",[305,306,35,245,307,34],"26861524",20,"allanmacgregor",[169,309,47,228,170,34],21,[311,309,34,215,11,43],"26865454",[313,309,47,314,170,34],"26866625","maker\u002Fneutral\u002Fdocs",[116,316,43,317,117,34],22,"project\u002Fcritical\u002Fnone",[319,316,34,264,320,34],"26862329","jakelazaroff",[322,316,34,264,323,34],"26862422","bpierre",[325,316,34,264,326,34],"26862554","TechBro8615",[328,316,34,264,329,34],"26864635","inbx0",[331,316,34,264,332,34],"26866031","qudat",[334,316,34,335,329,34],"26866815","other\u002Fneutral\u002Fperformance",[337,316,34,335,338,34],"26866643","adpirz",[340,316,34,264,329,34],"26866993",[342,316,34,264,343,34],"26865029","ybbond",[345,316,43,317,346,34],"26862576","danlugo92",[348,316,43,317,349,34],"26862951","xavierlint",[120,316,43,317,121,34],[352,316,34,264,353,34],"26865545","shakow",[355,316,34,356,357,34],"26869516","commenter\u002Fneutral\u002Fnone","httgp",[359,316,43,317,360,34],"26864368","sosuke",[362,363,47,224,364,34],"26863278",23,"fouric",[366,363,34,215,11,43],"26863710",[368,371],{"id":369,"t":370,"points":35,"comments":34},"24707513",1602073874,{"id":4,"t":12,"points":14,"comments":15},[373,378,383,388,393,397],{"id":374,"name":375,"points":376,"category":377},"26878153","Cusdis",436,"dev_tools",{"id":379,"name":380,"points":381,"category":382},"26855726","PriceTable",381,"web_saas",{"id":384,"name":385,"points":386,"category":387},"26843339","Project Lovelace",369,"learning_science",{"id":389,"name":390,"points":391,"category":392},"26871660","Shepherd.com",313,"consumer_social",{"id":394,"name":395,"points":396,"category":392},"26866597","autonews.io",243,{"id":398,"name":399,"points":400,"category":392},"26845050","bef.no",238,false,"v2",{"id":404,"name":5,"line":6,"ai":401,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":405,"top":18,"kw":406,"maker":11,"domain":10,"tier":19,"attempts":235,"strip":407,"url":9,"mix":408,"praise":86,"objection":113,"sub":21},26860381,0.34,[24,25,26,27,28],"0533505330555533355505555533100000011013",[32,33,34,35],1794036605873]