> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hyperbeam.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Examples

> Open source examples

## General

<CardGroup cols={2}>
  <Card title="Timeouts" icon="timer" color="#a888ff" href="https://github.com/hyperbeam/examples/tree/master/timeout">
    Bring down costs and add paywalls using timeouts.
  </Card>

  <Card title="Multi Cursor" icon="arrow-pointer" color="#a888ff" href="https://github.com/hyperbeam/examples/tree/master/multicursor">
    Handle multiple users controlling the browser simultaneously.
  </Card>

  <Card title="Persistence" icon="floppy-disk" color="#a888ff" href="https://github.com/hyperbeam/examples/tree/master/persistence">
    Save and access browser data across multiple sessions.
  </Card>

  <Card title="Field Masking" icon="eye-slash" color="#a888ff" href="https://github.com/hyperbeam/examples/tree/master/field-masking">
    Hide contents of input fields.
  </Card>

  <Card title="Resize" icon="up-right-and-down-left-from-center" color="#a888ff" href="https://github.com/hyperbeam/examples/tree/master/resize">
    Resize and reposition the browser window dynamically.
  </Card>

  <Card title="Zoom" icon="magnifying-glass" color="#a888ff" href="https://github.com/hyperbeam/examples/tree/master/zoom">
    Zoom in and out of all tabs or individual ones.
  </Card>

  <Card title="Troubleshooting" icon="wifi-exclamation" color="#a888ff" href="https://github.com/hyperbeam/examples/tree/master/troubleshooting">
    Learn how to detect and debug connection issues.
  </Card>
</CardGroup>

## Audio

<CardGroup cols={2}>
  <Card title="Audio Context" icon="square-sliders-vertical" color="#a888ff" href="https://github.com/hyperbeam/examples/tree/master/audio-context">
    Customize the browser's audio output with the AudioContext API.
  </Card>

  <Card title="Audio Visualization" icon="waveform-lines" color="#a888ff" href="https://github.com/hyperbeam/examples/tree/master/audio-visualization">
    Visualize audio frequency data with the WebAudio API.
  </Card>
</CardGroup>

## Authentication

<CardGroup>
  <Card title="Content Security Policy" icon="shield-check" color="#a888ff" href="https://github.com/hyperbeam/examples/tree/master/content-security-policy">
    Initialize a virtual computer with CSP enabled.
  </Card>

  <Card title="Webhook Authentication" icon="key" color="#a888ff" href="https://github.com/hyperbeam/examples/tree/master/webhook-auth">
    Control virtual computer access with webhook authentication.
  </Card>
</CardGroup>

## Chrome Extensions

<CardGroup cols={2}>
  <Card title="Upload Custom Chrome Extension" icon="cloud-arrow-up" color="#a888ff" href="https://github.com/hyperbeam/examples/tree/master/load-custom-chrome-extension">
    Upload and use a custom Chrome extension in the virtual browser.
  </Card>

  <Card title="Embed in Chrome Extension" icon="chrome" color="#a888ff" href="https://github.com/hyperbeam/examples/tree/master/embed-in-chrome-extension">
    Learn how to embed Hyperbeam in your Chrome Extension.
  </Card>
</CardGroup>

## 3D Libraries and Frameworks

Special thanks to [NSTCG](https://github.com/NSTCG) for the Wonderland Engine example.

<CardGroup cols={2}>
  <Card
    title="Three.js Example"
    icon={
  <img src="https://mintlify.s3-us-west-1.amazonaws.com/hyperbeam/assets/threejs-logo.svg" />
}
    color="#a888ff"
    href="https://github.com/hyperbeam/threejs-example"
  />

  <Card
    title="A-Frame Example"
    icon={
  <img src="https://mintlify.s3-us-west-1.amazonaws.com/hyperbeam/assets/aframe-logo.png" />
}
    color="#a888ff"
    href="https://github.com/hyperbeam/aframe-example"
  />

  <Card
    title="React Three Fiber Example"
    icon={
  <img src="https://mintlify.s3-us-west-1.amazonaws.com/hyperbeam/assets/react-logo.svg" />
}
    color="#a888ff"
    href="https://github.com/hyperbeam/react-three-fiber-example"
  />

  <Card
    title="Babylon.js Example"
    icon={
  <img src="https://mintlify.s3-us-west-1.amazonaws.com/hyperbeam/assets/babylonjs-logo.svg" />
}
    color="#a888ff"
    href="https://github.com/hyperbeam/babylonjs-example"
  />

  <Card
    title="Wonderland Engine Example"
    icon={
  <div>
    <img className="block dark:hidden" src="https://mintlify.s3-us-west-1.amazonaws.com/hyperbeam/assets/wonderland-logo.png" />
    <img className="hidden dark:block" src="https://mintlify.s3-us-west-1.amazonaws.com/hyperbeam/assets/wonderland-logo-dark.png" />
  </div>
}
    color="#a888ff"
    href="https://github.com/NSTCG/wle-hyperbeam"
  />
</CardGroup>