[{"data":1,"prerenderedAt":492},["ShallowReactive",2],{"project-40904862":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":98,"maker_in_thread":196,"shape":209,"grid":213,"attempts":455,"same_week":456,"maker_shows":45,"maker_hidden":484,"reader_version":485,"card":486},"40904862","Onlook","Open-sourced Webflow for your own app","title","Show HN: Open-sourced Webflow for your own app","https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fstudio","github.com","hoakiet98",1720442170,2024,336,94,166,3515,5,"legend","dev_tools","visual editor","desktop_app",[21,24,25,26,27],"react","tailwind","webflow alternative","open source","mixed",0.243,{"positive":31,"neutral":32,"mixed":33,"critical":34},17,16,0,9,42,{"idea":37,"docs":39,"pricing":40,"execution":42,"design":43,"performance":44},{"positive":38,"critical":33},11,{"positive":33,"critical":18},{"positive":41,"critical":33},1,{"positive":33,"critical":33},{"positive":41,"critical":41},{"positive":33,"critical":45},3,[18,18,45,33,33,45,18,33,45,33,18,33,45,33,18,33,45,45,45,45,45,18,41,18,33,18,18,18,18,45,33,18,18,45,45,41,41,41,41,45],"Hi HN,  I’m Kiet, one of the creators of Onlook studio. I made this app that allows you to visually edit your locally running React app and write the code back to it in real-time. The purpose is to allow you to develop UI while fully owning your code the whole time. There are other visual builders out there but they either require you to upload your code to the cloud or some lengthy setup process. Onlook runs locally, deterministically, and only requires adding a plugin for the compile step (2 lines of config change).\n\nTechnical details: This is technically a web browser that can point to your",{"problem":49,"audience":55,"pricing":65,"motivation":71,"time_to_build":75,"stack":76,"openness":95,"stage":96,"team_size":97},{"value":50,"source":51,"evidence":52},"Visual UI editing for React apps without uploading code to the cloud or lengthy setup","maker",[53],{"id":54},"post",{"value":56,"source":51,"evidence":57},"Developers and designers who want visual editing while owning their code",[58,61],{"id":59,"by":11,"text":60},"40905393","This is very astute. We went too far in the non-technical route the first time. It was unrealistic to expect a non-technical person to clone or run code locally so it was hard to…",{"id":62,"by":63,"text":64},"40908767","ENGNR","I think you're onto something. I'm not sure what you mean by 'components' on the roadmap, but if it's the ability to bring react components back into the editor, and have the…",{"value":66,"source":51,"evidence":67},"Planned hosted paid tier for teams; not concrete yet",[68],{"id":69,"by":11,"text":70},"40906644","> 1. Are you planning to monetize? If so, what are some of your ideas? Yes, though my plan is not concrete, yet. I plan to offer a hosted version for teams with fewer technical…",{"value":72,"source":51,"evidence":73},"Let people edit UI visually while fully owning their code",[74],{"id":54},null,[77,81,85,89],{"value":78,"source":51,"evidence":79},"React",[80],{"id":54},{"value":82,"source":51,"evidence":83},"Electron",[84],{"id":54},{"value":86,"source":51,"evidence":87},"Tailwind",[88],{"id":54},{"value":90,"source":51,"evidence":91},"Svelte (earlier version)",[92],{"id":93,"by":11,"text":94},"40910325","It pained me to do this. Everyone I talked to used React instead of Svelte. At some point, we realized we were spending half the time supporting Svelte just for ourselves for…","open_source","beta","team",{"praise":99,"objections":117,"requests":136,"questions":158,"alternatives":170},[100,109],{"value":101,"source":102,"evidence":103},"Open source with a hosted option is a good model","commenter",[104,105],{"id":62,"by":63,"text":64},{"id":106,"by":107,"text":108},"40905673","_fat_santa","I think one challenge that you will face is that Webflow is a SaaS app while your app I have to host somewhere. If I'm a non-technical user then I have no idea how to host this…",{"value":110,"source":102,"evidence":111},"Bridges the gap between designers and developers",[112,116],{"id":113,"by":114,"text":115},"40905690","freedomben","Thanks, this looks pretty neat! Definitely a project to keep an eye on :-) I love the approach of having it show you the code (and diff) and control on writing it back. This…",{"id":62,"by":63,"text":64},[118,122,129],{"value":119,"source":102,"evidence":120},"Hosting burden for non-technical users",[121],{"id":106,"by":107,"text":108},{"value":123,"source":102,"evidence":124},"Performance of the landing page cursor effect",[125],{"id":126,"by":127,"text":128},"40905602","minajevs","A bit off-topic, but this landing page \"steals\" my cursor, presumably for that special hero effect, which makes it dizzingly laggy and unresponsive.",{"value":130,"source":102,"evidence":131},"Trademark risk from the Webflow-based slogan",[132],{"id":133,"by":134,"text":135},"40905622","pavlov","Watch out for trademarks. Your slogan “The power of WebFlow for your React app” is going to attract attention from Webflow’s legal department if your project is successful.",[137,144,151],{"value":138,"source":102,"evidence":139},"Browser version instead of Electron app",[140],{"id":141,"by":142,"text":143},"40905611","patrickaljord","Looks great. Any plan to make it work in a browser instead of having to install an Electron app?",{"value":145,"source":102,"evidence":146},"Vue support",[147],{"id":148,"by":149,"text":150},"40910917","popalchemist","Any plans to add Vue support?",{"value":152,"source":102,"evidence":153},"Export plain HTML\u002FCSS",[154],{"id":155,"by":156,"text":157},"40905664","rsp1984","This looks pretty awesome but, speaking only for myself here, the thing I actually want is just Webflow but without the BS and predatory pricing. A visual editor that produces…",[159,163],{"value":160,"source":102,"evidence":161},"How will it be monetized",[162],{"id":113,"by":114,"text":115},{"value":164,"source":102,"evidence":165},"How does it differ from Builder.io or Reka",[166],{"id":167,"by":168,"text":169},"40908253","da4id","How's it different from something like reka.js or builder.io?",[171,178,185,192],{"value":172,"source":102,"evidence":173},"Webflow",[174],{"id":175,"by":176,"text":177},"40908601","karaterobot","This looks cool. I always thought that Webflow's model for how to snap together a UI was a good intersection of pick-up-and-play simplicity and just enough customizability under…",{"value":179,"source":102,"evidence":180},"Bootstrap Studio",[181],{"id":182,"by":183,"text":184},"40911834","wiradikusuma","If you use Bootstrap and are more towards \"static\" websites, I recommend Bootstrap Studio (https:\u002F\u002Fbootstrapstudio.io\u002F). I used it on and off. Last time, I used it to make…",{"value":186,"source":102,"evidence":187},"Pinegrow Web Editor",[188],{"id":189,"by":190,"text":191},"40906091","rchaud","Pinegrow Web Editor and Bootstrap Studio could fit the bill. No subscription, no cloud, one-time purchase. Exported HTML is fully readable and editable outside the app.",{"value":193,"source":102,"evidence":194},"Builder.io",[195],{"id":167,"by":168,"text":169},{"comments":197,"answered":198,"key":199},31,12,[200,203,206],{"id":201,"text":202},"40927087","> but if it's the ability to bring react components back into the editor, and have the designer WYSIWYG modify the props Haha yeah this is the plan. I really like Storybook for…",{"id":204,"text":205},"40906358","> because my suspicion is that since this tool just exports React, you could relatively easily achieve this using Next.js SSG building At the core, we generate pure HTML and CSS,…",{"id":207,"text":208},"40905877","> Most tools end up trying to find a sweet spot between targeting a developer and targeting a designer, and as a result end up doing neither well. Emphasizing this because this…",{"commenters":35,"max_depth":210,"maker_replies":197,"first_comment_mins":211,"lifespan_hours":212},7,38,284,[214,216,218,221,222,224,226,228,232,236,239,241,243,246,249,252,254,256,258,261,263,265,268,270,272,274,278,281,284,286,289,291,294,296,299,301,303,305,308,310,313,317,319,322,323,325,327,329,331,333,335,338,343,346,348,349,352,354,356,358,361,364,367,370,372,375,377,382,386,391,392,394,397,401,404,406,410,414,418,420,422,424,426,428,431,434,438,441,443,445,447,449,451,453],[62,33,18,215,63,33],"project\u002Fpositive\u002Fidea",[201,33,33,217,11,41],"project\u002Fneutral\u002Fidea",[219,33,18,215,220,33],"41015146","tmcdos",[155,41,18,215,156,33],[223,41,45,217,114,33],"40905752",[189,41,33,225,190,33],"other\u002Fneutral\u002Fnone",[204,41,33,227,11,41],"project\u002Fneutral\u002Fexecution",[229,41,33,230,231,33],"40909807","commenter\u002Fcritical\u002Fnone","localfirst",[233,41,33,234,235,33],"40912394","commenter\u002Fneutral\u002Fnone","theultdev",[237,41,33,238,156,33],"40914547","other\u002Fneutral\u002Fpricing",[240,41,33,234,231,33],"40918632",[242,41,33,234,156,33],"40919712",[244,41,33,225,245,33],"40916906","aabbcc1241",[247,41,45,248,156,33],"40925114","project\u002Fneutral\u002Fdocs",[250,41,33,225,251,33],"40925675","gargan",[113,253,18,215,114,33],2,[207,253,33,255,11,41],"project\u002Fneutral\u002Fdesign",[257,253,33,225,245,33],"40916888",[259,253,33,260,11,41],"40927098","commenter\u002Fpositive\u002Fnone",[69,253,33,262,11,41],"project\u002Fneutral\u002Fpricing",[264,253,45,262,114,33],"40907070",[266,253,33,267,11,41],"40930379","maker\u002Fpositive\u002Fnone",[182,45,33,269,183,33],"other\u002Fpositive\u002Fnone",[271,45,33,269,11,41],"40930416",[175,273,18,215,176,33],4,[275,273,33,276,277,33],"40909541","other\u002Fcritical\u002Fpricing","anakaine",[279,273,33,280,11,41],"40930439","maker\u002Fneutral\u002Fnone",[282,18,33,225,283,33],"40907426","fswd",[106,285,45,227,107,33],6,[287,285,45,262,288,33],"40905905","lukan",[290,285,33,262,11,41],"40905976",[292,285,33,234,293,33],"40906870","meiraleal",[295,285,33,225,11,41],"40927123",[297,285,18,298,293,33],"40928173","project\u002Fpositive\u002Fnone",[300,285,33,227,11,41],"40905929",[302,285,33,225,245,33],"40916952",[304,285,33,225,11,41],"40930468",[306,210,45,255,307,33],"40906914","danielvaughn",[309,210,33,255,11,41],"40908338",[311,210,45,255,312,33],"40922406","noorvir",[314,315,33,269,316,33],"40906272",8,"edweis",[318,315,33,267,11,41],"40906319",[320,315,45,321,293,33],"40907041","project\u002Fneutral\u002Fnone",[141,34,45,227,142,33],[324,34,33,227,11,41],"40905756",[326,34,45,227,293,33],"40906897",[328,34,33,227,11,41],"40929660",[330,34,45,227,114,33],"40905764",[332,34,33,227,11,41],"40906044",[334,34,33,234,114,33],"40906860",[336,34,18,215,337,33],"40905894","yakito",[339,340,41,341,342,33],"40905134",10,"project\u002Fcritical\u002Fperformance","ramesh31",[344,340,45,217,345,33],"40905319","toddmorey",[347,340,33,215,11,41],"40905435",[59,340,33,217,11,41],[350,340,18,215,351,33],"40905810","DrewADesign",[353,340,33,321,11,41],"40906432",[355,340,33,225,351,33],"40908167",[357,340,33,225,11,41],"40930698",[359,340,18,215,360,33],"40909091","nobleach",[362,340,33,363,342,33],"40909402","other\u002Fcritical\u002Fidea",[365,340,33,366,277,33],"40909591","commenter\u002Fcritical\u002Fidea",[368,38,18,298,369,33],"40911886","aneeqdhk",[371,38,33,225,11,41],"40929602",[373,198,18,267,374,33],"40905900","bbourn",[376,198,33,280,11,41],"40905934",[378,379,18,380,381,33],"40911204",13,"project\u002Fpositive\u002Fdesign","kkyr",[383,379,33,384,385,33],"40928307","other\u002Fneutral\u002Fdesign","D_R_Farrell",[387,388,45,389,390,33],"40910083",14,"maker\u002Fneutral\u002Fidea","coryvirok",[93,388,33,389,11,41],[393,388,33,234,390,33],"40911657",[395,388,33,396,11,41],"40927215","maker\u002Fneutral\u002Fdocs",[398,399,18,215,400,33],"40912104",15,"blacktechnology",[402,32,18,215,403,33],"40914349","nm769",[405,32,33,280,11,41],"40927222",[407,31,18,408,409,33],"40911342","project\u002Fpositive\u002Fpricing","sexy_seedbox",[411,412,18,215,413,33],"40911696",18,"denkmoon",[415,416,45,321,417,33],"40949274",19,"autorun",[167,419,45,217,168,33],20,[421,419,33,389,11,41],"40908486",[148,423,45,321,149,33],21,[425,423,33,389,11,41],"40927236",[126,427,41,341,127,33],22,[429,427,41,341,430,33],"40905740","biosboiii",[432,427,33,433,11,41],"40905768","maker\u002Fneutral\u002Fperformance",[435,427,41,436,437,33],"40906524","project\u002Fcritical\u002Fdesign","nalinidash",[133,439,41,440,134,33],23,"project\u002Fcritical\u002Fdocs",[442,439,33,396,11,41],"40905790",[444,439,41,440,351,33],"40905887",[446,439,41,440,288,33],"40905928",[448,439,41,440,351,33],"40906028",[450,439,33,396,11,41],"40906295",[452,439,18,267,351,33],"40907181",[454,439,41,440,134,33],"40906078",[],[457,461,466,470,475,480],{"id":458,"name":459,"points":460,"category":20},"40899242","Satyrn",611,{"id":462,"name":463,"points":464,"category":465},"40902012","Sabby",561,"creative",{"id":467,"name":468,"points":469,"category":20},"40932492","Dut",396,{"id":471,"name":472,"points":473,"category":474},"40916326","BitWHIP",353,"infrastructure",{"id":476,"name":477,"points":478,"category":479},"40881836","Telescope",273,"web_saas",{"id":481,"name":482,"points":483,"category":20},"40913736","Crawlee for Python",254,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":33,"strip":490,"url":9,"mix":491,"praise":101,"objection":119,"sub":21},40904862,0.24,[21,24,25,26,27],"5530035030503050333335150555530553311113",[31,32,33,34],1794036657428]