Getting Started
Quickstart
Render the editor, obtain the app instance, and run your first command sequence.
Quickstart
This page gives you a minimal but production-relevant setup:
- render the editor
- capture
TelvaAppinonMount - execute shape commands
Minimal render
import { Telva } from 'telva'
export default function BasicEditor() {
return (
<div style={{ position: 'relative', width: '100%', height: '600px' }}>
<Telva />
</div>
)
}Imperative bootstrap with onMount
import * as React from 'react'
import { ColorStyle, TVShapeType, Telva, TelvaApp } from 'telva'
export default function SeededEditor() {
const handleMount = React.useCallback((app: TelvaApp) => {
app
.createShapes({
id: 'rect-1',
type: TVShapeType.Rectangle,
point: [120, 120],
size: [220, 140],
})
.select('rect-1')
.style({ color: ColorStyle.Blue })
.zoomToSelection()
}, [])
return (
<div style={{ position: 'relative', width: '100%', height: '600px' }}>
<Telva onMount={handleMount} />
</div>
)
}Stateful callback pattern
If you need the app instance in buttons outside the editor surface:
import * as React from 'react'
import { TVExportType, Telva, TelvaApp } from 'telva'
export default function ExportExample() {
const [app, setApp] = React.useState<TelvaApp>()
return (
<>
<div style={{ position: 'relative', width: '100%', height: 560 }}>
<Telva onMount={setApp} />
</div>
<button onClick={() => app?.exportImage(TVExportType.PNG, { scale: 2, quality: 1 })}>
Export PNG
</button>
</>
)
}