Chapter 148: renderStill()

Core Idea

_Part of the @remotion/renderer package.

Key Concepts

• Example usage
• Arguments
• composition
• serveUrl
• output
• inputProps?
• port?
• frame?

Code Examples

// The composition you want to render
const compositionId = 'HelloWorld';

const serveUrl = await bundle({
  entryPoint: require.resolve('./src/index.ts'),
});

const comps = await getCompositions({
  serveUrl,
  inputProps: {
    custom: 'data',
  },
});
const composition = comps.find((c) => c.id === compositionId);

if (!composition) {
  throw new Error(`No composition with the ID ${compositionId} found`);
}

await renderStill({
  composition,
  serveUrl,
  output: '/tmp/still.png',
  inputProps: {
    custom: 'data',
  },
});

• What it demonstrates: Usage pattern for renderStill() from the official docs.

Key Takeaways

1. Understand example usage when working with renderStill().
2. Understand arguments when working with renderStill().
3. Understand composition when working with renderStill().
4. Understand serveurl when working with renderStill().
5. Understand output when working with renderStill().

Connects To

• Chromium Flags: related page in the Rendering & SSR section.
• Compare ssr: related page in the Rendering & SSR section.
• Dataset Render: related page in the Rendering & SSR section.