The Web Page (Ultralight, cross-platform) input allows you to fetch and render content from external web pages using the Ultralight rendering engine. Ultralight is a lightweight, GPU-accelerated HTML renderer that provides efficient web content rendering for your compositions.
.png)
This input is ideal for displaying HTML5 graphics, web-based dashboards, real-time data feeds, and interactive content within your video production workflow. The browser renders off-screen and captures frames that can be composited with other video sources.
💡A Lightweight Alternative
The Ultralight-based renderer is a more lightweight alternative to the Chromium-based Web Page inputs. It uses fewer system resources while maintaining compatibility with modern web standards. Choose Ultralight when you need good performance with a lower memory footprint, or when the full Chromium engine is not required for your web content.
ℹ️Available web page renderers in Composer
Composer offers three different web page rendering engines:
| Feature | Chromium (cross-platform) | Chromium (Windows) | Ultralight |
|---|---|---|---|
| Platform | Windows + Linux | Windows only | Windows + Linux |
| Browser Engine | Full Chromium | Full Chromium | Lightweight renderer |
| Audio Capture | ❌ | ✅ 48kHz stereo | ❌ |
| Scrollbar Control | ❌ | ✅ X/Y position | ❌ |
| Live URL Changes | ❌ | ✅ | ❌ |
| Chromium Switches | ✅ | ❌ | ❌ |
| Web Compatibility | All modern web | All modern web | Basic HTML/CSS/JS |
Choose Chromium (cross-platform) if: You need Linux support or Chromium configuration switches
Choose Chromium (Windows) if: You need audio capture or scrollbar control
Choose Ultralight if: You need low memory usage or simple web content
Quick Start Guide
- Add the input to your composition
- Enter a URL in the Url field (e.g.,
https://example.com) - Set resolution (optional): Adjust Renderer width and height if needed (default: 1024x480)
- Click "Start page rendering" to begin capturing the web page
- Wait for loading: Monitor the Ultralight renderer load state until it shows "Loaded"
- Add to scene: Add the input to a layer in your scene to display it
Linux Requirement:
On Linux systems, this input requires Ubuntu 22+ and the libgtk-3-dev package to be installed. Without these dependencies, the Ultralight renderer will fail to initialize and the input will not function.
Install the required package with:
sudo apt-get install libgtk-3-dev
Tip: Enable "Start rendering when loaded" (enabled by default) to automatically start the browser when you load your composition.
Basic Settings
| Setting | Description |
|---|---|
| Show advanced options | Toggle to show or hide advanced configuration options. Options: No / Yes. Default: No. |
| Url | Enter the web page URL to render. Must be HTTP or HTTPS. Default: Empty. |
| Ultralight renderer load state | Read-only status display showing the current state of the renderer. Options: Idle, Paused, Load Requested, Loading, Loaded, Error, Disposing, Disposed. Default: Idle. |
Important: The Url field is locked while the renderer is loading or has loaded a page. You must stop the rendering before changing the URL.
URL Examples:
https://example.comhttp://localhost:3000/dashboardhttps://your-domain.com/custom-page.html
Commands
| Command | Description |
|---|---|
| Start page rendering | Initiates the rendering of the web page specified in the URL field. When clicked, the Ultralight engine starts, navigates to the specified URL, and begins capturing frames. Enabled when the renderer is idle, paused, or in error state and a valid URL is provided. |
| Stop page rendering | Stops the current rendering session and returns the renderer to idle state. This releases renderer resources and allows you to change settings like URL, width, and height. Enabled when the renderer has successfully loaded a page. |
Dimensions
| Setting | Default | Description |
|---|---|---|
| Renderer width | 1024 | The width of the browser rendering viewport in pixels. This determines the resolution at which the web page is rendered. This property is locked while the renderer is loading or loaded. You must stop rendering to change this value. Range: 32 - 4096 pixels. |
| Renderer height | 480 | The height of the browser rendering viewport in pixels. This determines the resolution at which the web page is rendered. This property is locked while the renderer is loading or loaded. You must stop rendering to change this value. Range: 32 - 4096 pixels. |
Performance impact: Higher resolutions provide better quality but require more processing power and memory.
Resolution tips:
- Match your output resolution when possible for optimal quality
- Use lower resolutions for better performance on complex web pages
- Common presets: 1920x1080 (Full HD), 1280x720 (HD), 1024x768 (4:3)
- The web page will scale to fit the specified dimensions
Configuration
| Setting | Default | Description |
|---|---|---|
| Start rendering when loaded | Enabled | When enabled, the input automatically starts rendering when the composition is loaded or when the input is added to a project. This is useful for automated workflows where you want the web page to start immediately without manual intervention. |
Performance and properties
| Setting | Default | Description |
|---|---|---|
| Page render time | 0.00 ms | Read-only display showing the average time taken to render each frame of the web page. Format: X.XX ms. Useful for monitoring the performance impact of your web content. |
Icon (Advanced)
Note: The following settings are only visible when Show advanced options is enabled.
| Setting | Default | Description |
|---|---|---|
| Icon text | WEB | Custom text displayed on the input's icon in the inputs list and other UI elements. |
Audio mixer (Advanced)
Note: The following settings are only visible when Show advanced options is enabled.
| Setting | Default | Description |
|---|---|---|
| Hide in audio mixer | Disabled | When enabled, this input is hidden and removed from the Audio Mixer view in the Composer GUI without disabling its audio. |
Render Options (Advanced)
Note: The following settings are only visible when Show advanced options is enabled.
| Setting | Default | Description |
|---|---|---|
| Invisible (Do not render in scene) | Disabled | When enabled, this input will not be rendered in any layer, in any scene. The input continues to process in the background but produces no visible output. |
| Do not render input | Let Composer decide | Controls how the rendering behavior is managed. Let Composer decide: Composer automatically decides whether the input should be rendered based on the active scene and if Render Tuning is enabled. This is the recommended setting for most users as it optimizes performance automatically. Manual Configuration: Allows you to manually control rendering behavior using the "Render / Do not render" toggle below. Choose this when you need precise control over when the input processes frames. |
| Render / Do not render | Render | When set to "Do not render", this disables the internal render method of the input. The renderer will not capture new frames, which can significantly reduce CPU/GPU load. Only visible when "Manual Configuration" is selected. |
Important difference from "Invisible":
- "Do not render input" = stops frame capture entirely (better performance)
- "Invisible" = continues capturing frames but doesn't display them (uses more resources)
Use case: Enable "Do not render" when an input is temporarily not needed to save system resources.
Optional TAGS (Advanced)
Note: The following settings are only visible when Show advanced options is enabled.
| Setting | Default | Description |
|---|---|---|
| TAGS | Empty | Tag the input with keywords. Tags can be used with Smart Search to search and filter your inputs. Useful for organizing and classifying your content. |
Performance Considerations
The Web Page (Ultralight) input is designed for efficient real-time performance with lower resource usage compared to full browser engines. However, performance can still be affected by several factors:
- Resolution: Higher resolutions (especially 4K) require proportionally more processing power and memory
- Web page complexity: Heavy JavaScript, CSS animations, WebGL content, and continuous updates consume significant CPU/GPU resources
- Ultralight rendering: Complex DOM structures, large images, and multiple CSS effects impact renderer performance
- Frame rate: The renderer operates at your project's frame rate
- Multiple instances: Each Web Page input requires memory; multiple inputs multiply resource requirements
- Memory management: The renderer automatically purges memory every 300 frames by default to maintain efficient operation
Recommendations for optimal performance:
- Match the renderer resolution to your output resolution to avoid unnecessary scaling
- Use lower resolutions (e.g., 1280x720 instead of 1920x1080) for complex web pages
- Optimize your web content: minimize JavaScript, optimize images, reduce animations
- Use "Do not render input" when the input isn't visible to save CPU/GPU resources
- Stop unused Web Page inputs rather than leaving them running in the background
- Limit the number of simultaneous Web Page inputs based on your system capabilities
- For 4K content, ensure your system has adequate GPU memory and processing power
- Consider using static images or pre-rendered video if real-time web rendering isn't required
Note: Ultralight is generally more memory-efficient than Chromium-based browsers while maintaining good compatibility with modern web standards.
Technical Details
Rendering Engine
- Engine: Ultralight HTML renderer
- Rendering mode: Off-screen rendering (OSR) for optimal performance
- Hardware acceleration: Disabled by default (always false)
- Transparency: Supported with transparent backgrounds (always enabled)
- JavaScript: Enabled by default (always true)
Supported Protocols
- HTTP
- HTTPS
Platform Support
- Windows: Fully supported
- Linux: Supported with requirements
- Requires Ubuntu 22 or higher
- Requires libgtk-3-dev package
- Platform font loader and file system are automatically enabled
- Cross-platform: Same codebase works on both platforms
Performance Characteristics
- Resolution: Configurable viewport from 32x32 to 4096x4096 pixels
- Frame rate: Synchronized with your project's frame rate
- Video queue: Maintains an internal queue to smooth frame delivery
- Memory management: Automatic memory purging every 300 frames to maintain efficiency
- Processing: Uses 4 render target buffers for efficient frame rotation
Renderer Lifecycle
- Static engine: All Ultralight instances share a common update thread for efficiency
- Per-instance resources: Each input has its own renderer, view, and render targets
- Automatic initialization: Renderer is initialized on demand when starting
- Clean disposal: Resources are properly cleaned up when stopping or removing the input
Logging
- JavaScript console messages from the web page are automatically captured (when enabled in debug settings)
- Console errors, warnings, and info messages appear in the application log
- Useful for debugging web page issues
Best Practices
Performance and Configuration
- Match your output resolution: Set Renderer width/height to match your final output resolution to avoid unnecessary scaling
- Optimize web content: Keep HTML/CSS/JavaScript as simple as possible; complex animations and effects impact performance
- Stop when not needed: Use "Stop page rendering" when the input isn't actively being used to free up resources
- Enable autostart for workflows: "Start rendering when loaded" is useful for automated production workflows
Web Page Development
- Set explicit dimensions: Design your HTML with fixed dimensions that match your renderer size for predictable layouts
- Transparent backgrounds work by default: The renderer always uses transparent rendering, so design accordingly
- Test thoroughly: Test your web pages in a regular browser first to ensure compatibility
- Avoid user interactions: The renderer is non-interactive; design for automated display rather than user clicks
- Self-contained pages: Keep all resources (CSS, JS, images) either inline or on the same server to avoid loading issues
Security
- Trust your sources: Only load content from trusted URLs
- Test URLs thoroughly: Always test your web pages in a regular browser first to ensure they work correctly
- Consider HTTPS: Use HTTPS URLs when possible for better security
Limitations and Known Issues
Input and Renderer Limitations
- Video only: This input captures video frames only. Web page audio is not captured through this input.
- No user interaction: The renderer is non-interactive. Mouse clicks, keyboard input, and other user interactions are not supported.
- No scrolling control: Automatic scrolling or scroll position control is not available through the UI.
- Static viewport: The viewport size must be set before starting and cannot be changed while running.
- No reload command: Unlike the Chromium-based input, there is no reload button. To refresh the page, you must stop and start the rendering again.
- Limited configuration: Hardware acceleration, transparency, and JavaScript settings are fixed and cannot be changed.
- Some websites may not render correctly: Ultralight may not support all modern web features or complex JavaScript frameworks that require a full browser engine.
Platform and Performance
- Linux requirements: Linux systems require Ubuntu 22+ and libgtk-3-dev package. Without these, the renderer will fail to initialize.
- No hardware acceleration: GPU acceleration is disabled in Ultralight, relying on software rendering.
- High resolution impact: Very high resolutions (e.g., 4K) may impact system performance.
- Memory usage: Each renderer instance requires memory; multiple Web Page inputs in one composition will multiply memory requirements.
- Compatibility: Some complex web applications designed for modern browsers may not render correctly in Ultralight.
Feature Comparison with Chromium Version
- No Chromium switches: Configuration options available in the Chromium version are not available
- No reload command: Must stop and start to reload the page
- No save to disk: Cannot save rendered frames for debugging
- No automatic error recovery: No auto-reload on error feature
- No RGB un-multiply option: Alpha handling is fixed
- Fewer debugging options: Limited console logging and debugging capabilities
When to Use Ultralight vs Chromium
Choose Web Page (Ultralight, cross-platform) when:
- You need lower memory and CPU usage
- Your web content uses standard HTML/CSS/JavaScript
- You're rendering simpler web pages or graphics
- System resources are limited
- You need many web page inputs in one project
Choose Web Page (Chromium, cross-platform) when:
- You need full modern browser compatibility
- Your web content uses complex JavaScript frameworks (React, Angular, Vue)
- You need WebGL, Canvas, or advanced CSS features
- You require debugging tools and console access
- You need advanced configuration via Chromium switches
- You need the reload command for quick page refreshes
- Maximum web standards compatibility is required