> ## Documentation Index
> Fetch the complete documentation index at: https://docs.daily.co/llms.txt
> Use this file to discover all available pages before exploring further.

# VCS SDK: Composition file structure and interface

> Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

<Badge color="blue">Paid plans only</Badge>

<Tip>
  See section [`Core concepts: Video composition`](/docs/vcs/core-concepts#video-composition) for more background on this concept of a VCS video composition.
</Tip>

Daily VCS compositions should be supplied as a folder containing an `index.jsx` file. The `index.jsx` file is called the "composition root". The baseline composition's [`index.jsx` file](https://github.com/daily-co/daily-vcs/blob/main/compositions/daily-baseline/index.jsx) can be used an example of what any custom versions should look like.

Your `index.jsx` file must use the newer JavaScript module standard, i.e. `import`/`export` statements. (The older Node.js style of `require` and `module.exports` will not work.)

A `package.json` is not required in the folder supplied for a [live stream](/reference/daily-js/instance-methods/start-live-streaming) or [recording](/reference/daily-js/instance-methods/start-recording). VCS uses runtime inspection to discover the composition's features, and importing third party packages from `npm` isn't supported. (You can still include a `package.json` for metadata, if you want.)

## Composition root entry points

The composition root must export two entry points:

1. The composition interface, a JSON object:

```jsx theme={null}
export const compositionInterface = {
  displayMeta: {
    name: 'Daily Baseline',
    description: "Composition with Daily's baseline features",
  }, // ....
```

2. The root component — a React functional component — which must be the default export:

```jsx theme={null}
  // ... this is a React component that renders the composition
```

We can see examples of how these should look in Daily's VCS baseline composition source code:

* The [composition interface](https://github.com/daily-co/daily-vcs/blob/main/compositions/daily-baseline/index.jsx#L70) for the VCS baseline composition
* The [root composition](https://github.com/daily-co/daily-vcs/blob/main/compositions/daily-baseline/index.jsx#L585) for the VCS baseline composition

<Tip>
  **Reminder**

  The VCS baseline composition is Daily's default collection of layout and graphics features built with the VCS SDK. The VCS SDK has been open sourced to allow developers to customize their layouts/graphics for live streaming and cloud recordings *beyond* what you can already do with the baseline composition.
</Tip>

<Warning>
  You may notice the composition examples included in the [`daily-vcs/js/example`](https://github.com/daily-co/daily-vcs/tree/main/js/example) folder are single-file compositions. We've intentionally broken our own rule to make the examples easier to browse. A single-file composition cannot include [assets](/docs/vcs/core-concepts/input-and-compositing-models#3-assets) so it is an extremely limited way of interacting with the VCS SDK.
</Warning>

## The composition interface format

The object exported as `compositionInterface` may contain the following properties:

### `displayMeta`: Object

* `name`: String
  * User-visible name for the composition (shown in the [simulator](/docs/vcs/tools/simulator) UI)
* `description`: String
  * User-visible description of the composition

### `params`: Array of `ParamDesc`

* `ParamDesc`: Object
  * `id`: String (Mandatory)
    * An internal ID for this param
    * This ID can be used to look up the param's value at runtime
  * `type`: String (enum) (Mandatory)
    * Allowed values are:
      * `boolean`: Rendered as a checkbox in the [simulator](/docs/vcs/tools/simulator) UI
      * `number`: Rendered as a number field (with increment/decrement buttons) in the [simulator](/docs/vcs/tools/simulator) UI
      * `text`: Rendered as a text field in the [simulator](/docs/vcs/tools/simulator) UI
      * `enum`: Rendered as a pop-up menu button (a HTML `<select>` element) in the [simulator](/docs/vcs/tools/simulator) UI
        * When using this type, include the `values` property
  * `defaultValue`: `any`, depends on `type` (Optional)
  * `values`: Array of strings (Optional)
    * Only applies to the `enum` type
  * `step`: Number (Optional)
    * Only applies to the `number` type
    * Sets the increment/decrement step for the [simulator](/docs/vcs/tools/simulator) UI

***

Continue reading our additional `Core concepts` pages:

* [Input and compositing models](/docs/vcs/core-concepts/input-and-compositing-models)
* [VCS Best practices](/docs/vcs/core-concepts/best-practices)