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

ParameterTypeDefault
sourceString"url"
urlString""
htmlString""
widthNumber1920
heightNumber1080
fpsNumber60
css_overrideString""
js_injectString""
dpiNumber1
transparentBooleantrue
reloadBooleanfalse
freeze_after_loadBooleanfalse
enabledBooleantrue
positionVec3(0, 0, 0)
rotationVec3(0, 0, 0)
scaleVec3(1, 1, 1)
anchorVec3(0, 0, 0)
opacityNumber1

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)