[{"data":1,"prerenderedAt":309},["ShallowReactive",2],{"project-11047709":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":27,"sentiment":28,"stance_mix":29,"scored_comments":33,"aspects":34,"strip":41,"post_text":43,"what":44,"said":91,"maker_in_thread":193,"shape":205,"grid":208,"attempts":265,"same_week":274,"maker_shows":30,"maker_hidden":302,"reader_version":303,"card":304},"11047709","GrapesJS","Open source tool for building templates easily","title","Show HN: GrapesJS – Open source tool for building templates easily","http:\u002F\u002Fgrapesjs.com\u002F","grapesjs.com","artf",1454766003,2016,74,25,519,2264,23,"notable","dev_tools","visual web editor","library",[21,24,25,26],"open source template builder","drag and drop editor","html css builder","mixed",0.04,{"positive":30,"neutral":31,"mixed":30,"critical":32},3,4,2,12,{"design":35,"docs":38,"idea":39,"execution":40},{"positive":36,"critical":37},0,1,{"positive":36,"critical":37},{"positive":37,"critical":36},{"positive":37,"critical":36},[30,36,37,36,36,30,36,30,36,30,36,36,36,36,36,42,42,30,42,36,30,36,30,37,36],5,null,{"problem":45,"audience":57,"pricing":43,"motivation":43,"time_to_build":43,"stack":64,"openness":88,"stage":89,"team_size":90},{"value":46,"source":47,"evidence":48},"Building web page templates without writing code by hand","inferred",[49,53],{"id":50,"by":51,"text":52},"11052879","thenomad","OK, really blunt question for the OP - what exactly does this do? It looks like a visual web design editor a la Bootstrap Studio et al, but you mention it's specifically for…",{"id":54,"by":55,"text":56},"11053346","spangry","Pretty slick! I like the fact that it's open-source and client-side js. Can definitely see how this could integrate with online IDEs like Ace. A few bits of feedback (although…",{"value":58,"source":47,"evidence":59},"Web developers and people building templates for CMSs or personal web projects",[60,63],{"id":61,"by":11,"text":62},"11052812","Thanks Rinum. I agree with you, for already experienced developer browser's dev tools are already enough, but with the possibility to be integrated with other applications it…",{"id":54,"by":55,"text":56},[65,72,76,80,84],{"value":66,"source":67,"evidence":68},"Backbone","maker",[69],{"id":70,"by":11,"text":71},"11058034","Mainly is made up of Backbone, Codemirror, Keymaster, Spectrum and RequireJs. Thanks for remind me of putting this information on readme file",{"value":73,"source":67,"evidence":74},"CodeMirror",[75],{"id":70,"by":11,"text":71},{"value":77,"source":67,"evidence":78},"Keymaster",[79],{"id":70,"by":11,"text":71},{"value":81,"source":67,"evidence":82},"Spectrum",[83],{"id":70,"by":11,"text":71},{"value":85,"source":67,"evidence":86},"RequireJS",[87],{"id":70,"by":11,"text":71},"open_source","beta","unknown",{"praise":92,"objections":117,"requests":141,"questions":162,"alternatives":174},[93,102,110],{"value":94,"source":95,"evidence":96},"Open source and client-side JS","commenter",[97,98],{"id":54,"by":55,"text":56},{"id":99,"by":100,"text":101},"11053314","brianwawok","My thoughts too. Kudos for the open source!",{"value":103,"source":95,"evidence":104},"Simple and intuitive to use",[105,106],{"id":54,"by":55,"text":56},{"id":107,"by":108,"text":109},"11052776","Rinum","Currently I use the browser's dev tools and that allows me to pretty much do the same thing as this tool (I've got the CSS properties memorized at this point). I probably won't…",{"value":111,"source":95,"evidence":112},"Impressive amount of work",[113],{"id":114,"by":115,"text":116},"11048313","fiatjaf","That must have been a hell lot of work.",[118,125,133],{"value":119,"source":95,"evidence":120},"Generated HTML source is hard to read",[121],{"id":122,"by":123,"text":124},"11053960","ivan_ah","Not sure what I was expecting, but the generate source doesn't look all that useful: ``` \u003Cdiv id=\"c59\"> \u003Cdiv id=\"c60\"> \u003Cdiv id=\"c61\"> \u003Cdiv id=\"c62\"> \u003Cdiv id=\"c63\">GrapesJS ```…",{"value":126,"source":95,"evidence":127},"Unclear what the product does from the landing page",[128,129],{"id":50,"by":51,"text":52},{"id":130,"by":131,"text":132},"11053518","jessedhillon","I would like it if you'd put a video on the landing page, to show mobile users what it can do and how it works.",{"value":134,"source":95,"evidence":135},"Developers would rather use a text editor or browser dev tools",[136,137],{"id":107,"by":108,"text":109},{"id":138,"by":139,"text":140},"11053317","lazers","I'd like to see support for Viewport units - vh, vw, vmin, vmax. Really cool tool but I just dont see myself ever using anything but a text editor.",[142,146,154,158],{"value":143,"source":95,"evidence":144},"Responsive device size preview",[145],{"id":107,"by":108,"text":109},{"value":147,"source":95,"evidence":148},"Video demo on landing page",[149,150],{"id":130,"by":131,"text":132},{"id":151,"by":152,"text":153},"11061325","eecks","Yeah you need a video that is a sped up visual of someone constructing a template",{"value":155,"source":95,"evidence":156},"Multi or group select",[157],{"id":54,"by":55,"text":56},{"value":159,"source":95,"evidence":160},"Viewport units support",[161],{"id":138,"by":139,"text":140},[163,167],{"value":164,"source":95,"evidence":165},"What exactly does this do?",[166],{"id":50,"by":51,"text":52},{"value":168,"source":95,"evidence":169},"What frameworks and libraries are used?",[170],{"id":171,"by":172,"text":173},"11053202","CommanderData","I like it! There are no or a lack of drag and drop editors on the web, what I mean is using true drag and drop with absolute positioning, granted it would also require a script…",[175,182,186],{"value":176,"source":95,"evidence":177},"Webflow",[178],{"id":179,"by":180,"text":181},"11052756","bucaran","I love what you are doing. I really think the way we build websites today is fucked up, so I see you are trying to move things forward, but we need something more along the lines…",{"value":183,"source":95,"evidence":184},"Bootstrap Studio",[185],{"id":50,"by":51,"text":52},{"value":187,"source":95,"evidence":188},"Sketch",[189],{"id":190,"by":191,"text":192},"11052928","true_religion","I view these as prototyping tools for management. Although personally I think Sketch is even easier to use for complex workflows.",{"comments":194,"answered":30,"key":195},10,[196,199,202],{"id":197,"text":198},"11058161","'- On the canvas, is there some way to make it obvious why boxes are relatively positioned a particular way? For instance, when I add a new box next to the iPhone picture, it's…",{"id":200,"text":201},"11058191","Yeah, I understand that it could be confusing for someone, but for now I suggest you to check readme file on Github and I'll try my best, for next release, to make the site a…",{"id":203,"text":204},"11047711","There is still a lot of work to do, but it took me quite a while to bring out what you see now, so I'm looking for some feedback.",{"commenters":206,"max_depth":30,"maker_replies":194,"first_comment_mins":37,"lifespan_hours":207},16,57,[209,211,213,215,217,219,221,224,225,226,229,232,236,240,243,244,246,248,249,252,253,256,258,259,262],[54,36,30,210,55,36],"project\u002Fmixed\u002Fdesign",[197,36,36,212,11,37],"project\u002Fneutral\u002Fdesign",[50,37,37,214,51,36],"project\u002Fcritical\u002Fdocs",[200,37,36,216,11,37],"maker\u002Fneutral\u002Fdocs",[203,32,36,218,11,37],"project\u002Fneutral\u002Fnone",[179,32,30,220,180,36],"project\u002Fmixed\u002Fidea",[222,32,36,223,11,37],"11052851","project\u002Fneutral\u002Fidea",[107,32,30,220,108,36],[61,32,36,223,11,37],[227,32,30,212,228,36],"11053321","arihant",[230,32,36,231,11,37],"11058071","maker\u002Fneutral\u002Fnone",[233,30,36,234,235,36],"11052770","other\u002Fneutral\u002Fidea","jarcane",[237,30,36,238,239,36],"11052809","other\u002Fcritical\u002Fidea","sergiotapia",[241,30,36,242,11,37],"11052859","project\u002Fneutral\u002Fpricing",[190,30,36,234,191,36],[114,31,42,245,115,36],"maker\u002Fpositive\u002Fexecution",[99,31,42,247,100,36],"maker\u002Fpositive\u002Fnone",[138,42,30,212,139,36],[171,250,42,251,172,36],6,"project\u002Fpositive\u002Fidea",[70,250,36,216,11,37],[130,254,30,255,131,36],7,"project\u002Fneutral\u002Fdocs",[257,254,36,216,11,37],"11057987",[151,254,30,255,152,36],[122,260,37,261,123,36],8,"project\u002Fcritical\u002Fdesign",[263,260,36,264,11,37],"11058057","maker\u002Fneutral\u002Fdesign",[266,267,270],{"id":4,"t":12,"points":14,"comments":15},{"id":268,"t":269,"points":33,"comments":254},"15532654",1508762067,{"id":271,"t":272,"points":273,"comments":260},"45449958",1759414833,22,[275,280,285,290,294,298],{"id":276,"name":277,"points":278,"category":279},"11068902","TIL",819,"productivity",{"id":281,"name":282,"points":283,"category":284},"11071916","Deepstream.io",301,"infrastructure",{"id":286,"name":287,"points":288,"category":289},"11064507","The Deadlock Empire",269,"games",{"id":291,"name":292,"points":293,"category":284},"11072359","SocketCluster.io",217,{"id":295,"name":296,"points":297,"category":284},"11074537","LogDNA",196,{"id":299,"name":300,"points":301,"category":279},"11043502","Twtxt",154,false,"v2",{"id":305,"name":5,"line":6,"ai":302,"cat":20,"year":13,"points":14,"comments":15,"rec":27,"s":28,"top":18,"kw":306,"maker":11,"domain":10,"tier":19,"attempts":30,"strip":307,"url":9,"mix":308,"praise":94,"objection":119,"sub":21},11047709,[21,24,25,26],"3010030303000005535030310",[30,31,30,32],1794036540707]