# Umay Render SDK
[](https://www.npmjs.com/package/umay-render)
[](LICENSE)
Free, high-performance HTML to PDF and HTML to Image conversion SDK for both browser and Node.js.
## Core Features
- ✅ **Universal:** Works in both browser and Node.js environments.
- ✅ **TypeScript:** Full type definitions for an enhanced development experience.
- ✅ **PDF & Image:** Convert HTML or URLs to PDF, PNG, JPEG, or WebP formats.
- ✅ **Flexible Input:** Accepts raw HTML content or a web page URL.
- ✅ **Simple & Powerful:** Easy to get started, yet offers deep customization options.
- ✅ **Lightweight:** Minimal dependencies keep the bundle size small.
- ✅ **Free & Open Source:** No hidden costs or usage limits.
## Installation
```bash
npm install umay-render
# or
yarn add umay-render
# or
pnpm add umay-render
```
## Quick Start (Simple Usage)
Get started quickly with the most basic scenarios. The SDK handles most settings by default.
```typescript
import { UmaySDK, RenderInput } from "umay-render";
// import fs from 'fs/promises'; // Uncomment for Node.js file saving
// Initialize the SDK
const client = new UmaySDK();
// --- Generate PDF from HTML ---
async function createPdfFromHtml() {
const htmlContent = "
Hello PDF!
";
const request: RenderInput = {
html: htmlContent,
outputFormat: "pdf", // Specify PDF output format
};
try {
const pdfBuffer: Uint8Array = await client.render(request);
console.log("PDF generated successfully (buffer)!");
// In Node.js: await fs.writeFile('simple.pdf', pdfBuffer);
// In Browser: (See browser examples below for Blob creation/download)
} catch (error) {
console.error("Error generating PDF:", error);
}
}
// --- Generate PNG Image from URL ---
async function createImageFromUrl() {
const websiteUrl = "https://example.com";
const request: RenderInput = {
url: websiteUrl,
outputFormat: "png", // Specify PNG output format
};
try {
const imageBuffer: Uint8Array = await client.render(request);
console.log("Image generated successfully (buffer)!");
// In Node.js: await fs.writeFile('simple.png', imageBuffer);
// In Browser: (See browser examples below for Blob creation/ tag)
} catch (error) {
console.error("Error generating image:", error);
}
}
// Call the functions
createPdfFromHtml();
createImageFromUrl();
```
## Advanced Usage (Customization)
When you need more control, use the optional fields within the `request` object passed to the `render` method:
- `pageSetupOptions`: Configures the browser environment (viewport, cookies, wait conditions, etc.) _before_ rendering starts.
- `pdfOptions`: Settings specific to PDF output (page format, margins, headers/footers, etc.).
- `screenshotOptions`: Settings specific to image output (quality, full page capture, clipping, etc.).
```typescript
import { UmaySDK, RenderInput, UmayError } from "umay-render";
import fs from "fs/promises"; // For Node.js example
import path from "path"; // For Node.js example
// Initialize SDK with custom settings (optional)
const client = new UmaySDK({
// API_URL: 'https://your-custom-api-url.com', // If hosting your own backend
TIMEOUT: 45000, // 45 second timeout instead of the default 30 seconds
});
// --- Advanced PDF Generation (From URL, with Cookies, Custom Settings) ---
async function createAdvancedPdf() {
const loginProtectedUrl = "https://portal.example.com/report/123";
const request: RenderInput = {
url: loginProtectedUrl,
outputFormat: "pdf",
filename: "monthly_report.pdf", // Suggested filename for download
pageSetupOptions: {
// Set cookies before page load (e.g., session info)
cookies: [
{
name: "sessionid",
value: "secretSessionValue",
url: loginProtectedUrl,
},
],
// Wait for a specific element to appear
waitForSelector: "#report-data-ready",
// Wait for network traffic to settle
waitUntil: "networkidle0",
// Set the viewport
viewport: { width: 1200, height: 900 },
},
pdfOptions: {
format: "A4",
landscape: false, // Portrait page
printBackground: true, // Print backgrounds
margin: {
// Custom margins
top: "2cm",
bottom: "1.5cm",
left: "1cm",
right: "1cm",
},
displayHeaderFooter: true, // Display header and footer
// Simple header/footer templates (HTML supported)
headerTemplate: `