HTMLInCanvas

Render live HTML/DOM content as a WebGPU texture layer via the html-in-canvas API. Requires Chrome Canary with chrome://flags/#canvas-draw-element enabled.

Usage

<Shader>
  <HTMLInCanvas>
    <div style="width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; font-family: system-ui, sans-serif; color: white;">
      <h1>Your HTML content here</h1>
    </div>
  </HTMLInCanvas>
</Shader>

<Shader>
  <HTMLInCanvas>
    <div style={{ width: '100vw', height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'system-ui, sans-serif', color: 'white' }}>
      <h1>Your HTML content here</h1>
    </div>
  </HTMLInCanvas>
</Shader>

<Shader>
  <HTMLInCanvas>
    <div style="width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; font-family: system-ui, sans-serif; color: white;">
      <h1>Your HTML content here</h1>
    </div>
  </HTMLInCanvas>
</Shader>

<Shader>
  <HTMLInCanvas>
    <div style={{ width: '100vw', height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'system-ui, sans-serif', color: 'white' }}>
      <h1>Your HTML content here</h1>
    </div>
  </HTMLInCanvas>
</Shader>

// HTMLInCanvas requires DOM children and is not supported via the JS API.
// Use the Vue, React, Svelte, or Solid packages instead.