[{"data":1,"prerenderedAt":406},["ShallowReactive",2],{"project-33156130":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":44,"post_text":47,"what":48,"said":97,"maker_in_thread":210,"shape":213,"grid":217,"attempts":368,"same_week":369,"maker_shows":325,"maker_hidden":398,"reader_version":399,"card":400},"33156130","Satori","Convert HTML and CSS to SVG","title","Show HN: Satori – Convert HTML and CSS to SVG","https:\u002F\u002Fgithub.com\u002Fvercel\u002Fsatori","github.com","steventey",1665434236,2022,244,59,201,2570,8,"notable","dev_tools","svg rendering library","library",[24,25,26,27,28],"html to svg","og image generation","svg rendering","flexbox layout","jsx","curious",0.039,{"positive":32,"neutral":33,"mixed":34,"critical":35},6,22,0,4,32,{"idea":38,"performance":40,"docs":41,"execution":42,"design":43},{"positive":35,"critical":39},1,{"positive":39,"critical":34},{"positive":34,"critical":39},{"positive":39,"critical":39},{"positive":34,"critical":39},[45,34,34,34,34,34,34,45,46,34,34,34,46,34,46,46,46,46,45,34,46,45,39,39,34,34,45,46,46,45,46,46,34,34,34,46,46,46,46,39],5,3,null,{"problem":49,"audience":64,"pricing":47,"motivation":70,"time_to_build":47,"stack":75,"openness":94,"stage":95,"team_size":96},{"value":50,"source":51,"evidence":52},"Generating images such as Open Graph share cards from HTML\u002FCSS quickly without a headless browser.","commenter",[53,56,60],{"id":54,"by":11,"text":55},"33156201","You can basically use this to generate Open Graph images programmatically for your websites really really fast (1-2ms)! Here's a blog post detailing how this works (using…",{"id":57,"by":58,"text":59},"33158551","benschwarz","We used this to generate dynamic share cards for our core web vitals checker tool (plug: https:\u002F\u002Fcalibreapp.com\u002Ftools\u002Fcore-web-vitals-checker). Previously new uncached requests…",{"id":61,"by":62,"text":63},"33156306","Jaydenaus","This was the use case I had in mind. My company generates exports that are either PDF or PNG\u002FJPEG images from the DOM using Puppeteer. We really wanted to support SVG but every…",{"value":65,"source":66,"evidence":67},"Developers generating dynamic social share images or exports.","inferred",[68,69],{"id":57,"by":58,"text":59},{"id":54,"by":11,"text":55},{"value":71,"source":72,"evidence":73},"Fast dynamic image generation for Open Graph cards.","maker",[74],{"id":54,"by":11,"text":55},[76,87],{"value":77,"source":66,"evidence":78},"JavaScript",[79,83],{"id":80,"by":81,"text":82},"33164632","dsmmcken","That's pretty cool. I've hand rolled an og-image generator with Automattic\u002Fnode-canvas for a static site (Docusaurus) at build time. Edge is cool, but doing it at build time…",{"id":84,"by":85,"text":86},"33252670","meowtimemania","Satori does run in node runtime. vercel\u002Fog (a wrapper around Satori) does not support node",{"value":88,"source":51,"evidence":89},"Yoga layout engine",[90],{"id":91,"by":92,"text":93},"33157085","aidos","Interesting. I was thinking that this was going to be a crazy amount of layout engine work, but now I look a little closer it appears the layout work is farmed out to yoga [0]…","open_source","launched","company",{"praise":98,"objections":110,"requests":142,"questions":162,"alternatives":187},[99,103],{"value":100,"source":51,"evidence":101},"Fast rendering compared to headless Chrome for share cards.",[102],{"id":57,"by":58,"text":59},{"value":104,"source":51,"evidence":105},"Useful concept for vector screenshots and preserving vector content.",[106],{"id":107,"by":108,"text":109},"33156615","crazygringo","(Warning: bit of a tangent) Conceptually, I love this. Mainly because for some reason it irritates me than screenshots are bitmaps. Nearly everything in a user interface or…",[111,125,136],{"value":112,"source":51,"evidence":113},"Only supports a limited subset of HTML and CSS and requires JSX.",[114,118,121],{"id":115,"by":116,"text":117},"33161181","gnrlst","Love the project! Sorry to be pedantic, but the claim is technically false. You don't actually support HTML and CSS. You support JSX. As someone who doesn't use React due to the…",{"id":119,"by":116,"text":120},"33162880","[0] \"supports a limited subset of HTML and CSS features\" (and it still requires jsx-esque syntax with curly braces) [1] uses JSX So, yeah, my comment still stands.",{"id":122,"by":123,"text":124},"33160848","EugeneOZ","JSX, not HTML. Hate JSX.",{"value":126,"source":51,"evidence":127},"Text shaping for Unicode and combining characters is incomplete.",[128,132],{"id":129,"by":130,"text":131},"33158649","petilon","Converting text to SVG is super hard. Flowing English text is easy enough, but when it comes to Unicode text, with languages such as Arabic and Indian languages, that's when it…",{"id":133,"by":134,"text":135},"33159101","shuding","Advanced text shaping isn’t implemented yet, where we plan to use Harfbuzz in the future.",{"value":137,"source":51,"evidence":138},"Output may not match browser rendering exactly.",[139],{"id":140,"by":134,"text":141},"33156409","No, Satori does not guarantee that the SVG will 100% match the browser-rendered HTML output. That's because Satori implements its own layout engine based on the SVG 1.1 spec.…",[143,147,158],{"value":144,"source":51,"evidence":145},"Support for plain HTML and CSS rather than JSX.",[146],{"id":115,"by":116,"text":117},{"value":148,"source":51,"evidence":149},"Tailwind className support.",[150,154],{"id":151,"by":152,"text":153},"33157068","searchableguy","Does the tailwind support work with className declaration? I would like to use it with existing component library which is built using tailwind without making changes. Is that…",{"id":155,"by":156,"text":157},"33175103","ramshorst","Interested in this too.",{"value":159,"source":51,"evidence":160},"Better font embedding and clearer naming of embedFont option.",[161],{"id":91,"by":92,"text":93},[163,170,180],{"value":164,"source":51,"evidence":165},"Can it convert a whole webpage into a single SVG?",[166],{"id":167,"by":168,"text":169},"33156222","metadat","Could satori be used to convert a whole webpage into a single SVG image? Could be a (convoluted?) way to ensure an asset looks the same across all browsers..",{"value":171,"source":51,"evidence":172},"Does it rely on a browser or include its own renderer?",[173,177],{"id":174,"by":175,"text":176},"33161465","wslh","Is Satori including it's own HTML\u002FCSS renderer or relying on a browser behind the scenes?",{"id":178,"by":134,"text":179},"33163159","It does not rely on a browser. Satori itself includes a CSS parser\u002Fnormalizer, a flexbox layout engine, a text layout engine and a SVG renderer.",{"value":181,"source":51,"evidence":182},"What are the practical use cases?",[183],{"id":184,"by":185,"text":186},"33156187","elefantastisch","This seems really cool, but I don't understand the use cases. Someone help me out?",[188,195,200,206],{"value":189,"source":51,"evidence":190},"html2canvas",[191],{"id":192,"by":193,"text":194},"33157786","seanwilson","It's all client-side apparently, essentially by writing a page renderer in JavaScript. See:…",{"value":196,"source":51,"evidence":197},"Headless Chrome \u002F Puppeteer rendering",[198,199],{"id":57,"by":58,"text":59},{"id":61,"by":62,"text":63},{"value":201,"source":51,"evidence":202},"Printing to PDF then converting to SVG with Inkscape",[203],{"id":204,"by":193,"text":205},"33157529","You can do something like this via the browser by printing the page to PDF then using Inkscape to convert that to SVG. I documented this here:…",{"value":207,"source":51,"evidence":208},"node-canvas",[209],{"id":80,"by":81,"text":82},{"comments":39,"answered":39,"key":211},[212],{"id":54,"text":55},{"commenters":214,"max_depth":215,"maker_replies":39,"first_comment_mins":32,"lifespan_hours":216},46,7,191,[218,220,224,226,229,232,235,238,241,244,247,249,252,255,256,259,263,266,268,270,272,273,275,276,279,282,284,287,291,293,294,295,298,300,301,303,307,309,311,314,317,319,322,323,327,331,334,337,340,342,344,346,348,352,355,357,358,360,365],[107,34,45,219,108,34],"project\u002Fpositive\u002Fidea",[221,34,34,222,223,34],"33156876","other\u002Fneutral\u002Fnone","asadlionpk",[225,34,34,222,108,34],"33157239",[227,34,34,222,228,34],"33157430","mmastrac",[230,34,34,222,231,34],"33158534","digitallyfree",[233,34,34,222,234,34],"33157722","joshspankit",[236,34,34,222,237,34],"33157923","nextaccountic",[239,34,34,222,240,34],"33158535","Waterluvian",[242,34,34,222,243,34],"33161816","bla3",[245,34,34,222,246,34],"33165386","Tagbert",[57,39,45,248,58,34],"project\u002Fpositive\u002Fperformance",[204,250,46,251,193,34],2,"project\u002Fneutral\u002Fnone",[253,250,34,222,254,34],"33157624","djbusby",[192,250,34,222,193,34],[257,250,34,222,258,34],"33160042","oefrha",[260,250,34,261,262,34],"33162750","other\u002Fneutral\u002Fprivacy","account42",[264,46,34,222,265,34],"33158232","rockwotj",[91,35,46,267,92,34],"project\u002Fneutral\u002Fdocs",[184,45,46,269,185,34],"project\u002Fneutral\u002Fidea",[54,45,34,271,11,39],"maker\u002Fneutral\u002Fnone",[167,45,46,269,168,34],[61,45,46,274,62,34],"project\u002Fneutral\u002Fexecution",[140,45,46,274,134,34],[277,45,46,251,278,34],"33157375","eyelidlessness",[280,45,46,274,281,34],"33157403","leerob",[283,45,46,251,278,34],"33158221",[285,45,34,222,286,34],"33158837","styfle",[288,45,45,289,290,34],"33157980","project\u002Fpositive\u002Fexecution","nawgz",[292,45,34,222,278,34],"33158161",[80,45,46,251,81,34],[84,45,46,274,85,34],[296,45,45,219,297,34],"33156808","julienreszka",[129,32,39,299,130,34],"project\u002Fcritical\u002Fexecution",[133,32,46,274,134,34],[115,215,39,302,116,34],"project\u002Fcritical\u002Fdocs",[304,215,34,305,306,34],"33161865","commenter\u002Fneutral\u002Fdocs","tngranados",[119,215,34,308,116,34],"commenter\u002Fneutral\u002Fnone",[310,215,34,308,134,34],"33162961",[312,18,45,219,313,34],"33159905","marsvin",[315,18,34,222,316,34],"33160610","fractallyte",[151,318,46,251,152,34],9,[320,318,46,251,321,34],"33161694","4lejandrito",[155,318,46,251,156,34],[324,325,45,219,326,34],"33156459",10,"gillesjacobs",[328,329,46,274,330,34],"33156508",11,"lazyjeff",[332,329,46,251,333,34],"33156570","alixanderwang",[335,329,34,222,336,34],"33156655","asib",[338,329,34,222,339,34],"33156811","morley",[341,329,34,222,92,34],"33156943",[343,329,34,308,278,34],"33157292",[345,329,34,308,92,34],"33157518",[347,329,34,222,92,34],"33156888",[349,350,46,269,351,34],"33156628",12,"jjtheblunt",[353,350,46,269,354,34],"33159194","an1sotropy",[174,356,46,251,175,34],13,[178,356,46,251,134,34],[359,356,46,251,175,34],"33182944",[361,362,39,363,364,34],"33161408",14,"project\u002Fcritical\u002Fidea","lloydatkinson",[122,366,39,367,123,34],15,"project\u002Fcritical\u002Fdesign",[],[370,375,380,385,390,394],{"id":371,"name":372,"points":373,"category":374},"33155074","InvokeAI",414,"ai",{"id":376,"name":377,"points":378,"category":379},"33153152","agreper",392,"infrastructure",{"id":381,"name":382,"points":383,"category":384},"33147079","Pages on Pages",345,"web_saas",{"id":386,"name":387,"points":388,"category":389},"33150086","playlists.dags.dev",295,"consumer_social",{"id":391,"name":392,"points":393,"category":20},"33164922","Open-Sourcing InboxSDK (YC S11)",257,{"id":395,"name":396,"points":397,"category":20},"33115719","Lambda-8cc",249,false,"v2",{"id":401,"name":5,"line":6,"ai":398,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":402,"top":18,"kw":403,"maker":11,"domain":10,"tier":19,"attempts":34,"strip":404,"url":9,"mix":405,"praise":100,"objection":112,"sub":21},33156130,0.04,[24,25,26,27,28],"5000000530003033335035110053353300033331",[32,33,34,35],1794036626039]