Your complete guide to customizing templates through the props interface. Learn to modify text, adjust colors, replace media, and fine-tune timing to transform any template into exactly what you need.
Get familiar with how props work and how they enable powerful customization without touching code.
Props (properties) are the customizable inputs that control what appears in your video. Think of them as the knobs and dials that let you adjust a template's content and appearance without modifying the underlying code.
Open Remotion Studio with npx remotion studio, select your composition from the sidebar, and find the props panel on the right. All editable properties appear here with appropriate input controls.
Templates define their props using Zod schemas. This enables the Studio to automatically generate form controls—text fields, color pickers, sliders, and checkboxes—based on the property types.
Most templates expose these configurable property types that you can adjust through the props panel.
| Type | Description | Example |
|---|---|---|
| Text | Headlines, body copy | title: "Welcome" |
| Color | Background, accent | primaryColor: "#0066cc" |
| Image | Logos, photos | logoUrl: "/logo.png" |
| Number | Duration, sizes | durationInSeconds: 5 |
| Boolean | Show/hide | showLogo: true |
As you adjust props in the Studio, changes appear instantly in the preview. This immediate feedback loop makes experimentation fast and intuitive.
After adjusting props, click the save icon to update your defaultProps in the source file. You can also copy the props object as JSON for use in CLI rendering.
Master text props to craft compelling headlines, descriptions, and calls-to-action that match your brand voice.
Text props control all written content in your video—headlines, subtitles, body copy, labels, and CTAs. Most templates expose multiple text props for different content areas.
Templates ship with placeholder text that demonstrates the layout and timing.
Replace placeholders with your actual content to make the template your own.
Keep headlines concise—3 to 7 words work best for readability. Longer headlines may get truncated or require smaller font sizes that reduce impact.
Adjust language to fit your brand's tone. A playful brand might use casual language, while a professional service might prefer formal phrasing.
Some templates handle long text better than others. Always preview your video with actual content to ensure text fits properly and animations work as expected.
Transform templates to match your brand palette by customizing background, accent, and text colors.
Most templates expect colors in hex format (#RRGGBB). Some also support RGB, HSL, or named colors, but hex codes provide the most consistent results across all templates.
Templates include a default color scheme that works well together but may not match your brand.
Replace default colors with your brand palette to create a cohesive visual identity.
Ensure text remains readable against backgrounds. Light text on dark backgrounds (or vice versa) should have a contrast ratio of at least 4.5:1 for accessibility.
Most templates use three color levels: primary (main brand color), secondary (supporting color), and accent (highlights and CTAs). Adjust all three for a cohesive look.
The Studio's built-in color picker makes it easy to experiment with colors. Click any color prop to open the picker, then adjust hue, saturation, and lightness visually.
Swap out placeholder images, logos, and backgrounds with your own assets to personalize templates.
Image props accept URLs pointing to your assets. You can use local files from your project's public folder or fully qualified URLs for hosted images.
Place images in your project's public folder and reference them with a leading slash.
Use fully qualified URLs for images hosted on CDNs or external services.
Review the template's expected image dimensions before replacing assets. Using images with the correct aspect ratio prevents stretching or cropping issues.
Large images can slow down preview rendering. Compress images appropriately—aim for under 500KB for most assets, under 2MB for full-screen backgrounds.
PNG format supports transparency, making logos more versatile. They can be placed on any background color without visible edges or artifacts.
Fine-tune video duration, animation timing, and pacing to match your content and platform requirements.
Timing props control how long elements appear and when animations occur. The main duration prop is typically durationInFrames, calculated as seconds × fps (e.g., 5 seconds at 30fps = 150 frames).
Templates ship with default timing optimized for common use cases.
Adjust timing to fit your content needs and platform requirements.
Different platforms have different ideal lengths. Instagram Reels work well at 15-30 seconds, TikTok at 15-60 seconds, and YouTube Shorts at up to 60 seconds.
Give viewers enough time to read text. A good rule of thumb: 3-4 seconds for headlines, 5-7 seconds for longer text blocks. Test playback to ensure comfortable pacing.
Most templates use 30fps. When calculating duration, multiply seconds by the frame rate. For 60fps compositions, the same 5-second video requires 300 frames instead of 150.
Continue exploring with these related guides and tutorials.
Now that you understand props editing, explore our template library to find the perfect starting point. Each template includes comprehensive props for full customization.