TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Show HN: Htmldocs – Typeset and generate pdfs with HTML/CSS

226 pointsby kelvinzhangover 1 year ago
htmldocs is an Overleaf-style editor for typesetting documents using HTML&#x2F;CSS, which provides the same benefits as LaTeX while being more accessible, customizable, and familiar.<p>I built this because I wanted to programatically generate invoices as well as automatically tailor my resume to jobs but had no good way of generating well-formatted PDFs. I ended up building a templating engine to Chromium rendering pipeline to generate PDFs, and due to the amount of engineering effort, turned it into a tool for others that might want to do the same. There&#x27;s a built-in API (<a href="https:&#x2F;&#x2F;htmldocs.com&#x2F;docs&#x2F;documents" rel="nofollow">https:&#x2F;&#x2F;htmldocs.com&#x2F;docs&#x2F;documents</a>) that you can call to turn JSON into PDFs in a single call.<p>htmldocs is different from other tools like Wkhtmltopdf and Weasyprint in that it uses Chromium to generate PDFs, meaning that it supports the most modern CSS features and there&#x27;s minimal drift between the rendered HTML document and PDF.<p>Will also consider open sourcing if there&#x27;s enough interest in the project!

38 comments

chrismorganover 1 year ago
&gt; <i>htmldocs is different from other tools like Wkhtmltopdf and Weasyprint in that it uses Chromium to generate PDFs, meaning that it supports the most modern CSS features and there&#x27;s minimal drift between the rendered HTML document and PDF.</i><p>WeasyPrint is implemented as a from-scratch and specific-purpose rendering engine, so yeah, it’s different. But wkhtmltopdf uses WebKit, meaning it’s much the same as htmldocs, just backed by a different browser engine.<p>It’s important to realise, though, that using an existing browser engine <i>doesn’t</i> mean everything’s hunky-dory: in fact, when it comes to some of the things you care about with producing PDFs, some things will be <i>worse</i>, and the WeasyPrint approach has significant advantages. Because browsers don’t care about your use case <i>at all</i>. From time to time they’ll improve things incidentally, but <i>all</i> browsers are missing things like a lot of CSS Paged Media stuff, stuff that’s often been specified for a decade or more, where things like WeasyPrint have had them for years and years.
评论 #39031797 未加载
评论 #39028849 未加载
pitdickerover 1 year ago
Prince has been doing this for 20 years and is in my opinion the gold standard, with good support for footnotes, endnotes, page headers and other little extensions that are only relevant for printing. <a href="https:&#x2F;&#x2F;www.princexml.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.princexml.com&#x2F;</a><p>But I&#x27;ll be giving this a try!
评论 #39058410 未加载
cubefoxover 1 year ago
See also native CSS support for paged media:<p><a href="https:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;css-page-3&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;css-page-3&#x2F;</a><p>When I looked into it several years ago, browser support for some critical features wasn&#x27;t there yet. Not sure whether this has improved.<p>In principle, this would be a great alternative to proprietary PDF rendering libraries which require you to design your document completely in (e.g. Java) code, and to the typical LaTeX approach. You really appreciate the elegance of HTML+CSS once you had the misfortune of having to do a simple fucking table in LaTeX.
评论 #39030413 未加载
评论 #39030253 未加载
karteumover 1 year ago
Some people might be interested in <a href="https:&#x2F;&#x2F;weasyprint.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;weasyprint.org&#x2F;</a>
评论 #39028438 未加载
dsr_over 1 year ago
Your terms of service appear to be bogus:<p>&gt; You acknowledge that the Website is a general-purpose search engine and tool. Specifically, but without limitation, the Website allows you to search multiple websites for music. Moreover, the Website is a general-purpose tool that allows you to convert audio files from videos and audio from elsewhere on the Internet. The Website may only be used in accordance with law. We do not encourage, condone, induce or allow any use of the Website that may be in violation of any law.
评论 #39028779 未加载
amadeuspagelover 1 year ago
Trying to login with google I get this error:<p>&gt; htmldocs.com has not completed the Google verification process. The app is currently being tested, and can only be accessed by developer-approved testers. If you think you should have access, contact the developer.
leetroutover 1 year ago
I have been building a custom PDF generator for my Remarkable tablet using jsPDF. Something that has surprised me is how hard it is to keep the file size small with tools like this.<p>Its fun and fast to generate things but when you get to 1000+ pages for something like a year long planner the document can quickly balloon past 70 MB.<p>So far I have kept my 750-1300 page planner between 3-7 MB.<p>I will give this a try and compare.
评论 #39029561 未加载
FootballMuseover 1 year ago
Been using <a href="https:&#x2F;&#x2F;github.com&#x2F;diegomura&#x2F;react-pdf">https:&#x2F;&#x2F;github.com&#x2F;diegomura&#x2F;react-pdf</a> for this purpose for years<p>Uses React Native like components and styling.<p>WYSIWYG: <a href="https:&#x2F;&#x2F;react-pdf.org&#x2F;repl" rel="nofollow">https:&#x2F;&#x2F;react-pdf.org&#x2F;repl</a>
QuiCasseRienover 1 year ago
@kelvinzhang<p>Quite frankly, htmldocs is the exact project i&#x27;m looking for months. I&#x27;m tired of word and same alternative and wanted something i can write html and css3 to convert to PDF.<p>You do and in a beautiful way !<p>Some question : i just want to use your product be also need to be sure my doc will by avaivable in futur. what&#x27;s your plan ?<p>- opensource ? - community&#x2F;enterprise ? - close source but a docker version to go on premise ?<p>Thanks for you answer and by the work very good works !
评论 #39037776 未加载
matricariaover 1 year ago
How does this compare to Typst?[1]<p>What I like about Typst is that I can use it completely offline and with my editor of choice. Is this planned for htmldocs too?<p>[1] <a href="https:&#x2F;&#x2F;typst.app&#x2F;" rel="nofollow">https:&#x2F;&#x2F;typst.app&#x2F;</a>
评论 #39037848 未加载
tagyroover 1 year ago
Great project and great work!<p>I had a similar itch to scratch and I found quarto (<a href="https:&#x2F;&#x2F;quarto.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;quarto.org&#x2F;</a>) - free, open-source and doesn’t depend on chrome (admittedly it has other dependencies, but at least not chrome).
评论 #39030393 未加载
RobKohrover 1 year ago
You use the word documents on the site, but you don&#x27;t make it clear that it is for making pdfs. I thought that this was just an html&#x2F;css webpage editor.<p>&quot;Typeset and Generate PDFs with HTML&#x2F;CSS&quot;<p>really should be the H1 on that page for clarity.
评论 #39028947 未加载
zokierover 1 year ago
Typesetting for print from HTML is one of those things that both keeps popping up but also never really seems to take off. Prince still remains the main player and as proprietary as ever.<p>2005: <a href="https:&#x2F;&#x2F;alistapart.com&#x2F;article&#x2F;boom&#x2F;" rel="nofollow">https:&#x2F;&#x2F;alistapart.com&#x2F;article&#x2F;boom&#x2F;</a><p>2015: <a href="https:&#x2F;&#x2F;www.smashingmagazine.com&#x2F;2015&#x2F;01&#x2F;designing-for-print-with-css&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.smashingmagazine.com&#x2F;2015&#x2F;01&#x2F;designing-for-print...</a><p>Today, this.
nsimover 1 year ago
I&#x27;ve used flying saucer pdf[1] for this in the past, but the missing piece always seems to be a descent WYSIWYG template editor. Either open source or paid.<p>Any suggestions on a web solution that allows non-devs to make great templates would be appreciated.<p>Historically I&#x27;ve built something simple with Tiny and added a preview button to render, but that super clunky.<p>[1] <a href="https:&#x2F;&#x2F;github.com&#x2F;flyingsaucerproject&#x2F;flyingsaucer">https:&#x2F;&#x2F;github.com&#x2F;flyingsaucerproject&#x2F;flyingsaucer</a>
评论 #39031798 未加载
评论 #39034848 未加载
kayo_20211030over 1 year ago
This might be great, and it might not. It&#x27;s hard to tell as a lot of the documentation is missing, or has broken links. It would be really nice if the docs were more complete, and didn&#x27;t require a sign-up to kick the types. Is it fundamentally better than, say Apache FOP? Multi-page tables with overflow&#x2F;keep together control is hard. Does this do it better? I can&#x27;t tell as all the templates seem to be single page.
jppittmaover 1 year ago
Oh, is this like a paid version of pandoc?
评论 #39029285 未加载
amcaskillover 1 year ago
This looks awesome, congratulations.<p>I think you’re onto something here.<p>I work on an OSS reporting and analytics tool (<a href="https:&#x2F;&#x2F;github.com&#x2F;evidence-dev&#x2F;evidence">https:&#x2F;&#x2F;github.com&#x2F;evidence-dev&#x2F;evidence</a>) and the amount of time and effort that goes into a really good “print pdf”, and how valuable people find it, has been one of the more surprising parts of the project to me.
cholmonover 1 year ago
What is the pricing like, e.g., per-template created, per-PDF rendered, or per-API call? I don&#x27;t see any pricing info on the public site.
评论 #39030472 未加载
headsover 1 year ago
It’s a good idea. You’ll want to support GitHub flavoured markdown as an input, if you don’t already. Be sure to allow an inline &lt;style&gt; so documents can still be customised using code.<p>I’d also like to have a mode — the default? — where all rendering was being done locally. There are documents I write that just can’t be stored on a third party computer.<p>Overleaf, to some extent, has shown the appeal for letting people focus on writing 100% of the time and running software 0% of the time. I’d prefer to use your tool though to write a quick letter to go in a parcel as a packing slip.<p>By the way: on mobile, your animated headline causes the page to jump up and down.
chrisfinazzoover 1 year ago
Weasyprint has a bunch of options to do almost anything you can think of, but in my case, it&#x27;s just a generator.<p>To your point that htmldocs supports more modern CSS features, I can see the advantage. Although the most complicated things I needed - aside from @page rules - were a replacement for a 2nd page header (solved w&#x2F; Flexbox) and automatic page breaks that would display correctly (a few lines of CSS processed w&#x2F; Weasyprint came out better and didn&#x27;t require me to print to PDF manually.)
taulienover 1 year ago
Hi @kelvinzhang, the burger menu does not work on firefox for android
评论 #39030289 未加载
评论 #39030406 未加载
评论 #39030690 未加载
wombatpmover 1 year ago
Maybe it’s because I come from the printing world of catalogs, magazines, and books printed on web offset printers but typeset implies a level of control and precision that I’ve never seen with HTML&#x2F;CSS. When I had to build a backend to generate print ready PDF files being printed on pre-printed invoice stock, it was ReportLab all the way. I needed pixel level accuracy and control.
bhavikchavdaover 1 year ago
Nice Idea, looking forward to using its API in my application.<p>I&#x27;ve used <a href="https:&#x2F;&#x2F;github.com&#x2F;xpublisher&#x2F;weasyprint-rest">https:&#x2F;&#x2F;github.com&#x2F;xpublisher&#x2F;weasyprint-rest</a> for a many years but now planning to switch from it as it&#x27;s archived by the maintainer.<p>All the best for the future of htmldocs.
NanoWarover 1 year ago
I have used Gotenberg [1] in a production environment. Dockerized in a Kubernetes Cluster. It just works! I can absolutely recommend it. Uses Chromium under the hood and was able to render gradients and text shadow, nice! [1] <a href="https:&#x2F;&#x2F;gotenberg.dev&#x2F;" rel="nofollow">https:&#x2F;&#x2F;gotenberg.dev&#x2F;</a>
jdthediscipleover 1 year ago
Awesome idea, been looking for something like this every now and then, esp right now.<p>But<p>could use some performance improvements...<p>Maybe you tested this on your state of the art workstation but my i7 8th gen is getting choked to death...<p>EDIT:<p>It doesn&#x27;t seem to work: I picked the resume template and set the margin and padding on `li` to 0 but nothing changed in the output.
评论 #39029052 未加载
cprover 1 year ago
Great stuff! Yes, please open source it.
bashaumaover 1 year ago
It seems to be a cool project, any differences from Vivliostyle[0]? It looks like they have one thing in common: typesetting using HTML+CSS.<p>[0]: <a href="https:&#x2F;&#x2F;vivliostyle.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;vivliostyle.org&#x2F;</a>
shaneclevelandover 1 year ago
This looks well implemented. I will play with it some. I have a couple projects that rely on html interface to pdf output (or at least print &gt; save to PDF reliability). I would love to be able to remove the management of internal dependencies.
nimaluover 1 year ago
Please open source it!! I&#x27;ve looked for a solution like this multiple times. Well done!
criddellover 1 year ago
There’s a similarly named html -&gt; pdf tool called htmldoc:<p><a href="https:&#x2F;&#x2F;www.msweet.org&#x2F;htmldoc&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.msweet.org&#x2F;htmldoc&#x2F;</a><p>It’s crazy fast, but doesn’t handle Unicode well or have much support for CSS.
benororover 1 year ago
Had a similar scrapped idea a few years ago: <a href="https:&#x2F;&#x2F;benoror.github.io&#x2F;laystack-landing&#x2F;" rel="nofollow">https:&#x2F;&#x2F;benoror.github.io&#x2F;laystack-landing&#x2F;</a>
thinkindieover 1 year ago
The landing page after login resembles Gdoc but that&#x27;s ok.<p>One small thing, when signing up with Gmail, it still asks for my Name and Surname when supposedly it&#x27;s something you can get out of the OAuth APIs.
anilgulechaover 1 year ago
Does jsreport already cover the usecases listed?<p><a href="https:&#x2F;&#x2F;playground.jsreport.net&#x2F;" rel="nofollow">https:&#x2F;&#x2F;playground.jsreport.net&#x2F;</a>
shafyyover 1 year ago
Would love to see an open-source version. Also, are you thinking of making a version that one could run locally with the command line?
kitdover 1 year ago
Good luck with the project.<p>About 20 years ago, I did something along similar lines, except going the HTML-XML-XSL&#x2F;FO-Apache FOP.<p>That was ... &quot;fun&quot;.
awonghover 1 year ago
Cool service! I like that it’s just HTML&#x2F;CSS but the front end editor looks quite cool.<p>I also just open sourced part of my app that does PDF generation, but it’s completely bare bones.<p>I basically wanted a wrapper around the pdf generating part of chromium so that i could generate pdfs on pages within my own app.<p>Its here if anyone wants to check it out: <a href="https:&#x2F;&#x2F;github.com&#x2F;awongh&#x2F;bakso-doc">https:&#x2F;&#x2F;github.com&#x2F;awongh&#x2F;bakso-doc</a>
Dowwieover 1 year ago
run headless chrome to render your web page to pdf
kevin_thibedeauover 1 year ago
You pretty much spelled out the use case for XSL-FO.