Editframe logoEditframe

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

DOM: read / write
HTML: api-host
JSX: apiHost
Type: string

The 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

DOM: read / write
HTML: signing-url
JSX: signingURL
Type: string
Default: /@ef-sign-url

The 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

DOM: read / write
HTML: media-engine
JSX: mediaEngine
Type: string
Default: cloud

Specifies 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: contents so it doesn't affect layout
  • Configuration is provided through Lit's @lit/context package
  • 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
  • EFWorkbench - Often used as a direct child of configuration
  • EFVideo - Consumes API host for asset loading
  • EFAudio - Consumes API host for asset loading
  • EFImage - Consumes API host for asset loading