---

title: TimeToFirstDraw description: Display the runtime-relative timestamp captured on the first draw skill: intents: [time-to-first-draw, first-draw, performance-timestamp, performance]

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)

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 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 clamps it to zero. 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.