Integration
Assets and Export Pipelines
Handle media assets, implement custom export behavior, and route exports through server-side rendering services.
Assets and Export Pipelines
This page covers the export and asset surfaces that are most commonly customized in production.
Default export behavior
Without onExport, Telva triggers a local file download.
With onExport, you receive a TVExport payload and can decide how to handle it:
import * as React from 'react'
import { TVExport, Telva, TelvaApp } from 'telva'
function handleExport(_app: TelvaApp, info: TVExport) {
const blobUrl = URL.createObjectURL(info.blob)
const link = document.createElement('a')
link.href = blobUrl
link.download = `${info.name}.${info.type}`
link.click()
}
<Telva onExport={handleExport} />Direct command exports
Use TelvaApp methods for explicit control:
app.exportImage('png', { scale: 2, quality: 1 })
app.exportImage('svg', { scale: 1, quality: 1 })
app.getImage('jpeg', { scale: 2, quality: 0.92 })
app.getSvg(undefined, { includeFonts: true })Asset lifecycle callbacks
Use callback hooks to integrate storage/CDN flows:
onAssetCreate(app, file, id)onAssetUpload(app, file, id)onAssetDelete(app, assetId)
Return the final asset URL from create/upload callbacks.
File-system helper hook
useFileSystem() wires default menu/file commands:
import { Telva, useFileSystem } from 'telva'
const fileSystemEvents = useFileSystem()
<Telva {...fileSystemEvents} />Server export architecture
The repository includes a server-export example that:
- collects selected shapes and related assets
- serializes dynamic media when needed (
serializeVideo,serializeImage) - posts payload to an endpoint
- downloads the returned blob
High-level outline:
async function exportViaServer(app: TelvaApp, type: TVExportType) {
const shapeIds = app.selectedIds.length ? app.selectedIds : Object.keys(app.page.shapes)
const shapes = shapeIds.map((id) => ({ ...app.getShape(id) }))
const assets = { ...app.document.assets }
// optional media snapshot normalization
// app.serializeVideo(shapeId)
// app.serializeImage(shapeId)
const response = await fetch('/api/export', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
pageId: app.currentPageId,
shapes,
assets,
type,
}),
})
const blob = await response.blob()
// download blob
}React component snapshot workflow
convertToImage() converts selected live reactComponent shapes into static image shapes.
Use cases:
- flattening dynamic UI to stable export artifacts
- reducing live DOM dependency before server-side pipelines