ASAP PDF
The first framework for fast
and easy PDF layout
Currently v1.0.0, Node v14.15.0+

About
ASAP PDF is designed to create PDF files using HTML and CSS (Pug/SCSS). With ASAP PDF, you can:
- Convert HTML to PDF on the fly;
- Get an in-browser preview that’s nearly identical to the final PDF file;
-
Inline all external assets to your HTML without using third-party services (your
images and fonts are encoded with base64, and styles are automatically inserted into
the
<head>
tag); - Use ready-made text components;
- Reuse your components with Pug;
- Stop worrying about stylelint or pug-lint config, as they are already configured;
- Perform screenshot testing of your project and get a detailed report.
Quick start
Requirements:
- Node v14.15.0 or higher
Quick start guide:
- Download the ASAP PDF repository;
- In the project root folder, run
npm i
; - To start the project:
- Run
npm start
if you need to inline all external assets to HTML and convert the final HTML to PDF on the fly. The final PDFs will be saved in the folder/dist/pdf/
. You can open these PDFs in your IDE to see the result of code changes immediately;To speed up your workflow, you have the option of choosing which HTML files will be converted to PDF on the fly. - Run
npm run dev
if you don't need to inline all external assets to HTML and convert the final HTML to PDF on the fly. Sourcemaps are available in this mode;
- Run
- Make a copy of the file
/app/pug/pages/index.pug
(or/app/html/html-example.html
if you want to use HTML) and name it whatever you need; - Create a SCSS file for the new page in the folder
/app/scss/pages/
and import it in the file/app/scss/_pages.scss
, if needed; -
Write markup in the file created in step 4. All the code should be written inside the block with
.sheet.A4-m-15mm
classes; - Use ready-made utilities and components;
- The compiled project files will be saved in the
/dist/
folder.
Resource inlining in HTML means base64 encoding of images and fonts (in both HTML
and CSS), and embedding compressed CSS in HTML (into the <head>
tag).
Support ASAP PDF
ASAP PDF is developed by our small, friendly team; we work on the project in our free time. We would appreciate it if you support ASAP PDF and motivate us to develop it.
Boosty:
Features
Ready-made components
Library of components for PDF layout
Converting HTML to PDF
On the fly (using Puppeteer)
Image compression
All images are optimized during the project assembly
Base64
Assets are encoded with base64 and inserted into the HTML on the fly
PurgeCSS
PurgeCSS will help you get rid of unnecessary CSS
Pug
Elegant and powerful HTML templating engine
SCSS
Probably the best CSS preprocessor
Mock data
Simplest mocking with data substitution from JSON
Testing
Testing with detailed reports. Read about ASAP PDF testing
Detailed documentation
Comprehensive documentation in a Storybook format
ASAP PDF uses Puppeteer to convert HTML to PDF, so it is recommended to use Puppeteer Sharp to get the same conversion results on the backend.