Reference
TelvaApp Cookbook
Practical command recipes for page management, selection, transforms, camera, export, and content insertion.
TelvaApp Cookbook
TelvaApp is the imperative API surface behind <Telva />.
Acquire an instance
const [app, setApp] = React.useState<TelvaApp>()
<Telva onMount={setApp} />Shapes: create, update, delete
app?.createShapes({
id: 'box-1',
type: TVShapeType.Rectangle,
point: [100, 100],
size: [200, 120],
})
app?.updateShapes({ id: 'box-1', point: [180, 140] })
app?.delete(['box-1'])Selection + styling
app?.select('box-1')
app?.style({ color: ColorStyle.Blue, opacity: 0.85 })
app?.align(AlignType.CenterHorizontal)
app?.distribute(DistributeType.Horizontal)Ordering + grouping
app?.moveToFront()
app?.moveBackward()
app?.group()
app?.ungroup()Clipboard/content operations
await app?.paste([300, 300])
await app?.copySvg()
app?.copyJson()
app?.insertContent(
{
shapes: [/* TVShape[] */],
bindings: [/* TVBinding[] */],
assets: [/* TVAsset[] */],
},
{ point: [200, 200], select: true }
)Camera and viewport
app?.zoomToFit()
app?.zoomToSelection()
app?.resetZoom()
app?.setCamera([0, 0], 1, 'reset')
app?.pan([24, 0])Page management
app?.createPage('page-2', 'Roadmap')
app?.changePage('page-2')
app?.renamePage('page-2', 'Roadmap v2')
app?.duplicatePage('page-2')
app?.deletePage('page-2')Export
await app?.exportImage('png', { scale: 2, quality: 1 })
await app?.getImage('jpeg', { quality: 0.92 })
await app?.copyImage('svg')
await app?.convertToImage() // flatten selected reactComponent shapesSessions (advanced)
For custom workflows, you can orchestrate sessions:
app?.startSession('translate', /* args */)
app?.updateSession()
app?.completeSession()
app?.cancelSession()Useful getters
const page = app?.page
const selectedIds = app?.selectedIds
const zoom = app?.zoom
const document = app?.document
const room = app?.room