How to Capture Dynamic JavaScript Pages (Without Parsing the DOM)

Static HTML scrapers break on JavaScript-heavy pages. React apps, Next.js SPAs, Angular dashboards — these pages need a real browser to execute JavaScript before there's any content to capture. The traditional fix is Puppeteer or Playwright: spin up a headless browser, wait for the right network events, then extract what you need.

Here's how to get the same results — screenshot, PDF, structured element map — without managing a browser.

Screenshot a JavaScript-rendered page

The capture API runs a full browser behind the scenes. JavaScript executes, dynamic content loads, lazy images render.

const res = await fetch('https://pagebolt.dev/api/v1/screenshot', {
  method: 'POST',
  headers: { 'x-api-key': process.env.PAGEBOLT_API_KEY, 'Content-Type': 'application/json' },
  body: JSON.stringify({
    url: 'https://yourapp.com/dashboard',
    fullPage: true,
    blockBanners: true,
    fullPageScroll: true   // triggers lazy-loaded images before capture
  })
});

const image = Buffer.from(await res.arrayBuffer());

fullPageScroll: true scrolls the page before capturing — useful for infinite scroll feeds and lazy-loaded image grids that only render content when scrolled into view.

Get a structured element map (no DOM parsing)

Instead of parsing raw HTML from a JavaScript-rendered page, request the element map directly:

const res = await fetch('https://pagebolt.dev/api/v1/inspect', {
  method: 'POST',
  headers: { 'x-api-key': process.env.PAGEBOLT_API_KEY, 'Content-Type': 'application/json' },
  body: JSON.stringify({ url: 'https://yourapp.com/dashboard' })
});

const { elements, headings, links, forms } = await res.json();

// elements: [{tag, role, text, selector, attributes, rect}, ...]
// Find a specific button by its text
const exportBtn = elements.find(e => e.tag === 'button' && e.text.includes('Export'));
console.log(exportBtn.selector); // e.g. "#export-csv-btn"

The browser renders the full JavaScript application, then returns a typed map of interactive elements — buttons, inputs, links — with verified CSS selectors. No HTML parsing, no selector guessing.

Multi-step interaction before capture

If you need to interact with the page before capturing — log in, navigate to a specific state, click through a wizard — use a sequence:

const res = await fetch('https://pagebolt.dev/api/v1/sequence', {
  method: 'POST',
  headers: { 'x-api-key': process.env.PAGEBOLT_API_KEY, 'Content-Type': 'application/json' },
  body: JSON.stringify({
    steps: [
      { action: 'navigate', url: 'https://yourapp.com/login' },
      { action: 'fill', selector: '#email', value: 'user@example.com' },
      { action: 'fill', selector: '#password', value: 'password' },
      { action: 'click', selector: '#login-submit' },
      { action: 'wait_for', selector: '.dashboard' },
      { action: 'screenshot' }
    ]
  })
});

The sequence navigates, interacts, waits for dynamic content to load, then captures. One API call handles the full interaction chain.

PDF from a JavaScript-rendered page

The same pattern works for PDF generation:

const res = await fetch('https://pagebolt.dev/api/v1/pdf', {
  method: 'POST',
  headers: { 'x-api-key': process.env.PAGEBOLT_API_KEY, 'Content-Type': 'application/json' },
  body: JSON.stringify({
    url: 'https://yourapp.com/reports/q4-2025',
    blockBanners: true
  })
});

const pdf = Buffer.from(await res.arrayBuffer());

The browser renders the full JavaScript application — charts, dynamic data, calculated totals — before generating the PDF.

When to use this vs. a scraping library

Need	Use
Capture a JS-rendered page as image/PDF	PageBolt (/screenshot, /pdf)
Understand what's on a page (interactive elements)	PageBolt (/inspect)
Multi-step interaction before capture	PageBolt (/sequence)
Extract large volumes of structured data	Dedicated scraping tool (Apify, Crawlee)
Parse static HTML without JavaScript	Cheerio, BeautifulSoup

PageBolt is the right tool when you need a captured output — not when you need to extract raw data at scale.