Data, properties & components

Load data before rendering

Each frame is rendered synchronously, so a component cannot wait for a file or a network request. Do that work in an async prepare() export instead. It runs once, before the first frame, in both the preview and exports. Store the results in module-level variables, then read them while rendering:

let headlines: string[] = ['Hello from Celesta'];

export async function prepare() {
  try {
    const response = await fetch('https://example.com/headlines.json');
    headlines = (await response.json()) as string[];
  } catch (error) {
    console.error('Using the fallback headline', error);
  }
}

Keep a fallback value so the scene still renders offline. loadLipSync(), loadPsdPreset(), and preloadMedia() belong in prepare() for the same reason.

Reuse components with data and props

Keep settings in ordinary objects or imported JSON data and pass them to React components as props. A data JSON file is not a .celesta.json timeline project. Type the props so your editor checks each use.

import { Composition, Text } from '@celesta/react';

const settings = { title: 'Chapter 3', accent: '#a68bbf' };
type TitleProps = { title: string; accent: string };

function Title({ title, accent }: TitleProps) {
  return (
    <Text x={960} y={540} anchorX={0.5} anchorY={0.5}
      style={{ fontSize: 96, fill: { type: 'solid', color: accent } }}>
      {title}
    </Text>
  );
}

export default function Root() {
  return (
    <Composition width={1920} height={1080} fps={30} durationInFrames={90}>
      <Title {...settings} />
    </Composition>
  );
}