# Interface: HTMLSourceOptions

**`Experimental`** **`Advanced`**

Options for creating an [HTMLSource](rendering.HTMLSource.html.md). Configures how the source binds to its owning
canvas and when it repaints.

## Example

```ts
import { HTMLSource } from 'pixi.js/html-source';

// Minimal: a live element that auto-updates every time the browser repaints it.
const source = new HTMLSource({ resource: domElement });

// A continuously animated element you repaint yourself each frame.
const animatedSource = new HTMLSource({
    resource: domElement,
    autoRequestPaint: false, // call source.requestPaint() in your own ticker instead
});

// A static one-shot capture that never listens for repaints.
const staticSource = new HTMLSource({
    resource: domElement,
    autoUpdate: false,
});
```

## See

[HTMLSource](rendering.HTMLSource.html.md) For the texture source these options configure

## Extends

- [`TextureSourceOptions`](rendering.TextureSourceOptions.html.md)\<[`Element`](https://developer.mozilla.org/docs/Web/API/Element)\>

## Properties

### autoLayout?

> `optional` **autoLayout**: `boolean`

**`Experimental`**

Automatically set the `layoutsubtree` attribute on the owning canvas. The browser only
lays out and paints canvas children when this attribute is present.

#### Default

```ts
true
```

#### Example

```ts
// Opt out when you set `<canvas layoutsubtree>` yourself in markup.
const source = new HTMLSource({ resource: domElement, autoLayout: false });
```

***

### autoRequestPaint?

> `optional` **autoRequestPaint**: `boolean`

**`Experimental`**

Request an initial paint after construction. Set to `false` and call
[HTMLSource.requestPaint](rendering.HTMLSource.html#requestpaint) yourself each frame for continuous animations.

#### Default

```ts
true
```

#### Example

```ts
const source = new HTMLSource({ resource: domElement, autoRequestPaint: false });

app.ticker.add(() => {
    source.requestPaint(); // drive repaints on your own schedule
});
```

***

### autoUpdate?

> `optional` **autoUpdate**: `boolean`

**`Experimental`**

Listen for the owning canvas' `paint` event and update this source when the element is
repainted. Disable for a static, captured-once texture.

#### Default

```ts
true
```

#### Example

```ts
// Capture once, never track DOM changes — cheaper for static content.
const source = new HTMLSource({ resource: domElement, autoUpdate: false });
```

***

### canvas?

> `optional` **canvas**: [`HTMLSourceCanvas`](rendering.HTMLSourceCanvas.html.md)

**`Experimental`**

The canvas that owns this element's layout subtree. When omitted, this is inferred from
`resource.parentElement` when the resource is a direct canvas child.

#### Example

```ts
// Inferred automatically — domElement is appended to the Pixi canvas.
app.canvas.appendChild(domElement);
const source = new HTMLSource({ resource: domElement });

// Passed explicitly when inference is not possible.
const explicit = new HTMLSource({
    resource: domElement,
    canvas: app.canvas as HTMLSourceCanvas,
});
```