### Run Rendertron Locally

Source: https://github.com/render-examples/rendertron/blob/master/README.md

Starts the Rendertron server locally after building the project. Requires a local Chrome installation.

```bash
npm run start
```

--------------------------------

### Install Rendertron

Source: https://github.com/render-examples/rendertron/blob/master/README.md

Installs Rendertron globally using npm. This command is used to get the Rendertron CLI tool.

```bash
npm install -g rendertron
```

--------------------------------

### Rendertron Installation and Running

Source: https://github.com/render-examples/rendertron/blob/master/README.md

Provides instructions for installing Rendertron and running it locally, including building the project and deploying it.

```bash
# Install dependencies
npm install

# Build the project
npm run build

# Run locally
node ./dist/server.js

# Deploy to Render (example command, actual deployment may vary)
# git push origin master
# (Follow Render's deployment process)
```

--------------------------------

### Run Rendertron CLI

Source: https://github.com/render-examples/rendertron/blob/master/README.md

Starts the Rendertron service locally using the command-line interface. Assumes Chrome is installed on the machine.

```bash
rendertron
```

--------------------------------

### Rendertron Documentation

Source: https://github.com/render-examples/rendertron/blob/master/src/index.html

Official documentation for Rendertron, covering its features, installation, and usage for rendering web pages and taking screenshots.

```APIDOC
Rendertron:
  Description: A tool for rendering web pages and taking screenshots.
  Features:
    - Render web pages
    - Take screenshots
    - Serialize content
    - Mobile rendering
  Documentation:
    - [_insert_drive_file_ View documentation](https://github.com/GoogleChrome/rendertron)
```

--------------------------------

### Install Rendertron Middleware

Source: https://github.com/render-examples/rendertron/blob/master/middleware/README.md

Installs the necessary packages, express and rendertron-middleware, for integrating Rendertron into an Express application.

```sh
$ npm install --save express rendertron-middleware
```

--------------------------------

### Build Rendertron Project

Source: https://github.com/render-examples/rendertron/blob/master/README.md

Clones the Rendertron repository, navigates into the directory, and installs project dependencies, followed by building the project.

```bash
git clone https://github.com/GoogleChrome/rendertron.git
cd rendertron
npm install
npm run build
```

--------------------------------

### Basic Rendertron Rendering Example

Source: https://github.com/render-examples/rendertron/blob/master/test-resources/explicit-render-event.html

This JavaScript snippet demonstrates a basic Rendertron rendering scenario. It sets a flag `renderComplete` to false, then simulates asynchronous content loading by updating the body's text content after a 5-second delay and setting `renderComplete` to true. A second timeout is included to show content that should not be reached.

```javascript
window.renderComplete = false;
setTimeout(() => {
  document.body.textContent = 'async loaded';
  window.renderComplete = true;
}, 5000);
setTimeout(() => {
  document.body.textContent = 'should not be reached';
}, 11000);
```

--------------------------------

### Rendertron Configuration

Source: https://github.com/render-examples/rendertron/blob/master/README.md

Example of a `config.json` file for configuring Rendertron. It includes options for caching, timeouts, port, and rendering resolution.

```json
{
  "datastoreCache": true,
  "timeout": 20000,
  "port": 8080,
  "width": 1200,
  "height": 1200
}
```

--------------------------------

### Encoding Query Parameters Example

Source: https://github.com/render-examples/rendertron/blob/master/README.md

Demonstrates how to correctly encode query parameters when passing them in a URL to Rendertron, ensuring proper parsing of special characters.

```javascript
const myURLWithParams = "http://my.domain/?page=home";
const encodedURL = encodeURIComponent(myURLWithParams);
console.log(encodedURL); // Output: http%3A%2F%2Fmy.domain%2F%3Fpage%3Dhome

// Example usage with Rendertron:
// https://rendertron.onrender.com/render/http%3A%2F%2Fmy.domain%2F%3Fpage%3Dhome
```

--------------------------------

### Rendertron Styling

Source: https://github.com/render-examples/rendertron/blob/master/src/index.html

CSS styles for the Rendertron interface, including body layout, headings, search bar, progress bar, buttons, and responsive design adjustments.

```css
body {
  background: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
  margin: 0;
  min-height: calc(100vh - 40px);
  padding: 20px 0;
}
h1 {
  font-size: 60px;
  color: white;
  border-bottom: 1px solid #99f3ff;
  margin: 64px 32px;
}
#search-bar {
  min-width: 300px;
  width: calc(100% - 40px);
  max-width: 664px;
  position: relative;
  box-sizing: border-box;
}
input[type=url] {
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
  border: none;
  font-size: 24px;
  background: black;
  border-radius: 10px;
  border: 2px solid #99f3ff;
  color: white;
  font-family: 'Orbitron', sans-serif;
  text-align: center;
}
progress-bar {
  --progress-bar-color: #99f3ff;
  height: 10px;
  position: absolute;
  margin-top: -10px;
  border-radius: 0 0 10px 10px;
}
#options {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  max-width: 800px;
  justify-content: center;
}
#options>*
{
  margin: 32px;
}
#options button {
  display: block;
  width: 300px;
  height: 300px;
  border: 1px solid #99f3ff;
  color: white;
  background: none;
  display: flex;
  flex-direction: column;
  font-size: 18px;
  font-family: 'Orbitron', sans-serif;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.loading {
  box-shadow: #99f3ff 0px 0px 7px 4px;
  animation: pulse 1s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}
.error {
  border-color: #FF9999 !important;
}
@keyframes pulse {
  from {
    filter: blur(0px);
    transform: none;
  }
  to {
    filter: blur(1px);
    transform: scale(1.05);
  }
}
#options button i {
  font-size: 96px;
}
#options button span {
  margin-top: 24px;
  max-width: 200px;
  line-height: 24px;
}
a {
  text-decoration: none;
  color: inherit;
}
:focus,
#url:focus,
#options button:hover {
  transition: 100ms box-shadow cubic-bezier(0, 0, 0.2, 1);
  box-shadow: #99f3ff 0px 0px 7px 4px;
}
@media (max-width: 500px) {
  h1 {
    font-size: 40px;
  }
}
```

--------------------------------

### Rendertron URL Encoding

Source: https://github.com/render-examples/rendertron/blob/master/src/index.html

Encodes a full URL for use with Rendertron. It preserves the origin, pathname, search parameters, and hash.

```javascript
function encodeUrl(fullUrl) {
  var url = new URL(fullUrl);
  return url.origin + url.pathname + encodeURIComponent(url.search) + encodeURIComponent(url.hash);
}
```

--------------------------------

### Rendertron Error Handling

Source: https://github.com/render-examples/rendertron/blob/master/src/index.html

Handles the case where the URL input is empty by adding an 'error' class to the URL element.

```javascript
function onEmptyUrl() {
  url.classList.add('error');
}
```

--------------------------------

### Custom Element Definition

Source: https://github.com/render-examples/rendertron/blob/master/test-resources/shadow-dom-polyfill-all.html

Defines a custom HTML element 'my-element' that attaches a shadow DOM with specific content. This demonstrates basic Web Component creation.

```javascript
class MyElement extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = 'shadow-root' + '-text';
  }
}

customElements.define('my-element', MyElement);
```

--------------------------------

### Rendertron Screenshot Capture

Source: https://github.com/render-examples/rendertron/blob/master/src/index.html

Takes a screenshot of a web page using Rendertron. It ensures the URL has a protocol, adds a loading indicator, and navigates to the Rendertron screenshot service with specified dimensions.

```javascript
function takeScreenshot(element) {
  if (!url.value) {
    onEmptyUrl();
    return;
  }
  var httpRegex = /(http(s?))\:\/\//gi;
  if (!httpRegex.test(url.value)) {
    url.value = 'https://' + url.value;
  }
  element.classList.add('loading');
  document.querySelector('progress-bar').removeAttribute('hidden');
  window.location.href += `screenshot/${encodeUrl(url.value)}?width=${window.innerWidth}&height=${window.innerHeight}`;
}
```

--------------------------------

### Custom Element Definition

Source: https://github.com/render-examples/rendertron/blob/master/test-resources/shadow-dom-polyfill-loader.html

Defines a custom HTML element 'my-element' that attaches a shadow DOM with specific content. This demonstrates basic Web Component creation.

```javascript
class MyElement extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = 'shadow-root' + '-text';
  }
}

customElements.define('my-element', MyElement);
```

--------------------------------

### Custom Element Definition

Source: https://github.com/render-examples/rendertron/blob/master/test-resources/shadow-dom-no-polyfill.html

Defines a custom HTML element 'my-element' that attaches a shadow DOM with specific content. This demonstrates basic Web Component creation.

```javascript
class MyElement extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = 'shadow-root' + '-text';
  }
}

customElements.define('my-element', MyElement);
```

--------------------------------

### Custom HTML Element Definition

Source: https://github.com/render-examples/rendertron/blob/master/test-resources/custom-element.html

Defines a custom HTML element named 'custom-element' that renders a simple div with text. This demonstrates basic web component creation.

```javascript
class MyElement extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = '<div>element-' + 'text</div>';
  }
}

customElements.define('custom-element', MyElement);
```

--------------------------------

### Rendertron Page Rendering

Source: https://github.com/render-examples/rendertron/blob/master/src/index.html

Renders a web page using Rendertron. It handles URL validation, displays a loading indicator, and navigates to the Rendertron rendering service. Supports mobile rendering.

```javascript
function render(element, isMobile) {
  if (!url.value) {
    onEmptyUrl();
    return;
  }
  element.classList.add('loading');
  document.querySelector('progress-bar').removeAttribute('hidden');
  window.location.href += `render/${encodeUrl(url.value)}${isMobile ? '?mobile' : ''}`;
}
```

--------------------------------

### Inject Script on Load

Source: https://github.com/render-examples/rendertron/blob/master/test-resources/script-after-load.html

This JavaScript snippet demonstrates how to inject an external script ('inject-element.js') into the document's body when the window's load event fires. This is a common pattern for dynamically loading scripts or initializing functionality after the page has fully loaded.

```javascript
window.onload = function() {
  var script = document.createElement('script');
  script.src = 'inject-element.js';
  document.body.appendChild(script);
}
```

--------------------------------

### Set Document Title

Source: https://github.com/render-examples/rendertron/blob/master/test-resources/basic-script.html

This snippet demonstrates how to dynamically set the document's title using JavaScript. It creates a new title element, sets its text content, and appends it to the document's head.

```javascript
var element = document.createElement('title'); element.textContent = 'document' + '-title'; document.head.appendChild(element);
```

--------------------------------

### Rendertron Configuration Options

Source: https://github.com/render-examples/rendertron/blob/master/README.md

Details the available configuration options for Rendertron, which can be set via a `config.json` file or environment variables.

```APIDOC
Configuration Options:

  datastoreCache (boolean):
    Default: `false`
    Description: Enables caching on Google Cloud Datastore.

  timeout (number):
    Default: `10000` (milliseconds)
    Description: Sets the timeout duration for rendering a target page.

  port (number):
    Default: `3000`
    Description: Specifies the port for the Rendertron service to listen on. Overridden by `process.env.PORT` if set.

  width (number):
    Default: `1000` (pixels)
    Description: Sets the rendering width (resolution) for the page.

  height (number):
    Default: `1000` (pixels)
    Description: Sets the rendering height (resolution) for the page.
```

--------------------------------

### Basic Rendertron Middleware Usage

Source: https://github.com/render-examples/rendertron/blob/master/middleware/README.md

Demonstrates how to use the rendertron-middleware in an Express application. It configures the middleware to proxy requests through a Rendertron instance and serves static files.

```javascript
const express = require('express');
const rendertron = require('rendertron-middleware');

const app = express();

app.use(rendertron.makeMiddleware({
  proxyUrl: 'http://my-rendertron-instance/render',
}));

app.use(express.static('files'));
app.listen(8080);
```

--------------------------------

### Rendertron API Documentation

Source: https://github.com/render-examples/rendertron/blob/master/README.md

Documentation for Rendertron's API endpoints, including rendering and screenshot functionalities, with details on parameters and options.

```APIDOC
Render Endpoint:
  GET /render/<url>
  Renders a page and serializes it. Options can be specified as query parameters.
  Query Parameters:
    - mobile: (boolean, defaults to false) Enable to request the mobile version of the site.

Screenshot Endpoint:
  GET /screenshot/<url>
  POST /screenshot/<url>
  Verifies page rendering. Supports query parameters for viewport customization and additional options via POST body.
  Query Parameters:
    - width: (integer, defaults to 1000) Specifies viewport width.
    - height: (integer, defaults to 1000) Specifies viewport height.
    - mobile: (boolean, defaults to false) Enable to request the mobile version of the site.
  POST Body Options:
    - Additional options available as a JSON string, refer to Puppeteer documentation for details (e.g., type, encoding).
```

--------------------------------

### Rendertron Middleware Configuration Options

Source: https://github.com/render-examples/rendertron/blob/master/middleware/README.md

Details the configuration options available for the `makeMiddleware` function in rendertron-middleware. These options control how the middleware interacts with Rendertron and handles requests.

```APIDOC
makeMiddleware(options)

  Parameters:
    options: Object
      proxyUrl: string (Required) - Base URL of your running Rendertron proxy service.
      userAgentPattern: RegExp (Optional) - RegExp for matching requests by User-Agent header. Defaults to a set of known bots.
      excludeUrlPattern: RegExp (Optional) - RegExp for excluding requests by the path component of the URL. Defaults to a set of known static file extensions.
      injectShadyDom: boolean (Optional) - Force the web components polyfills to be loaded. Defaults to `false`.
      timeout: number (Optional) - Millisecond timeout for the proxy request to Rendertron. If exceeded, the standard response is served. Defaults to `11000`.

  Description:
    Creates the Express middleware for Rendertron. It checks the User-Agent header of incoming requests and proxies matching requests through Rendertron.
```

--------------------------------

### Web Components v1 Shady DOM Injection

Source: https://github.com/render-examples/rendertron/blob/master/README.md

A query parameter to inject Shady DOM for Web Components v1 when using `webcomponents-lite.js` or `webcomponents-loader.js`. This ensures proper rendering.

```APIDOC
Request URL:
  /render/<your-url>?wc-inject-shadydom=true

Description:
  Forces the necessary polyfills to be loaded and enabled for Web Components v1 when using specific loader scripts, ensuring compatibility with Shady DOM.

Parameters:
  wc-inject-shadydom (boolean): Set to `true` to enable Shady DOM injection for Web Components v1.
```

--------------------------------

### Web Components Shady DOM Override

Source: https://github.com/render-examples/rendertron/blob/master/README.md

A query parameter to force the use of Shady DOM for web components, particularly useful when Shadow DOM is difficult to serialize or for older web component versions.

```APIDOC
Request URL:
  /render/<your-url>?dom=shady

Description:
  Overrides the default rendering behavior to use Shady DOM, which is required for certain web component configurations or older versions (like Polymer 1.x).

Parameters:
  dom (string): Set to `shady` to enforce Shady DOM rendering.
```

--------------------------------

### Set Custom Status Code

Source: https://github.com/render-examples/rendertron/blob/master/README.md

An HTML meta tag used to specify the HTTP status code that the rendering service should return. This is useful for indicating errors like 404.

```html
<meta name="render:status_code" content="404" />
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.