Formats

Scena is distributed in three module formats. Each format has a development build (readable, with comments) and a minified production build. All variants export the same API surface — the difference is how the module is loaded by the consumer.

ES Module

The recommended format for projects using a bundler (Vite, Webpack 5+, Rollup, esbuild). ES Modules support static analysis, tree-shaking, and modern import/export syntax.

The main and module fields in package.json point to this build, so bundlers resolve it automatically.

import { useScena } from '@retoo/scena';

import '@retoo/scena/styles';

const scena = useScena();

UMD

Universal Module Definition — works via <script> tags in the browser, AMD loaders, and CommonJS require(). Use this for environments without a bundler: static HTML pages, WordPress, Webflow, Squarespace, or any CMS that allows custom scripts.

<link rel="stylesheet" href="https://unpkg.com/@retoo/scena/dist/scena.css" />
<script src="https://unpkg.com/@retoo/scena/dist/scena.min.umd.js"></script>
<script>
  const scena = window.scenaWidget();

  scena.mount({
    video: { src: '/video.mp4' }
  });
</script>

CommonJS

For Node.js environments, SSR frameworks, or legacy build systems that use require().

const { useScena } = require('@retoo/scena');

const scena = useScena();

Custom Element

Register Scena as a native Web Component to use it in any framework — or vanilla HTML:

import { defineScenaElement } from '@retoo/scena';

import '@retoo/scena/styles';

defineScenaElement();

<scena-video-widget></scena-video-widget>

Stylesheets

CSS must be imported separately regardless of the JS format. Without styles, the widget mounts into the DOM but renders without any visual appearance.

// ES Module / bundler
import '@retoo/scena/styles';        // dev
import '@retoo/scena/styles/min';    // prod

<!-- UMD / script tag -->
<link rel="stylesheet" href="https://unpkg.com/@retoo/scena/dist/scena.css" />