What is the API to produce SVG?
Show HN: Dropflow, a CSS layout engine for node or
81–90 of 146 posts
Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>
#82This is an amazing piece of work. Thanks for making this open-source. The default way of generating beautiful PDFs in the backend these days is, running a headless browser and using browser APIs to turn HTML/CSS into PDFs. And apparently, it's a bit costly running instances of browser in the server and scale it properly for huge workloads. This is literally a game changer. Now it's possible to design PDFs using HTML/…
One of the benefits of using the browser is that the generated PDF will be using vectors/fonts etc whereas Canvas will be mostly an image in the PDF. Not a big deal for the most use cases.
I feel like it’s probably not a leap to go from this to having a PDF renderer as a backend. The trickiness is in the layout, which this is already doing. Looks to be a lower level api and a way to render to absolutely positioned html. That gets you most of the way there.
Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>
#83I worry that this sort of technology is going to lead to webapps that aren't really what we've grown to think of as "the web" but which will instead be closer to a VNC window where you just see pixels and can't interact with anything or see how stuff works in devtools.
That’s what a GUI app is, though. You could say it’s the default way we interact with graphical apps. Web browsers, along with web-enabled platforms, add a bunch of extra stuff to that.
Many of us just want good, GUI apps for many things. They were often faster and lighter. VS Code is the exception to the rule which I use regularly.
Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>
#84For anyone struggling with flexbox, you can use this tool to streamline the process of creating responsive layouts, removing the need to focus on multiple properties: https://flexboxcss.com
This is the first site I've run in to that uses neumorphic design. Love the aesthetic -- just never seen in it the wild before.
Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>
#85This is an amazing piece of work. Thanks for making this open-source. The default way of generating beautiful PDFs in the backend these days is, running a headless browser and using browser APIs to turn HTML/CSS into PDFs. And apparently, it's a bit costly running instances of browser in the server and scale it properly for huge workloads. This is literally a game changer. Now it's possible to design PDFs using HTML/…
As an aside its amazing how far the web has come, where the best way to make pretty pdf documents is to literally run a web browser on the server. This would have been so unthinkable back in the 90s & 2000s
Have you tried Typst? It's like a modern version of LaTeX and allows to generate nice looking documents quickly. Can be called from the console and makes it easy to create templates and import resources like images, fonts and data (csv, json, toml, yaml, raw files, ...). Of course it is its own language instead of HTML/CSS but so far I found it quite pleasant to use.
Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>
#86Does anyone have a similar solution for drawing graphs / charts in a Node environment without a browser dependency? Last time I explored this I couldn't find any good solutions.
You could use https://github.com/vercel/satori which supports Node 16+.
Thanks. I've tried using Satori but I'm curious if you've used it to draw graphs specifically. E.g. Satori expects JSX / doesn't support HTML strings from d3-node with dangerouslySetInnerHTML.
Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>
#87Does anyone have a similar solution for drawing graphs / charts in a Node environment without a browser dependency? Last time I explored this I couldn't find any good solutions.
Does this depend on a browser? It looks like it doesn't - which is pretty impressive!
Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>
#88Does anyone have a similar solution for drawing graphs / charts in a Node environment without a browser dependency? Last time I explored this I couldn't find any good solutions.
You could use https://github.com/vercel/satori which supports Node 16+.
Unfortunately not for nested inline nodes, like spans of text with formatting. For a lot of uses, that will be OK - but for rendering say, markdown text, Satori won't work.
The upstream layout engine handles flexbox layout, and it's unclear if Facebook needs inline layout or if Vercel would pick it up and close the gap: https://github.com/facebook/yoga
Then again, for the main purpose Satori is advertised for - generating URL unfurl previews - Dropflow looks like it might be the answer.
Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>
#89This is an amazing piece of work. Thanks for making this open-source. The default way of generating beautiful PDFs in the backend these days is, running a headless browser and using browser APIs to turn HTML/CSS into PDFs. And apparently, it's a bit costly running instances of browser in the server and scale it properly for huge workloads. This is literally a game changer. Now it's possible to design PDFs using HTML/…
As an aside its amazing how far the web has come, where the best way to make pretty pdf documents is to literally run a web browser on the server. This would have been so unthinkable back in the 90s & 2000s
Back around 2002 at least there were some products, ABCpdf is one I used a lot, which ran Internet Explorer on the server to generate PDFs from HTML. Worked pretty well from what I recall.
Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>
#90Earlier quoted context omitted.
As an aside its amazing how far the web has come, where the best way to make pretty pdf documents is to literally run a web browser on the server. This would have been so unthinkable back in the 90s & 2000s
I needed to transform a 12MB HTML file into a PDF document and headless Chrome quickly ran out of memory (4GB+). We are now using a commercial alternative that seems be be using a custom engine that implements the HTML and CSS specs. The result is reduced memory usage (below 512MB during my tests) and the resulting PDF is much smaller, 3.3MB vs 42MB.
Did you try Weasyprint?