Extension
React Component Registry
Register custom React components so users can place them on the canvas and export them through Telva workflows.
React Component Registry
Telva supports a reactComponent shape type backed by a registry of host React components.
Entry contract
interface ReactComponentEntry {
id: string
name: string
description: string
defaultSize: [number, number]
sourcePath: string
previewColor?: string
component: React.ComponentType<any>
}Registry setup
import type { ReactComponentEntry } from 'telva'
import Grainient from './Grainient'
import FloatingLines from './FloatingLines'
export const REACT_COMPONENTS: ReactComponentEntry[] = [
{
id: 'grainient',
name: 'Grainient',
description: 'Animated gradient shader background',
defaultSize: [400, 300],
sourcePath: 'apps/www/react/Grainient.tsx',
previewColor: '#7B2FFF',
component: Grainient,
},
{
id: 'floatinglines',
name: 'FloatingLines',
description: 'Animated line shader background',
defaultSize: [400, 300],
sourcePath: 'apps/www/react/FloatingLines.tsx',
previewColor: '#A855F7',
component: FloatingLines,
},
]Attach registry to editor:
<Telva reactComponents={REACT_COMPONENTS} />Authoring guidelines for registry components
- Fill parent bounds: render at
width: 100%,height: 100% - Handle resize: use
ResizeObserverwhere needed - Avoid layout side effects: component should be self-contained
- Support deterministic rendering for export workflows
Export behavior notes
React-component shapes are rasterized during export through a DOM snapshot path.
For robust exports:
- avoid initial hidden states (
opacity: 0) at capture time - ensure external assets are CORS-safe
- prefer explicit backgrounds when your component uses white text
- flatten to static images with
app.convertToImage()before server export if needed
Typical integration in app shell
import * as React from 'react'
import { Telva, useFileSystem } from 'telva'
import { REACT_COMPONENTS } from './react/registry'
export default function Editor() {
const fileSystemEvents = useFileSystem()
return (
<div style={{ position: 'relative', width: '100%', height: '100vh' }}>
<Telva
id="develop"
{...fileSystemEvents}
reactComponents={REACT_COMPONENTS}
googleFontsApiKey={process.env.NEXT_PUBLIC_GOOGLE_FONTS_API_KEY}
/>
</div>
)
}