Editor settings

The Customization Studio exports one JSON settings object for React, mount functions and custom elements.

Create settingsCopy Anchor Link

Set showThemeCreator to true in your development build, then open the palette button in the top bar.

import { VideoEditor } from '@layermetry/media-editor/react';

export default function App() {
  return <div style={{ position: 'fixed', inset: 0 }}>
    <VideoEditor licenseKey="YOUR_LICENSE_KEY" onClose={() => undefined}
      showThemeCreator={true} />
  </div>;
}

Choose colors, fonts, corners, icons or tool visibility. Open Settings to inspect the JSON. Copy settings copies that object; Download .json saves editor-settings.json.

The Studio previews changes while it is open. Closing it restores your supplied settings. Copy or download your changes before closing it. showThemeCreator defaults to false; the settings file does not enable it.

Logo edits appear immediately in the editor’s top bar while the Studio is open. Clearing the field removes the logo from the preview. Closing the Studio restores your supplied logo.

The Bar tab previews the real toolbar for each item type. Nothing selected previews the page bar. For a selected-item control, change its label, choose Default, Icon only, Words only or Both, move it up or down, or hide it. These settings are saved in ui.selection.

Tools marked (off by default) enter the rail order only when you enable them. Reordering the rail does not enable those tools. Reset restores the settings you supplied when the Studio opened.

Settings fileCopy Anchor Link

The file includes the settings you supplied and your Studio edits. With the built-in light defaults and no host overrides, it can be {}. A supplied custom theme, logo, data icons and UI settings are preserved when you save again.

{
  "theme": {
    "primary": "#7c3aed",
    "focus": "#7c3aed"
  },
  "typography": {
    "heading": "Georgia, serif",
    "body": "system-ui, sans-serif",
    "mono": "Menlo, monospace"
  },
  "radii": {
    "sm": "2px",
    "md": "4px",
    "lg": "8px",
    "full": "9999px"
  },
  "icons": {
    "plus": {
      "svg": "<svg viewBox=\"0 0 24 24\"><path d=\"M12 5v14M5 12h14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>"
    }
  }
}

The video settings file can also contain enableThemeToggle. A custom theme has no light/dark pair, so it hides the switch and overrides darkMode while active.

The file contains no license key, callbacks or React components. It contains a flat theme map, without a saved-theme wrapper. Your application loads any font files named by typography.

Apply settingsCopy Anchor Link

Keep the JSON beside your application code and spread the whole object into the editor's options.

import { VideoEditor } from '@layermetry/media-editor/react';
import settings from './editor-settings.json';

export default function App() {
  return <div style={{ position: 'fixed', inset: 0 }}>
    <VideoEditor {...settings} licenseKey="YOUR_LICENSE_KEY"
      onClose={() => undefined} />
  </div>;
}

Pass functions and your license key separately. Set the custom element's props property; JSON settings are not HTML attributes.

Icon dataCopy Anchor Link

IconData supplies an icon as SVG text or an image address. The same shape works in every framework.

import type { IconData } from '@layermetry/media-editor';

export const plus: IconData = {
  svg: '<svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" fill="none" stroke="currentColor" stroke-width="2"/></svg>',
};
export const upload: IconData = { url: '/icons/upload.svg' };

Leading whitespace before the SVG tag is accepted. Protocol-relative addresses such as //example.com/icon.svg are refused. SVG data follows the surrounding text color.

A refused standard icon produces one console warning and keeps the built-in icon. A refused custom-action icon keeps the action's label instead. Custom actions accept IconData only. The standard icons map also accepts React components, which cannot be stored in JSON.

See Control customization for control ids and Custom actions for host action icons.