Satori
Dev tools
svg rendering library
SHOW HN2022
How HN took it
6 positive, 22 neutral or asking, 0 mixed, 4 critical, out of 32 comments about the project. Thread score +0.04.
Idea: 4 for, 1 againstExecution: 1 for, 1 againstPerformance: 1 for, 0 againstDocs: 0 for, 1 againstDesign: 0 for, 1 against
The thread, comment by comment
Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.
positive neutral or mixed critical about another commenter or something else the maker
What HN said
What people liked
Fast rendering compared to headless Chrome for share cards.
From 1 comment
We used this to generate dynamic share cards for our core web vitals checker tool (plug: https://calibreapp.com/tools/core-web-vitals-checker). Previously new uncached requests…
benschwarz on HN
Useful concept for vector screenshots and preserving vector content.
From 1 comment
(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…
crazygringo on HN
Objections
Only supports a limited subset of HTML and CSS and requires JSX.
From 3 comments
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…
gnrlst on HN[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.
gnrlst on HNJSX, not HTML. Hate JSX.
EugeneOZ on HN
Text shaping for Unicode and combining characters is incomplete.
From 2 comments
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…
petilon on HNAdvanced text shaping isn’t implemented yet, where we plan to use Harfbuzz in the future.
shuding on HN
Output may not match browser rendering exactly.
From 1 comment
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.…
shuding on HN
Requests
Support for plain HTML and CSS rather than JSX.
From 1 comment
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…
gnrlst on HN
Tailwind className support.
From 2 comments
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…
searchableguy on HNInterested in this too.
ramshorst on HN
Better font embedding and clearer naming of embedFont option.
From 1 comment
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]…
aidos on HN
Questions
Can it convert a whole webpage into a single SVG?
From 1 comment
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..
metadat on HN
Does it rely on a browser or include its own renderer?
From 2 comments
Is Satori including it's own HTML/CSS renderer or relying on a browser behind the scenes?
wslh on HNIt does not rely on a browser. Satori itself includes a CSS parser/normalizer, a flexbox layout engine, a text layout engine and a SVG renderer.
shuding on HN
What are the practical use cases?
From 1 comment
This seems really cool, but I don't understand the use cases. Someone help me out?
elefantastisch on HN
Alternatives named
html2canvas
From 1 comment
It's all client-side apparently, essentially by writing a page renderer in JavaScript. See:…
seanwilson on HN
Headless Chrome / Puppeteer rendering
From 2 comments
We used this to generate dynamic share cards for our core web vitals checker tool (plug: https://calibreapp.com/tools/core-web-vitals-checker). Previously new uncached requests…
benschwarz on HNThis was the use case I had in mind. My company generates exports that are either PDF or PNG/JPEG images from the DOM using Puppeteer. We really wanted to support SVG but every…
Jaydenaus on HN
Printing to PDF then converting to SVG with Inkscape
From 1 comment
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:…
seanwilson on HN
node-canvas
From 1 comment
That's pretty cool. I've hand rolled an og-image generator with Automattic/node-canvas for a static site (Docusaurus) at build time. Edge is cool, but doing it at build time…
dsmmcken on HN