JavaScript rendering lets your Knowledge Hub scrape pages that load content dynamically — single-page applications, lazy-loaded sections, or content revealed by user interactions. When enabled, the platform uses a headless browser to render the page before extracting its content.

📘

Where to find it

Open Build > Knowledge Hub, select a knowledge base, then click Add document. The JavaScript rendering section appears in the document configuration.

When to enable JavaScript rendering

By default, the platform extracts content directly from the page's HTML response. This works well for static sites and server-rendered pages.

Enable JavaScript rendering when:

• The page is a single-page application (React, Vue, Angular) where content is rendered client-side
• Content is lazy-loaded as the user scrolls
• Content is hidden behind user interactions (click to expand, "Show more" buttons)
• A specific element must be visible before content is meaningful (e.g. price loaded from an API)

⚠️

Performance impact

JavaScript rendering is slower than direct HTML extraction. Only enable it for documents that actually need it.

Configuration

Toggle Enable JS rendering to reveal the configuration options.

Rendering delay

Time the headless browser waits before extracting content, in milliseconds.

• Range: 0 to 25,000 ms
• Use for: pages that need a fixed delay to load content (e.g. analytics scripts, third-party widgets)

Wait for selector

A CSS or XPath selector that must be present in the DOM before extraction starts.

• Use for: pages that load content asynchronously and you can identify a specific element that signals readiness
• Example: .product-price to wait until the price element appears

Auto scroll

When enabled, the headless browser scrolls to the bottom of the page before extracting content.

• Use for: pages with lazy-loaded content that only renders as the user scrolls (image grids, infinite-scroll lists)

JavaScript scenario

Advanced — define a sequence of actions to execute before extraction. Provide a JSON array of actions:

Example — click a "Show more" button repeatedly until it disappears, then wait 5 seconds:

[
  {
    "execute": {
      "script": "const clickUntilGone = setInterval(() => { const btn = document.querySelector('button[data-cy=\"more\"]'); if (btn) { btn.click(); } else { clearInterval(clickUntilGone); } }, 500);",
      "timeout": 20000
    }
  },
  {
    "wait": 5000
  }
]

Refer to the Scrapfly documentation for the complete action reference.

Inspecting JS rendering settings on existing documents

Once a document has been added with JavaScript rendering enabled, you can review its configuration from the document details modal:

• Rendering delay value
• Wait for selector value
• Auto scroll state (Enabled / Disabled)
• JavaScript scenario content

📘

Read-only after creation

JavaScript rendering settings are captured at the time the document is scraped. To change them, you must re-add the document with the new configuration.