TimeToFirstDraw

TimeToFirstDrawRenderable captures and displays a performance.now() reading the first time it draws. OpenTUI exports the renderable from core and wrapper components from both React and Solid.

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.

Core API

import { TimeToFirstDrawRenderable } from "@opentui/core"

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

renderer.root.add(firstDraw)

On its first renderSelf() call, the renderable stores performance.now() in runtimeMs. Later draws continue to display 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 internally; 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 internally; 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. precision is floored and clamped to zero; a non-finite value becomes 2. The implementation does not clamp the upper bound, so values above JavaScript’s toFixed() limit of 100 throw when the renderable draws.

The rendered line is ${label}: ${runtimeMs.toFixed(precision)}ms. It is centered within the renderable width and truncated when it exceeds that width.

Runtime properties

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