Chapter 390: <Artifact>

Core Idea

By rendering an <Artifact> tag in your Remotion markup, an extra file will get emitted during rendering.

Key Concepts

• API
• filename
• content
• downloadBehavior?<AvailableFrom v="4.0.296" />
• Artifact.Thumbnail<AvailableFrom v="4.0.290" />
• Compatibility
• See also

Code Examples

export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();

  return frame === 0 ? <Artifact filename="my-file.txt" content="Hello World!" /> : null;
};

• What it demonstrates: Usage pattern for <Artifact> from the official docs.

Key Takeaways

1. Understand api when working with <Artifact>.
2. Understand filename when working with <Artifact>.
3. Understand content when working with <Artifact>.
4. Understand downloadbehavior?<availablefrom v="4.0.296" /> when working with <Artifact>.
5. Understand artifact.thumbnail<availablefrom v="4.0.290" /> when working with <Artifact>.

Connects To

• Accessibility: related page in the Legal, Meta & Support section.
• dev: related page in the Legal, Meta & Support section.
• pro: related page in the Legal, Meta & Support section.