HTML2PDF Preview for VS Code

Preview and export HTML files as PDF directly from Visual Studio Code using the html2pdf service.

HTML2PDF Preview

Features

🔍 Live Preview: Preview HTML files as PDF in a side-by-side view
💾 Export to PDF: Save your HTML as a PDF file with one click
⚙️ Configurable: Customize page size, margins, orientation, and more
🔄 Auto-Refresh: Automatically update preview when you save your HTML file
🎨 Template Support: Works with html2pdf templates and custom HTML
⚡ Fast: Powered by the high-performance html2pdf rendering engine

Installation

Install the extension from the VS Code Marketplace
Get your API key from rendly.cloud
Configure your API key in VS Code settings

Quick Start

1. Configure API Key

Open VS Code settings and search for "html2pdf":

{
  "html2pdf.apiKey": "your-api-key-here",
  "html2pdf.apiUrl": "https://api.rendly.cloud"
}

Or use the Command Palette:

Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
Type "Preferences: Open Settings (UI)"
Search for "html2pdf"
Enter your API key

2. Preview HTML as PDF

Open any HTML file and:

Click the preview icon in the editor title bar
Right-click and select "HTML2PDF: Preview as PDF"
Use Command Palette: HTML2PDF: Preview to Side
Use keyboard shortcut: Configure your own in keyboard settings

3. Export to PDF

Right-click in the HTML editor and select "HTML2PDF: Export to PDF File"
Use Command Palette: HTML2PDF: Export to PDF File
Choose where to save your PDF

Configuration

Settings

Setting	Description	Default
`html2pdf.apiUrl`	HTML2PDF API base URL	`https://api.rendly.cloud`
`html2pdf.apiKey`	API key for authentication	(empty)
`html2pdf.pageSize`	Default page size	`A4`
`html2pdf.margins`	PDF margins	`{ top: "1cm", right: "1cm", bottom: "1cm", left: "1cm" }`
`html2pdf.printBackground`	Print background graphics	`true`
`html2pdf.landscape`	Use landscape orientation	`false`
`html2pdf.autoRefresh`	Auto-refresh preview on save	`true`
`html2pdf.refreshDelay`	Delay before refresh (ms)	`500`

Page Sizes

Supported page sizes:

A4 (default)
Letter
Legal
A3
A5
Tabloid

Example Configuration

{
  "html2pdf.apiKey": "your-api-key",
  "html2pdf.pageSize": "Letter",
  "html2pdf.margins": {
    "top": "0.5in",
    "right": "0.5in",
    "bottom": "0.5in",
    "left": "0.5in"
  },
  "html2pdf.printBackground": true,
  "html2pdf.landscape": false,
  "html2pdf.autoRefresh": true
}

Commands

All commands are available via the Command Palette (Ctrl+Shift+P or Cmd+Shift+P):

HTML2PDF: Preview as PDF - Open preview in current column
HTML2PDF: Preview to Side - Open preview in side column
HTML2PDF: Export to PDF File - Save as PDF file
HTML2PDF: Refresh Preview - Manually refresh the preview

Usage Examples

Basic HTML Document

<!DOCTYPE html>
<html>
<head>
    <title>My Document</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 40px;
        }
        h1 { color: [#333](https://github.com/nixbit-maker/Rendly/issues/333); }
    </style>
</head>
<body>
    <h1>Hello, PDF!</h1>
    <p>This is a simple HTML document.</p>
</body>
</html>

Invoice Template

<!DOCTYPE html>
<html>
<head>
    <style>
        .invoice {
            max-width: 800px;
            margin: 0 auto;
            font-family: Arial, sans-serif;
        }
        .header {
            border-bottom: 2px solid [#000](https://github.com/nixbit-maker/Rendly/issues/000);
            padding-bottom: 20px;
        }
        .items {
            margin-top: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            text-align: left;
            padding: 8px;
            border-bottom: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div class="invoice">
        <div class="header">
            <h1>Invoice [#001](https://github.com/nixbit-maker/Rendly/issues/001)</h1>
            <p>Date: 2025-01-15</p>
        </div>
        <div class="items">
            <table>
                <tr>
                    <th>Description</th>
                    <th>Amount</th>
                </tr>
                <tr>
                    <td>Web Development</td>
                    <td>$1,500.00</td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

Multi-Page Report

<!DOCTYPE html>
<html>
<head>
    <style>
        @page {
            size: A4;
            margin: 2cm;
        }
        h1 {
            page-break-before: always;
        }
        h1:first-of-type {
            page-break-before: auto;
        }
    </style>
</head>
<body>
    <h1>Chapter 1</h1>
    <p>Content for chapter 1...</p>

    <h1>Chapter 2</h1>
    <p>Content for chapter 2...</p>
</body>
</html>

Features in Detail

Live Preview

The extension provides real-time PDF preview as you edit your HTML:

Open an HTML file
Click the preview icon or use the command palette
Edit your HTML - the preview updates automatically on save
See metadata including page count, render time, and file size

Export Options

Export your HTML to PDF with full control:

Choose custom output location
Preserve all formatting and styles
Include background graphics and images
Support for multi-page documents

Auto-Refresh

Configure automatic preview refresh:

{
  "html2pdf.autoRefresh": true,
  "html2pdf.refreshDelay": 500
}

The preview will update 500ms after you save your HTML file.

Troubleshooting

"API key is not configured"

Get an API key from rendly.cloud
Open VS Code settings (Ctrl+, or Cmd+,)
Search for "html2pdf.apiKey"
Enter your API key

Preview not updating

Check that html2pdf.autoRefresh is enabled
Try manually refreshing with HTML2PDF: Refresh Preview
Verify your API key is correct

Connection errors

Check your internet connection
Verify the API URL is correct: https://api.rendly.cloud
Check the VS Code Output panel for error details

PDF rendering issues

Ensure your HTML is valid
Check that all external resources (CSS, images) are accessible
Some CSS features may not be fully supported in PDF output

API Key

To use this extension, you need an API key from rendly.cloud.

Free tier includes:

100 renders per month
All rendering features
Community support

Paid plans available for higher volumes and additional features.

Privacy & Security

Your HTML content is sent to the html2pdf API for rendering
API keys are stored securely in VS Code settings
Generated PDFs are not stored on our servers
See our Privacy Policy for details

Support

Documentation: rendly.cloud/docs
Issues: GitHub Issues
Email: support@rendly.cloud

Contributing

Contributions are welcome! Please see our Contributing Guide.

License

MIT License - see LICENSE for details.

Made with ❤️ by Rendly