Complete reference for Telva component props including UI toggles, document control, and extension points.

Telva Props Reference

TelvaProps extends callback interfaces (TVCallbacks) and adds component-level integration controls.

Core props

Prop	Type	Description
`id`	`string`	Persistence key and app identity. Changing it creates a new app instance.
`document`	`TVDocument`	Loads/updates document state from external source.
`currentPageId`	`string`	Programmatically switches current page.
`autofocus`	`boolean`	Auto-focus editor root on mount (default `true`).
`readOnly`	`boolean`	Enables read-only interaction mode.
`darkMode`	`boolean`	Forces dark mode setting at app level.
`disableAssets`	`boolean`	Disables image/video asset upload/usage.

UI visibility props

Prop	Type	Default
`showUI`	`boolean`	`true`
`showMenu`	`boolean`	`true`
`showMultiplayerMenu`	`boolean`	`true`
`showPages`	`boolean`	`true`
`showTools`	`boolean`	`true`
`showZoom`	`boolean`	`true`
`showStyles`	`boolean`	`true`

Notes

showUI={false} hides chrome while still rendering the drawing surface.
granular flags let you keep selected internal panels and replace others with host UI.

Rendering overrides

Prop	Type	Description
`components.Cursor`	`CursorComponent`	Replaces default multiplayer cursor renderer.
`hideCursors`	`boolean`	Hides rendered user cursors.
`reactComponents`	`ReactComponentEntry[]`	Registry for insertable React components in the editor.

Fonts integration

Prop	Type	Description
`googleFontsApiKey`	`string`	Enables full Google Fonts listing in font picker.

Minimal controlled setup

import * as React from 'react'
import { TVDocument, Telva, TelvaApp } from 'telva'

export function Controlled({ doc }: { doc: TVDocument }) {
  const [localDoc, setLocalDoc] = React.useState(doc)

  const onChange = React.useCallback((app: TelvaApp) => {
    setLocalDoc(app.document)
  }, [])

  return (
    <Telva
      document={localDoc}
      onChange={onChange}
      showStyles={false}
      showMenu={false}
      showPages={false}
    />
  )
}

Behavior details

if document.id === app.document.id, Telva updates in place via updateDocument
if IDs differ, Telva performs a full loadDocument
callback objects are refreshed when callback props change

Telva Props Reference

On this page