[{"data":1,"prerenderedAt":492},["ShallowReactive",2],{"project-37391848":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":28,"sentiment":29,"stance_mix":30,"scored_comments":35,"aspects":36,"strip":46,"post_text":47,"what":48,"said":82,"maker_in_thread":190,"shape":203,"grid":206,"attempts":456,"same_week":457,"maker_shows":34,"maker_hidden":484,"reader_version":485,"card":486},"37391848","Puck","Puck – Open-source visual editor for React","title","Show HN: Puck – Open-source visual editor for React","https:\u002F\u002Fgithub.com\u002Fmeasuredco\u002Fpuck","github.com","chrisvxd",1693922914,2023,451,95,65,3109,3,"legend","dev_tools","visual editor","library",[24,25,26,27],"react visual editor","wysiwyg react","headless cms","page builder","curious",0.331,{"positive":31,"neutral":32,"mixed":33,"critical":34},15,21,1,5,42,{"idea":37,"docs":40,"privacy":42,"design":43,"execution":44,"performance":45},{"positive":38,"critical":39},7,2,{"positive":41,"critical":33},0,{"positive":41,"critical":33},{"positive":18,"critical":41},{"positive":33,"critical":33},{"positive":41,"critical":41},[41,18,18,41,41,18,41,33,34,18,18,34,33,18,18,18,33,18,18,41,34,18,34,18,34,34,34,18,34,18,34,34,34,18,34,34,41,18,41,33],null,{"problem":49,"audience":59,"pricing":47,"motivation":66,"time_to_build":47,"stack":70,"openness":79,"stage":80,"team_size":81},{"value":50,"source":51,"evidence":52},"Content teams need to build on-brand pages without going off-brand or asking developers for layout changes","maker",[53,56],{"id":54,"by":11,"text":55},"37392018","Hey hackers, OP here! I've been dipping in and out of this problem space for the last few years with many of my clients. Puck sits somewhere between an old-school WYSIWYG-powered…",{"id":57,"by":11,"text":58},"37394669","Framer is a design tool, but Puck is a content tool. We're focused on allowing content teams to create pages using existing on-brand components. Like a WYSIWYG with guard-rails.…",{"value":60,"source":51,"evidence":61},"Content teams and front-end developers building marketing sites and blogs",[62,63],{"id":54,"by":11,"text":55},{"id":64,"by":11,"text":65},"37397068","Typically marketing sites and blog posts etc. It could probably be extended to applications, but that’s not what we built it for.",{"value":67,"source":51,"evidence":68},"Couldn't find a tool letting clients' content teams build pages with existing components",[69],{"id":57,"by":11,"text":58},[71,75],{"value":72,"source":51,"evidence":73},"React",[74],{"id":54,"by":11,"text":55},{"value":76,"source":51,"evidence":77},"Next.js",[78],{"id":54,"by":11,"text":55},"open_source","launched","unknown",{"praise":83,"objections":104,"requests":119,"questions":134,"alternatives":149},[84,100],{"value":85,"source":86,"evidence":87},"Intuitive, polished UI and easy React integration","commenter",[88,92,96],{"id":89,"by":90,"text":91},"37393639","simonw","Wow, I've seen so many of these kinds of things over the years but this one is really special: extremely intuitive design, really powerful and flexible, and MIT licensed too.…",{"id":93,"by":94,"text":95},"37395324","arek_nawo","Love it! Good looking, polished UI. I'm probably most impressed by the easy integration and React API. Congrats.",{"id":97,"by":98,"text":99},"37396871","p2hari","Just love this. And trust me, I have seen many of these kinds , but this is really different in the right sense. So easy to add custom components and get going. Well done. Will…",{"value":101,"source":86,"evidence":102},"Open source under MIT licence",[103],{"id":89,"by":90,"text":91},[105,115],{"value":106,"source":86,"evidence":107},"Only supports vertically stacked layouts; multi-column not yet supported",[108,112],{"id":109,"by":110,"text":111},"37392670","zoogeny","This looks decent and the idea is sound. I was looking at headless CMS recently and it only vaguely struck me that what is needed is the front-end builder component. Looking at…",{"id":113,"by":11,"text":114},"37393389","+1 what Scott said Multi-column layouts are incoming very soon And Puck does support either server or client rendering",{"value":116,"source":86,"evidence":117},"Unclear whether pages render on client or server",[118],{"id":109,"by":110,"text":111},[120,127],{"value":121,"source":86,"evidence":122},"Support for arbitrary CSS and Vue integration",[123],{"id":124,"by":125,"text":126},"37392041","Exuma","Awesome. I've literally been tasked with building something exactly like this, and it's a pain in the ass nothing exists like this for Vue so I have to do it from scratch. I plan…",{"value":128,"source":86,"evidence":129},"Rich text field type",[130],{"id":131,"by":132,"text":133},"37394384","nvegater","This looks very nice ! How would you compare it with slatejs, tiptap or lexical ? Is this only for layouts but not for content ? (Would it be very hard to include some rich text…",[135,142],{"value":136,"source":86,"evidence":137},"How does it compare to Plasmic",[138],{"id":139,"by":140,"text":141},"37395707","omarfarooq","How does this compare to https:\u002F\u002Fwww.plasmic.app\u002F?",{"value":143,"source":86,"evidence":144},"How to sync saved data props when component props change",[145],{"id":146,"by":147,"text":148},"37392861","nathancahill","How do you keep the saved data props\u002Fvalues (title, description) in sync with the component props in the code? Let's say I change `description` to `subtitle` in the code, what…",[150,158,165,172,176,183],{"value":151,"source":86,"evidence":152},"Plasmic",[153,157],{"id":154,"by":155,"text":156},"37395657","wbarber","Plasmic.app works with vue - why not just use that?",{"id":139,"by":140,"text":141},{"value":159,"source":86,"evidence":160},"Builder.io",[161],{"id":162,"by":163,"text":164},"37397031","btown","This is really slick! A really fluid and intuitive interface. We use https:\u002F\u002Freact-page.github.io\u002F (also MIT licensed) extensively at my startup; it attacks the same problem, and…",{"value":166,"source":86,"evidence":167},"React Bricks",[168],{"id":169,"by":170,"text":171},"37392659","matfrana","Is it something like React Bricks?",{"value":173,"source":86,"evidence":174},"react-page",[175],{"id":162,"by":163,"text":164},{"value":177,"source":86,"evidence":178},"GrapesJS",[179],{"id":180,"by":181,"text":182},"37397419","showerst","Take a look at grapesjs -- it's a bit janky in places but it's self hosted and overall works pretty well. It can output plain HTML so I think it could be integrated with vue.",{"value":184,"source":86,"evidence":185},"Storyblok",[186],{"id":187,"by":188,"text":189},"37392365","agotterer","If you're open to hosted service, is the best commercial visual + headless CMS I've come across that supports React - https:\u002F\u002Fwww.storyblok.com\u002Fhome.",{"comments":191,"answered":192,"key":193},36,17,[194,197,200],{"id":195,"text":196},"37393675","This comment made my day. Thank you",{"id":198,"text":199},"37392228","It's such a common problem, I'm amazed there aren't more solutions out there. A sound data model really helps things out. I'd go API-first. Drag and drop is a PITA. Specifically…",{"id":201,"text":202},"37392481","Yup, that's our use case too. You can render the editor \u003CPuck \u002F> inside any React application and use the `onSave` callback to save it to your database. To render, you can use…",{"commenters":204,"max_depth":38,"maker_replies":191,"first_comment_mins":34,"lifespan_hours":205},44,27,[207,209,211,213,215,217,220,221,224,227,229,231,233,237,240,243,244,247,248,250,254,257,259,261,263,266,267,270,272,275,278,280,285,287,290,293,295,297,299,302,304,306,308,311,312,315,316,318,321,325,329,331,333,338,340,342,344,348,350,355,357,360,362,364,368,372,374,376,378,382,385,387,390,392,396,399,401,405,409,411,414,416,418,420,421,423,428,430,434,436,438,440,442,445,447,451,453],[89,41,41,208,90,41],"commenter\u002Fpositive\u002Fdesign",[195,41,41,210,11,33],"maker\u002Fpositive\u002Fnone",[124,33,18,212,125,41],"maker\u002Fneutral\u002Fidea",[198,33,41,214,11,33],"maker\u002Fneutral\u002Fnone",[187,33,41,216,188,41],"other\u002Fneutral\u002Fnone",[218,33,18,219,125,41],"37392454","project\u002Fneutral\u002Fnone",[201,33,41,219,11,33],[222,33,41,216,223,41],"37392887","jcuenod",[225,33,41,226,125,41],"37393090","commenter\u002Fneutral\u002Fnone",[228,33,41,226,223,41],"37393356",[230,33,41,226,125,41],"37393503",[232,33,41,216,223,41],"37394804",[234,33,18,235,236,41],"37395806","project\u002Fneutral\u002Fdocs","satvikpendem",[238,33,41,239,11,33],"37402410","maker\u002Fneutral\u002Fdocs",[241,33,41,216,242,41],"37394869","mattront",[154,33,41,216,155,41],[245,33,33,246,125,41],"37396370","project\u002Fcritical\u002Fprivacy",[180,33,41,216,181,41],[249,33,41,216,125,41],"37397958",[251,39,34,252,253,41],"37400856","project\u002Fpositive\u002Fidea","2pointsomone",[255,39,18,256,253,41],"37400871","project\u002Fneutral\u002Fdesign",[258,39,41,252,11,33],"37402266",[260,39,41,210,11,33],"37402241",[109,18,18,262,110,41],"project\u002Fmixed\u002Fdesign",[264,18,18,219,265,41],"37392833","mono_spaced",[113,18,41,219,11,33],[97,268,34,269,98,41],4,"project\u002Fpositive\u002Fexecution",[271,268,41,210,11,33],"37397716",[273,34,18,235,274,41],"37391909","talboren",[276,34,33,277,274,41],"37391922","project\u002Fcritical\u002Fdocs",[279,34,41,239,11,33],"37392036",[281,282,18,283,284,41],"37392536",6,"project\u002Fneutral\u002Fidea","MuffinFlavored",[286,282,41,283,11,33],"37393358",[288,282,33,289,284,41],"37394691","project\u002Fcritical\u002Fidea",[291,282,34,252,292,41],"37394948","bingemaker",[294,282,18,283,265,41],"37395410",[146,38,18,296,147,41],"project\u002Fneutral\u002Fexecution",[298,38,41,214,11,33],"37393074",[300,38,33,301,147,41],"37393256","project\u002Fcritical\u002Fexecution",[303,38,41,214,11,33],"37393430",[305,38,41,296,11,33],"37393226",[307,38,41,219,11,33],"37407629",[309,310,18,283,236,41],"37394469",8,[57,310,41,283,11,33],[313,310,18,212,314,41],"37395538","teddarific",[64,310,41,214,11,33],[317,310,41,216,236,41],"37395611",[319,310,41,226,320,41],"37396652","danr4",[322,323,34,252,324,41],"37395456",9,"jameslk",[326,327,18,296,328,41],"37393129",10,"d0100",[330,327,41,296,11,33],"37393305",[332,327,41,219,11,33],"37393362",[334,335,18,336,337,41],"37406320",11,"project\u002Fneutral\u002Fperformance","quadrature",[131,339,34,252,132,41],12,[341,339,41,283,11,33],"37395105",[343,339,41,283,11,33],"37395122",[345,346,18,283,347,41],"37401031",13,"nraf",[349,346,41,296,11,33],"37402403",[351,352,34,353,354,41],"37400037",14,"project\u002Fpositive\u002Fdesign","promhize",[356,352,41,256,11,33],"37402394",[358,31,34,252,359,41],"37396293","manishsharan",[361,31,41,235,11,33],"37397002",[93,363,34,353,94,41],16,[365,192,34,366,367,41],"37397237","project\u002Fpositive\u002Fnone","laurels-marts",[369,370,18,283,371,41],"37396486",18,"transformi",[373,370,41,283,11,33],"37397092",[169,375,18,219,170,41],19,[377,375,41,219,11,33],"37393089",[379,380,34,353,381,41],"37392480",20,"robbiejs",[383,380,18,296,384,41],"37392559","jasonjmcghee",[386,380,41,296,11,33],"37392569",[388,32,18,296,389,41],"37392604","continuational",[391,32,41,296,11,33],"37393548",[393,394,34,366,395,41],"37392509",22,"tebbers",[397,398,18,219,155,41],"37395632",23,[400,398,41,219,11,33],"37397604",[402,403,34,366,404,41],"37395797",24,"joseferben",[406,407,34,366,408,41],"37392539",25,"tmwatson100",[54,410,41,252,11,33],26,[412,410,41,216,413,41],"37395745","albert_e",[415,410,41,216,11,33],"37397718",[417,410,18,283,413,41],"37395793",[419,410,41,283,11,33],"37396979",[162,205,34,252,163,41],[422,205,41,283,11,33],"37402303",[424,425,41,426,427,41],"37393071",28,"other\u002Fneutral\u002Fidea","shivekkhurana",[429,425,34,252,413,41],"37394296",[431,432,41,216,433,41],"37397768",29,"jarek83",[435,432,41,219,11,33],"37402291",[139,437,18,219,140,41],30,[439,437,41,226,155,41],"37395987",[441,437,41,283,11,33],"37397040",[443,437,41,216,444,41],"37397291","yaaang",[446,437,41,216,11,33],"37397593",[448,449,33,289,450,41],"37398195",31,"pat64",[452,449,41,283,11,33],"37398285",[454,449,41,226,455,41],"37398587","madeofpalk",[],[458,462,466,471,475,480],{"id":459,"name":460,"points":461,"category":20},"37408150","smolsite.zip",602,{"id":463,"name":464,"points":465,"category":20},"37393099","RecipeUI",275,{"id":467,"name":468,"points":469,"category":470},"37381268","Keep",181,"infrastructure",{"id":472,"name":473,"points":474,"category":20},"37364124","Shaq",155,{"id":476,"name":477,"points":478,"category":479},"37398812","Perplexity",153,"ai",{"id":481,"name":482,"points":483,"category":20},"37371237","RSSfeedASAP",151,false,"v2",{"id":487,"name":5,"line":6,"ai":484,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":488,"top":18,"kw":489,"maker":11,"domain":10,"tier":19,"attempts":41,"strip":490,"url":9,"mix":491,"praise":85,"objection":106,"sub":21},37391848,0.33,[24,25,26,27],"0330030153351333133053535553535553550301",[31,32,33,34],1794036641298]