TimeToFirstDraw

TimeToFirstDrawRenderable captures and displays a performance.now() reading the first time it draws. Use it only as a rendering diagnostic.

Despite its name and default label, the displayed value is the first-draw timestamp from the runtime’s performance time origin. The implementation does not subtract renderer creation time or application start time, so it is not an elapsed startup duration.

Availability#

Core API#

import { TimeToFirstDrawRenderable } from "@opentui/core"

const firstDraw = new TimeToFirstDrawRenderable(renderer, {
  label: "First draw timestamp",
  precision: 1,
  fg: "#94a3b8",
})

renderer.root.add(firstDraw)

The renderable draws in its renderSelf() paint hook. On the first call, it stores performance.now() in runtimeMs. Later draws show that same value. reset() clears it and requests another render. The next draw captures a new timestamp.

console.log(firstDraw.runtimeMs) // null before the first draw

firstDraw.reset()

React#

import { TimeToFirstDraw } from "@opentui/react"

function App() {
  return <TimeToFirstDraw label="First draw timestamp" precision={1} fg="#94a3b8" />
}

The React binding exports TimeToFirstDraw and TimeToFirstDrawProps. It also registers the time-to-first-draw intrinsic element automatically. The exported component is the direct public wrapper.

Solid#

import { TimeToFirstDraw } from "@opentui/solid"

const App = () => <TimeToFirstDraw label="First draw timestamp" precision={1} fg="#94a3b8" />

The Solid binding exports TimeToFirstDraw and TimeToFirstDrawProps. It also registers the time_to_first_draw intrinsic element automatically. The exported component is the direct public wrapper.

Options#

The core renderable and both framework wrappers accept these options in addition to standard renderable layout options:

User-supplied layout values override the width, height, shrink, and alignment defaults. The Core constructor floors precision and raises a negative value to 0. A non-finite Core value becomes 2. React and Solid currently assign the prop directly after construction and bypass that normalization. Pass an integer from 0 through 100 to either wrapper. Negative and infinite wrapper values can throw when the component draws, and NaN produces zero decimal places.

The rendered line is ${label}: ${runtimeMs.toFixed(precision)}ms. OpenTUI centers it by display-cell width and truncates it at a grapheme boundary.

Runtime properties#

The constructor and JSX option names are label and precision. The post-construction setter names are textLabel and decimals.