Configuration
The <ef-configuration> element provides global configuration management for Editframe elements. It sets up API endpoints, media engine settings, and other environment-specific configurations that are automatically inherited by all child elements through context.
Basic Usage
<ef-configuration api-host="https://api.editframe.com">
<ef-workbench>
<ef-timegroup slot="canvas" mode="contain" className="w-[1920px] h-[1080px]">
<ef-video assetId="123..."></ef-video>
</ef-timegroup>
</ef-workbench>
</ef-configuration>How It Works
The configuration element uses Lit's context API to provide configuration values to all descendant elements. Elements that need configuration (like <ef-video>, <ef-audio>, etc.) automatically consume these values without requiring manual prop drilling.
This means you can wrap your entire application or editor in a single configuration element, and all media elements will automatically use the correct API endpoints and settings.
Attributes
apiHost
stringapi-hostapiHostThe base URL for the Editframe API.
All API requests for fetching assets, transcoding, and other operations will be made relative to this host.
Example values:
- Production:
"https://api.editframe.com" - Staging:
"https://staging-api.editframe.com" - Local development:
"http://localhost:3000"
If not specified, elements will attempt to use a default or infer from the environment.
signingURL
string/@ef-sign-urlsigning-urlsigningURLThe endpoint used for signing URLs and generating access tokens.
This URL is used by media elements to obtain signed URLs for secure media access.
The default value "/@ef-sign-url" works with the development server setup from npm create @editframe@beta.
mediaEngine
stringcloudmedia-enginemediaEngineSpecifies which media engine to use for transcoding and playback.
Options:
"cloud": Use cloud-based transcoding services (default, recommended for production)"local": Use local media processing (useful for development)
The media engine determines how videos are processed, transcoded, and streamed for real-time playback.
Examples
Production Configuration
<ef-configuration
api-host="https://api.editframe.com"
media-engine="cloud"
>
<!-- Your editor UI -->
</ef-configuration>Development Configuration
<ef-configuration
api-host="http://localhost:3000"
signing-url="/api/sign"
media-engine="local"
>
<!-- Your editor UI -->
</ef-configuration>Multiple Configurations
You can nest configuration elements to override settings for specific subtrees:
<ef-configuration api-host="https://api.editframe.com">
<ef-workbench>
<!-- Most content uses the main API -->
<ef-video assetId="abc123"></ef-video>
<!-- Override for a specific section -->
<ef-configuration api-host="https://staging-api.editframe.com">
<ef-video assetId="staging-asset"></ef-video>
</ef-configuration>
</ef-workbench>
</ef-configuration>Use Cases
Environment-Specific Setup
Use configuration elements to easily switch between development, staging, and production environments:
const config = {
development: {
apiHost: 'http://localhost:3000',
mediaEngine: 'local' as const,
},
production: {
apiHost: 'https://api.editframe.com',
mediaEngine: 'cloud' as const,
},
};
const env = process.env.NODE_ENV === 'production' ? 'production' : 'development';
// In your component:
<ef-configuration
api-host={config[env].apiHost}
media-engine={config[env].mediaEngine}
>
{/* Your app */}
</ef-configuration>Testing with Mock API
Override the API host during testing to point to a mock server:
<ef-configuration api-host="http://localhost:3001/mock-api">
<!-- Test your editor against mock data -->
</ef-configuration>Technical Notes
- The configuration element uses
display: contentsso it doesn't affect layout - Configuration is provided through Lit's
@lit/contextpackage - Child elements automatically consume configuration without explicit props
- Configuration can be nested to create configuration hierarchies
- Changes to configuration properties trigger updates in consuming elements