---
description: Configuration wrapper for selecting media engine (ffmpeg or native) and setting API credentials for Editframe compositions.
---
# ef-configuration
## Attributes
- **api-host** (string) - Override API host for asset resolution
- **signing-url** (string, default: /@ef-sign-url) - URL endpoint for signed URL generation
- **media-engine** (string, default: cloud) - Media engine selection
# Configuration
Configuration wrapper for media engine selection and API settings.
## Import
```tsx
import { Configuration } from "@editframe/react";
```
## Basic Usage
Wrap your composition to configure media handling:
```html
```
```tsx
// Video.tsx
import { Timegroup } from "@editframe/react";
export const Video = () => {
return (
{/* Your composition */}
);
};
// main.tsx
import ReactDOM from "react-dom/client";
import { Configuration, TimelineRoot } from "@editframe/react";
import { Video } from "./Video";
ReactDOM.createRoot(document.getElementById("root")!).render(
,
);
```
## Media Engine Options
The `media-engine` attribute controls how media files are loaded and processed.
Controls how media files are loaded and processed. Three options are available:
### Cloud Mode (Default)
Automatically selects the appropriate engine based on URL:
- Remote URLs (`http://`, `https://`) use JIT transcoding
- Local paths use asset engine
```html live
```
**Use when:** Building production applications with mixed local and remote assets.
```tsx
{/* JIT transcoding */}
{/* Local assets */}
```
### Local Mode
Forces all sources through the local asset engine using `@ef-*` URLs:
```html
```
**Use when:**
- Development with local files only
- Testing without network access
- Working with bundled assets
- All sources use local asset endpoints
- No transcoding applied
- Best for local development with Vite plugin
```tsx
{/* → /@ef-assets/... */}
```
### JIT Mode
Forces all sources through JIT transcoding using `/api/v1/transcode/*` URLs:
```html
```
**Use when:**
- On-demand transcoding needed
- Working with incompatible video formats
- Development with Editframe Vite plugin
- All sources are transcoded on-demand
- Useful for testing transcoding behavior
- May have slower initial load
```tsx
{/* → /api/v1/transcode/... */}
```
## API Host Override
Override the API host for asset resolution in production:
```html
```
**Use when:**
- Deploying to custom domains
- Using proxy servers
- Testing against staging environments
Set the API endpoint for transcription and rendering:
```tsx
{/* Composition */}
```
## Signing URL
Configure the endpoint for generating signed URLs:
```html
```
**Use when:**
- Custom authentication flows
- Non-standard URL signing
- Backend integration requirements
Defaults to `/@ef-sign-url`:
```tsx
{/* Composition */}
```
The signing URL is used to:
- Generate signed URLs for secure media access
- Authenticate transcoding requests
- Control access to media files
In development, the Vite plugin provides this endpoint automatically.
## Development vs Production
### Local Development Setup
Use `local` mode with Vite plugin for fast iteration:
```html
```
### Production Setup
Use `cloud` mode with custom API host:
```html
```
```tsx
const apiHost = import.meta.env.VITE_API_HOST || "http://localhost:3000";
const mediaEngine = import.meta.env.PROD ? "cloud" : "local";
export const Video = () => {
return (
{/* Your composition */}
);
};
```
## Context Provision
`ef-configuration` provides settings via Lit context to all descendant elements. This means you only need one configuration wrapper at the root level:
```html
```
If you don't need API features (transcription) or want default settings, you can omit Configuration:
```tsx
export const Video = () => {
return (
{/* Your composition */}
);
};
```
## Multiple Configurations
Nest configurations to override settings for specific subtrees:
```html
```
> **Note:** Inner configurations override outer settings only for their descendants. Settings merge — unspecified attributes inherit from parent configuration.
## Typical Setup
```tsx
// VideoComposition.tsx
import { Timegroup, Video, Audio } from "@editframe/react";
export const VideoComposition = () => {
return (
);
};
// main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import { Configuration, TimelineRoot } from "@editframe/react";
import { VideoComposition } from "./VideoComposition";
ReactDOM.createRoot(document.getElementById("root")!).render(
,
);
```