Browser Source

Load a web page and render it as a live image.

What it does

Browser Source renders a web page into a live texture, usable anywhere an image is accepted. Point it at a URL, or switch Source to HTML and paste markup directly. Either way the page renders on its own internal canvas at the Width and Height set on the node. Transparent keeps the page background see-through so overlays and HTML/CSS graphics composite over whatever is underneath; turn it off if the page expects an opaque backdrop.

Title and Loaded report the document title and whether the page has finished loading, for gating downstream nodes on page-ready state.

When to use it

ParameterTypeDefaultWhat it does
sourceString"url"Source mode: load a URL or render inline HTML. One of: url, html.
urlString""Web page URL to render
htmlString""Inline HTML to render
widthNumber1920Browser viewport width
heightNumber1080Browser viewport height
fpsNumber60CEF rendering frame rate
css_overrideString""CSS to inject after page loads
js_injectString""JavaScript to execute after page loads
dpiNumber1DPI scaling factor — higher values render at higher resolution
transparentBooleantrueRender with transparent background
reloadBooleanfalseReload the browser page
freeze_after_loadBooleanfalseStop updating the texture after the page finishes loading
enabledBooleantrueEnable/disable browser rendering
positionVec3(0, 0, 0)Translation (X, Y, Z)
rotationVec3(0, 0, 0)Rotation in degrees (X, Y, Z)
scaleVec3(1, 1, 1)Scale (X, Y, Z)
anchorVec3(0, 0, 0)Pivot offset (X, Y, Z) — rotation/scale orbit this point
opacityNumber1Layer opacity (0 = transparent, 1 = opaque). Editable, wirable, keyframable.

Gotchas

DPI scales the render resolution up from Width × Height without changing the page's own layout units. Raise it for crisper text and fine detail, at the cost of a larger texture and a heavier render.

Worked example

  1. Add a Browser Source. Leave Source on "url" and type the address of the page you want to bring in.

  2. Set Width and Height to the resolution you want the page rendered at.

  3. Enable Transparent if the page has its own graphics to composite over other layers, or disable it if the page fills the frame.

  4. Use CSS Override or JS Inject to tweak the page after it loads: hide a banner, force a font size, kick off an animation.

  5. Wire Loaded into a downstream gate to wait for the page to be ready before doing anything with it.

See also

Web Fetch · Video · Screen Capture · Rasters (images)