Class: UIKitDocument

Defined in: packages/core/src/ui/document.ts:24

Lightweight DOM-like wrapper around a UIKit root Component that lives in the 3D scene.

Remarks

• Provides query helpers (getElementById, getElementsByClassName, querySelector(All)).
• Maintains reactive target dimensions via targetWidth/targetHeight and scales the group to fit while preserving aspect ratio.
• Intended to be attached to an entity's object3D in world space or to the camera for screen‑space UI. Use together with PanelUISystem and ScreenSpaceUISystem.

Extends

• Group

Constructors

Constructor

new UIKitDocument(rootComponent): UIKitDocument

Defined in: packages/core/src/ui/document.ts:39

Create a document backed by a UIKit root component.

Parameters

rootComponent

Component<any>

The root Component produced by @pmndrs/uikitml interpret().

Returns

UIKitDocument

Overrides

Group.constructor

Properties

targetHeight

readonly targetHeight: Signal<number>

Defined in: packages/core/src/ui/document.ts:33

Reactive target height in meters. Set via setTargetDimensions.

---

targetWidth

readonly targetWidth: Signal<number>

Defined in: packages/core/src/ui/document.ts:31

Reactive target width in meters. Set via setTargetDimensions.

Accessors

computedSize

Get Signature

get computedSize(): object

Defined in: packages/core/src/ui/document.ts:279

Current intrinsic size of the UIKit root component (in UIKit units, centimeters), if available from the underlying component's size signal.

Returns

object

height

height: number

width

width: number

---

rootElement

Get Signature

get rootElement(): Component<any>

Defined in: packages/core/src/ui/document.ts:299

The root UIKit component for this document.

Returns

Component<any>

---

targetSize

Get Signature

get targetSize(): object

Defined in: packages/core/src/ui/document.ts:291

Return the most recently requested target size in meters.

Returns

object

height

height: number

width

width: number

Methods

dispose()

dispose(): void

Defined in: packages/core/src/ui/document.ts:306

Dispose of internal resources and detach children. Safe to call multiple times.

Returns

void

---

getElementById()

getElementById(id): Component<any>

Defined in: packages/core/src/ui/document.ts:53

Return the first element with a matching id (UIKit property).

Parameters

id

string

The element identifier without the # prefix.

Returns

Component<any>

---

getElementsByClassName()

getElementsByClassName(className): Component<any>[]

Defined in: packages/core/src/ui/document.ts:61

Return all elements that include className in their class list.

Parameters

className

string

The class without the preceding dot.

Returns

Component<any>[]

---

isDescendantOf()

isDescendantOf(element, ancestor): boolean

Defined in: packages/core/src/ui/document.ts:183

Check if element is a descendant of ancestor.

Parameters

element

Component<any>

ancestor

Component<any>

Returns

boolean

true if ancestor appears in the parent chain of element.

---

querySelector()

querySelector(selector): Component<any>

Defined in: packages/core/src/ui/document.ts:74

Return the first element matching a simple CSS‑like selector.

Parameters

selector

string

Returns

Component<any>

Remarks

Supported selectors:

• #id
• .class
• Descendant combinations, e.g. #parent .child

---

querySelectorAll()

querySelectorAll(selector): Component<any>[]

Defined in: packages/core/src/ui/document.ts:82

Return all elements matching a simple CSS‑like selector. See querySelector.

Parameters

selector

string

Returns

Component<any>[]

---

querySelectorAllWithin()

querySelectorAllWithin(parentSelector, childSelector): Component<any>[]

Defined in: packages/core/src/ui/document.ts:195

Convenience for querySelectorAll("${parent} ${child}").

Parameters

parentSelector

string

childSelector

string

Returns

Component<any>[]

---

querySelectorWithin()

querySelectorWithin(parentSelector, childSelector): Component<any>

Defined in: packages/core/src/ui/document.ts:202

Convenience for the first match of querySelectorAllWithin.

Parameters

parentSelector

string

childSelector

string

Returns

Component<any>

---

setTargetDimensions()

setTargetDimensions(width, height): void

Defined in: packages/core/src/ui/document.ts:270

Set desired dimensions for the UI in meters. The document computes a uniform scale that fits these constraints while preserving aspect ratio.

Parameters

width

number

Target width in meters.

height

number

Target height in meters.

Returns

void

---

toString()

toString(): string

Defined in: packages/core/src/ui/document.ts:324

String summary useful for debugging.

Returns

string