Appearance
Common body params
All render methods share three body properties: doppio, launch, and page. Let's look at each of them:
☝️ Keep in mind that most parameters are optional.
About params
The parameters we expose are modeled after the Puppeteer API.
doppio
js
{
"doppio": {
"presignedUrl": "string",
"contentDisposition": "inline"
}
}The presignedUrl property defines the URL we use to upload your document to your S3 bucket. For more information, see Upload to your S3 bucket. If it is not set, the document is stored temporarily in our own S3 bucket.
The contentDisposition property determines how the uploaded file is presented to the user. It can be set to inline to display the document in the browser, or attachment to prompt the user to download it. If this property is not specified, the upload proceeds without setting this header and falls back to your bucket's default behavior.
When you use a custom presigned URL, make sure your bucket supports setting this header.
☝️ This property can also be used without a presigned URL.
Property details
| Property name | Type | Description |
|---|---|---|
presignedUrl | string | S3 upload URL Optional |
contentDisposition | string | "inline" or "attachment" Optional |
launch
js
{
"launch": {
"defaultViewport": {
"width": 0,
"height": 0,
"deviceScaleFactor": 0,
"isMobile": true,
"hasTouch": true,
"isLandscape": true
}
}
}The launch object exposes properties from Puppeteer's BrowserConnectOptions.
Property details
| Property name | Type | Description |
|---|---|---|
defaultViewport | Viewport | Sets the viewport for each page. Optional |
defaultViewport properties:
| Property name | Type | Default value | Description |
|---|---|---|---|
width | number | 1920 | The page width in pixels. Optional |
height | number | 1080 | The page height in pixels. Optional |
deviceScaleFactor | number | 1 | Specifies the device scale factor. Set a value between 1 and 2. See devicePixelRatio for more information. Optional |
isMobile | boolean | false | Whether the meta viewport tag is taken into account. Optional |
hasTouch | boolean | false | Specifies whether the viewport supports touch events. Optional |
isLandscape | boolean | false | Specifies whether the viewport is in landscape mode. Optional |
page
Most of the properties are optional 😌
js
{
"page": {
"goto": {
"url": "https://doc.doppio.sh",
"options": {
"waitUntil": ["load"],
"referer": "https://doc.doppio.sh"
}
},
"setContent": {
"html": "PHA+ZG9wcGlvLnNoPC9wPg==",
"options": {
"waitUntil": ["networkidle0"]
}
},
"setJavaScriptEnabled": true,
"emulateMediaType": "print",
"setExtraHTTPHeaders": {},
"emulateTimezone": "America/New_York",
"authenticate": {
"username": "thisisausername",
"password": "thisisapassword"
},
"setCookies": [],
"setUserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 13_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5 Safari/605.1.15",
"setLocalStorageItems": [],
"waitForFunction": {
"pageFunction": "!document.querySelector('.loading')",
"options": { "timeout": 10000 }
},
"waitForSelector": {
"selector": "#invoice-ready",
"options": { "timeout": 10000, "visible": true }
},
"pdf": { ... },
"screenshot": { ... },
}
}The page property defines what you want to render, how Doppio should access it, and which render options should be applied. Some properties vary depending on whether you want to render a PDF or a screenshot.
| Property name | Type | Description |
|---|---|---|
goto | Goto | Use this when your document is available at a public or reachable URL. |
setContent | SetContent | Use this when you want to send the document HTML directly as base64-encoded content. |
setJavaScriptEnabled | boolean | Whether to enable JavaScript on the source page. Enabled by default. optional |
setUserAgent | string | Sets a custom User-Agent header. optional |
emulateMediaType | string | Changes the CSS media type of the page. The only allowed values are screen, print and null. Passing null disables CSS media emulation. optional |
emulateTimezone | string | Changes the page timezone by providing a timezone ID (America/New_York, Europe/Paris, Asia/Tokyo, ...). optional |
setExtraHTTPHeaders | Record<string, string> | An object containing additional HTTP headers to be sent with every request. All header values must be strings. optional |
authenticate | Credentials | Provides credentials for HTTP authentication. optional |
setCookies | array of Network.CookieParam | List of cookies. The format follows Protocol.Network.CookieParam without experimental features. optional |
setLocalStorageItems | array of { key: string, value: string } | Doppio-specific local storage entries to set before rendering. optional |
waitForFunction | waitForFunctionParameters | Waits until a JavaScript expression evaluated in the page's context returns a truthy value. optional |
waitForSelector | waitForSelectorParameters | Waits for a CSS selector to match in the DOM, with optional visibility or hidden checks via options. optional |
pdf | PDFOptions | Options to configure PDF generation. Only available for PDF render. optional |
screenshot | ScreenshotOptions | Options to configure screenshot generation. Only available for screenshot render. optional |
⚠️ WARNING
goto and setContent cannot be used at the same time. They are mutually exclusive, and at least one of them must be set.
💡 TIP
All HTTP header names are lowercased (HTTP headers are case-insensitive, so this shouldn’t impact your server code).
ℹ INFO
page.setExtraHTTPHeaders does not guarantee the order of headers in the outgoing requests.
-> LINKS
- For PDF configuration, see PDF params.
- For screenshot configuration, see screenshot params.
goto properties
| Property name | Type | Description |
|---|---|---|
url | string | URL to navigate to. The URL should include the scheme, for example https://. |
options | GotoOptions | Navigation parameters. optional |
setContent properties
| Property name | Type | Description |
|---|---|---|
html | string | Your page HTML, encoded as base64 |
options | SetContentOptions | Content loading parameters. optional |
GotoOptions properties
Exposes some of Puppeteer's page.goto options.
| Property name | Type | Description |
|---|---|---|
waitUntil | array of strings | Waits for Puppeteer lifecycle events. Possible values are load, domcontentloaded, networkidle0, and networkidle2. optional |
referer | string | The referrer value. This overrides the value set in setExtraHTTPHeaders. optional |
SetContentOptions properties
Exposes some of Puppeteer's page.setContent options.
| Property name | Type | Description |
|---|---|---|
waitUntil | array of strings | Waits for Puppeteer lifecycle events. Possible values are load, domcontentloaded, networkidle0, and networkidle2. optional |
authenticate properties
Credentials to pass to Puppeteer's page.authenticate method.
| Property name | Type | Description |
|---|---|---|
username | string | Username credential. |
password | string | Password credential. |
Execution order
Both waitForFunction and waitForSelector are available for PDF and screenshot renders. They run after goto or setContent and before the PDF or screenshot is captured. If both are set, Doppio runs waitForFunction first, then waitForSelector. Doppio does not scroll the page before waiting.
waitForFunction properties
Exposes some properties of Puppeteer's page.waitForFunction method waitForFunction.
| Property name | Type | Description |
|---|---|---|
pageFunction | string | JavaScript expression to evaluate in the page, up to 256 characters. It must return a truthy value when the condition is met (for example "document.readyState === 'complete'"). |
options | FrameWaitForFunctionOptions | Optional timeout (ms, max 15000), polling ('raf', 'mutation', or interval as a string in ms, e.g. "500"). See FrameWaitForFunctionOptions. |
Expression, not function declaration
Because pageFunction is sent as a JSON string, write a JavaScript expression directly — not a function declaration like "function() { ... }". For a single condition, a plain expression is enough. For multiple statements, wrap your logic in an IIFE and self-invoke it: (() => { ... return ...; })(). See the multi-condition example below.
Timeout
waitForFunction can fail with a timeout if the condition is never satisfied. Set a realistic timeout in options and ensure your page can reach the condition (e.g. loading finishes, data is rendered). If options.timeout is omitted, Puppeteer's default applies (~30000 ms). When you set timeout explicitly, the API accepts values from 0 to 15000 ms.
Common use cases:
- Wait until loading is done:
"pageFunction": "!document.querySelector('.loading')"— capture only after the loading indicator is removed. - Wait for app-ready flag (SPA):
"pageFunction": "window.__APP_READY__ === true"— if your app sets a global when it has finished rendering. - Wait for a minimum number of items:
"pageFunction": "document.querySelectorAll('.list-item').length >= 10"— e.g. for a list or table that loads asynchronously. - Wait for multiple conditions (IIFE): when you need variables or several checks, wrap your logic in an arrow function and invoke it immediately with
(). Puppeteer re-evaluates the expression until it returns a truthy value.
json
"waitForFunction": {
"pageFunction": "(() => { const table = document.querySelector('#invoice tbody'); const loading = document.querySelector('.loading'); return table && table.rows.length >= 5 && !loading; })()",
"options": { "timeout": 10000 }
}This waits until the .loading spinner is gone, the #invoice tbody element exists, and at least 5 rows are present.
waitForSelector properties
Exposes some properties of Puppeteer's page.waitForSelector method waitForSelector.
| Property name | Type | Description |
|---|---|---|
selector | string | CSS selector for the element to wait for, up to 64 characters (for example "#invoice-ready", ".report-ready", or "[data-rendered]"). |
options | WaitForSelectorOptions | Optional timeout (ms, max 15000), visible (wait until element is visible), hidden (wait until element is hidden or not present). See WaitForSelectorOptions. |
Prefer a ready marker
Use a selector that only appears when your content is ready to render. Generic selectors such as "body", "canvas", or "iframe" can appear before your data, chart, or embedded content has finished loading.
Timeout
waitForSelector can fail with a timeout if the selector never appears (or never becomes visible/hidden). Use a timeout that fits your page load time. If options.timeout is omitted, Puppeteer's default applies (~30000 ms). When you set timeout explicitly, the API accepts values from 0 to 15000 ms.
Common use cases:
- Wait for content before PDF/screenshot:
"selector": "#invoice-ready"or"selector": ".report-ready"— ensure the page exposes a ready element before capture. - Wait for async dashboards:
"selector": "[data-chart-ready]"or"selector": ".dashboard-loaded"— prefer a marker set after the chart has been drawn, not just the<canvas>element. - Wait for loading to disappear:
"selector": ".spinner","options": { "hidden": true, "timeout": 10000 }— capture after the spinner is hidden or removed. For critical content, prefer a positive ready selector when possible.