[{"data":1,"prerenderedAt":485},["ShallowReactive",2],{"project-42464310":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":35,"aspects":36,"strip":48,"post_text":49,"what":50,"said":78,"maker_in_thread":205,"shape":217,"grid":222,"attempts":447,"same_week":448,"maker_shows":41,"maker_hidden":477,"reader_version":478,"card":479},"42464310","Mizu.js","Lightweight HTML templating library for any-side rendering","title","Show HN: Mizu.js – Lightweight HTML templating library for any-side rendering","https:\u002F\u002Fmizu.sh","mizu.sh","lowlighter",1734632755,2024,225,86,338,3515,10,"notable","dev_tools","html templating library","library",[24,25,26,27,28],"html templating","javascript library","server-side rendering","no build step","custom elements","mixed",-0.146,{"positive":18,"neutral":32,"mixed":33,"critical":34},9,3,21,43,{"idea":37,"design":40,"docs":43,"pricing":45,"execution":47},{"positive":38,"critical":39},4,2,{"positive":41,"critical":42},1,5,{"positive":39,"critical":44},0,{"positive":39,"critical":46},14,{"positive":44,"critical":44},[42,44,44,42,41,41,44,41,42,44,44,42,33,33,42,42,33,44,44,41,33,44,41,44,33,41,41,41,41,41,41,41,44,44,41,41,41,41,33,44],"Hey HN,\n\nI'd like to share a fun project I've been working on: mizu.js.\n\nIt's a js library that add functional attributes support into your html, designed to be a simple and flexible alternative to fully-fledged web frameworks (such as Vue, React, and Angular), while offering more capabilities than other lightweight options (like Alpine.js and htmx).\n\nAs it's written using modern ES features and due to its isomorphic nature, it can be run in both browsers and runtimes (Node, Deno, Bun) without any changes. This makes it ideal for client-side and server-side rendering, as well as static site ge",{"problem":51,"audience":57,"pricing":58,"motivation":66,"time_to_build":57,"stack":70,"openness":75,"stage":76,"team_size":77},{"value":52,"source":53,"evidence":54},"Setting up frontend tooling is heavy; wants lightweight HTML templating with directives","maker",[55],{"id":56},"post",null,{"value":59,"source":53,"evidence":60},"Free for open-source and non-commercial use; commercial closed-source use requires a small monthly GitHub sponsorship",[61,62],{"id":56},{"id":63,"by":64,"text":65},"42465438","gwbas1c","> In summary, mizu.js is free for open-source and non-commercial projects, while a small contribution is required for commercial closed-source projects to support its…",{"value":67,"source":53,"evidence":68},"Vanilla JS is powerful now; wants simplicity without framework bloat",[69],{"id":56},[71],{"value":72,"source":53,"evidence":73},"JavaScript",[74],{"id":56},"open_source","launched","unknown",{"praise":79,"objections":106,"requests":150,"questions":164,"alternatives":176},[80,92,99],{"value":81,"source":82,"evidence":83},"Clean, well-organized documentation and site","commenter",[84,88],{"id":85,"by":86,"text":87},"42464494","corinroyal","I love the information architecture of this site. You jump right in to demonstration code and a reference and only later the marketing text. So refreshing. I can see at a glance…",{"id":89,"by":90,"text":91},"42466123","xingwu","The site is well organized and the information flows smoothly, nice job.",{"value":93,"source":82,"evidence":94},"No-build-step approach is refreshing",[95],{"id":96,"by":97,"text":98},"42465828","esco27","I appreciate the no-build-step approach. It’s refreshing to see a return to simplicity, even if it feels cyclical—similar libraries have come and gone, but that’s how the web…",{"value":100,"source":82,"evidence":101},"Custom element support is valuable",[102],{"id":103,"by":104,"text":105},"42465073","spankalee","I love that this lets you create custom elements! I think that's a big missing feature from HTMX (even though HTMX can already use custom elements). I'm working on a somewhat…",[107,126,136,143],{"value":108,"source":82,"evidence":109},"AGPLv3 plus MIT-with-restrictions dual license is confusing and unusable for many",[110,114,118,122],{"id":111,"by":112,"text":113},"42464675","alexchamberlain","The licence seems messed up. You can opt to use an MIT licence, but only if you're noncommercial or you pay. The MIT licence explicitly states that the software is provided free…",{"id":115,"by":116,"text":117},"42470791","withinboredom","heh. \"use it on the server\" ... oops, you triggered the networking clause of the AGPL, and now your entire backend is open source.",{"id":119,"by":120,"text":121},"42471081","replwoacause","Same until I saw the AGPLv3 license or forced subscription.",{"id":123,"by":124,"text":125},"42474396","bz2","It's certainly confusing as presented, both for MIT-plus-restrictions, and the dual licensing. For a lawyer's opinion on those two things, see:…",{"value":127,"source":82,"evidence":128},"Mixing logic into HTML attributes hurts separation of concerns",[129,133],{"id":130,"by":131,"text":132},"42465468","imiric","I like the focus on simplicity, but I really wish frontend frameworks and libraries would stop abusing HTML. Markup should only contain content and presentation. If it needs to…",{"id":134,"by":131,"text":135},"42470190","Like I said, my experience with frontend frameworks\u002Flibraries is limited, so I could be wrong. I last used React nearly a decade ago, Svelte a couple of years ago, and Vue quite…",{"value":137,"source":82,"evidence":138},"Writing non-standard attributes produces invalid HTML",[139],{"id":140,"by":141,"text":142},"42466107","err4nt","I wish it didn't require authors to practice doing the wrong thing (writing invalid HTML) for to use the tool. Authors are free to either create any data-* attributes they wish…",{"value":144,"source":82,"evidence":145},"Eval directive and low cohesion in the playground demo",[146],{"id":147,"by":148,"text":149},"42465486","gavmor","Slick looking website, novel and relatively intuitive DSL, solid documentation! Parsing the playground demo was a fun scavenger hunt! Too fun... it took me several minutes to…",[151,158],{"value":152,"source":82,"evidence":153},"Benchmarks against React, Vue and Nuxt",[154],{"id":155,"by":156,"text":157},"42464743","TripleChecker","It reminds me of vue templates. I’d love to see some benchmarks comparing it with react jsx and vue\u002Fnuxt, both for server-side and client-side. Thanks! Caught 1 typo and 1 broken…",{"value":159,"source":82,"evidence":160},"Simpler licensing",[161],{"id":162,"by":11,"text":163},"42466430","Yeah maybe I'll look into a simpler licensing as it may indeed be confusing and just drop the requirement, it's not like I really planned to make money with it anyways. While I…",[165,172],{"value":166,"source":82,"evidence":167},"What are the cons and tradeoffs compared to other approaches?",[168],{"id":169,"by":170,"text":171},"42466923","tonyhart7","but what is the cons here???? anything you mention about the pros, there must be cost to make right?? after fast skimming it, I found its gonna be hard to separate concern when…",{"value":173,"source":82,"evidence":174},"How to modularize code for cohesion in Mizu?",[175],{"id":147,"by":148,"text":149},[177,184,188,194,198],{"value":178,"source":82,"evidence":179},"HTMX",[180,181],{"id":103,"by":104,"text":105},{"id":182,"by":120,"text":183},"42471063","Yeah this sucks I was excited for until I saw this too. Guess I’ll stick with HTMX or datastar",{"value":185,"source":53,"evidence":186},"Alpine.js",[187],{"id":56},{"value":189,"source":82,"evidence":190},"Datastar",[191],{"id":192,"by":120,"text":193},"42471157","Here is an alternative without the funky license https:\u002F\u002Fdata-star.dev",{"value":195,"source":53,"evidence":196},"Vue",[197],{"id":56},{"value":199,"source":82,"evidence":200},"Knockout.js",[201],{"id":202,"by":203,"text":204},"42464646","phplovesong","Feels like knockoutjs, i recall using it 10 years ago. It was all so simple back then.",{"comments":206,"answered":38,"key":207},8,[208,211,214],{"id":209,"text":210},"42465363","Thanks! It's always hard to find a nice balance between explaining your project and showing how it actually work",{"id":212,"text":213},"42468220","Maybe it'd feel weird for a native speaker to have something named \"Water\", but it does sound cool. But that's also related to another project of mine, matcha (which is a kind of…",{"id":215,"text":216},"42465906","Yeah the playground is intended to show many directives to display the capabilities, but I wouldn't recommend making complex apps entirely with the iife version. It's mostly…",{"commenters":218,"max_depth":219,"maker_replies":206,"first_comment_mins":220,"lifespan_hours":221},53,6,17,120,[223,225,227,231,233,236,238,240,242,244,247,250,251,254,257,259,261,262,265,270,273,277,279,282,286,289,292,294,297,301,302,305,307,309,312,315,317,320,322,325,326,329,331,334,338,340,342,345,348,351,353,354,357,360,363,365,367,371,373,375,380,383,386,389,391,393,396,398,400,403,406,409,412,415,419,421,424,426,428,429,432,434,436,439,442,444],[96,44,42,224,97,44],"project\u002Fpositive\u002Fidea",[103,41,42,226,104,44],"project\u002Fpositive\u002Fdesign",[228,41,44,229,230,44],"42468892","commenter\u002Fneutral\u002Fnone","mdhb",[232,41,44,229,104,44],"42470858",[234,41,44,229,235,44],"42469523","pickpuck",[237,41,44,229,104,44],"42470853",[85,39,42,239,86,44],"project\u002Fpositive\u002Fdocs",[209,39,44,241,11,41],"maker\u002Fneutral\u002Fdocs",[192,33,41,243,120,44],"project\u002Fcritical\u002Fpricing",[245,38,41,243,246,44],"42472489","brianzelip",[248,42,41,243,249,44],"42469102","johncoltrane",[115,42,41,243,116,44],[252,42,44,229,253,44],"42471046","user432678",[255,42,44,256,116,44],"42471097","commenter\u002Fneutral\u002Fpricing",[258,42,44,256,253,44],"42473144",[260,42,44,256,116,44],"42474950",[182,42,41,243,120,44],[263,219,33,264,120,44],"42471034","project\u002Fmixed\u002Fpricing",[266,267,42,268,269,44],"42466343",7,"maker\u002Fpositive\u002Fidea","omtinez",[271,267,44,272,120,44],"42484495","commenter\u002Fpositive\u002Fnone",[274,206,44,275,276,44],"42467495","other\u002Fneutral\u002Fnone","Vampiero",[212,206,44,278,11,41],"project\u002Fneutral\u002Fnone",[280,206,44,275,281,44],"42468811","evertedsphere",[283,206,42,284,285,44],"42470843","project\u002Fpositive\u002Fnone","malvim",[287,206,42,224,288,44],"42468268","ender1235",[290,206,44,275,291,44],"42473745","serial_dev",[293,32,33,278,120,44],"42471104",[295,18,44,275,296,44],"42464471","pvg",[298,299,42,224,300,44],"42465169",11,"toastercat",[119,299,41,243,120,44],[303,299,42,304,300,44],"42502901","project\u002Fpositive\u002Fpricing",[306,299,42,304,120,44],"42503567",[89,308,42,239,90,44],12,[169,310,33,311,170,44],13,"project\u002Fneutral\u002Fidea",[313,310,33,311,314,44],"42470750","progx",[147,46,33,316,148,44],"project\u002Fmixed\u002Fexecution",[318,46,44,229,319,44],"42465649","CharlieDigital",[321,46,44,229,148,44],"42467129",[323,46,44,229,324,44],"42468928","szundi",[215,46,44,278,11,41],[327,328,44,275,120,44],"42471614",15,[111,330,41,243,112,44],16,[332,330,44,256,333,44],"42464836","benatkin",[335,330,33,336,337,44],"42465896","project\u002Fneutral\u002Fpricing","kube-system",[339,330,44,256,333,44],"42466263",[341,330,44,256,337,44],"42466911",[343,330,44,229,344,44],"42469047","8n4vidtmkvmk",[346,330,41,243,347,44],"42465299","wccrawford",[349,330,33,336,350,44],"42465810","jraph",[162,330,44,352,11,41],"maker\u002Fneutral\u002Fpricing",[123,330,44,256,124,44],[355,330,33,336,356,44],"42467358","simonw",[358,330,33,264,359,44],"42468162","arunaugustine",[361,330,41,243,362,44],"42468171","cle",[364,330,41,243,344,44],"42469024",[140,220,41,366,141,44],"project\u002Fcritical\u002Fdesign",[368,220,44,369,370,44],"42466141","commenter\u002Fneutral\u002Fdesign","zamalek",[372,220,44,226,11,41],"42466331",[374,220,44,369,141,44],"42474024",[376,377,41,378,379,44],"42465133",18,"project\u002Fcritical\u002Fidea","beders",[381,377,41,378,382,44],"42465165","jchw",[384,377,44,385,104,44],"42465232","commenter\u002Fneutral\u002Fidea",[387,377,44,388,11,41],"42465599","maker\u002Fneutral\u002Fnone",[63,390,41,243,64,44],19,[392,390,41,243,148,44],"42465576",[394,390,41,243,395,44],"42466803","Aeolun",[397,390,41,243,64,44],"42472118",[202,399,33,311,203,44],20,[401,399,44,275,402,44],"42464768","MortyWaves",[404,399,44,275,405,44],"42465344","egeozcan",[407,399,44,229,408,44],"42465622","spmurrayzzz",[410,399,44,229,411,44],"42466537","recursive",[413,34,44,275,414,44],"42465211","welder",[416,417,44,275,418,44],"42464823",22,"malkosta",[130,420,41,366,131,44],23,[422,420,44,369,423,44],"42465522","skgough",[425,420,41,366,131,44],"42466037",[427,420,44,369,344,44],"42469075",[134,420,41,366,131,44],[430,420,44,369,431,44],"42473765","whizzter",[433,420,41,366,344,44],"42476420",[155,435,33,278,156,44],24,[437,435,33,438,333,44],"42464803","project\u002Fneutral\u002Fdesign",[440,435,44,441,11,41],"42465325","maker\u002Fneutral\u002Fdesign",[443,435,44,241,11,41],"42465252",[445,435,44,275,446,44],"42465825","leopoldj",[],[449,454,458,463,468,473],{"id":450,"name":451,"points":452,"category":453},"42507116","PaperMatch",324,"languages",{"id":455,"name":456,"points":457,"category":20},"42506569","FixBrowser",320,{"id":459,"name":460,"points":461,"category":462},"42471913","Artemis",312,"productivity",{"id":464,"name":465,"points":466,"category":467},"42497173","isle",251,"games",{"id":469,"name":470,"points":471,"category":472},"42493832","Super Snowflake Maker",228,"creative",{"id":474,"name":475,"points":476,"category":467},"42480624","Eonfall",222,false,"v2",{"id":480,"name":5,"line":6,"ai":477,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":481,"top":18,"kw":482,"maker":11,"domain":10,"tier":19,"attempts":44,"strip":483,"url":9,"mix":484,"praise":81,"objection":108,"sub":21},42464310,-0.15,[24,25,26,27,28],"5005110150053355300130103111111100111130",[18,32,33,34],1794036666092]