# remotion-remote-composition

> With this module, you can share and load remotion compositions from a URL

Latest version **0.6.9** (published 2023-05-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install remotion-remote-composition
pnpm add remotion-remote-composition
yarn add remotion-remote-composition
bun add remotion-remote-composition
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.9 |
| Published | 2023-05-10 |
| First published | 2023-04-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 45.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | musafiroon |
| Maintainers | musafiroon |
| Keywords | remotion, microfrontend, remote |

## Links

- npm: https://www.npmjs.com/package/remotion-remote-composition
- Repository: https://github.com/musafiroon/remotion-remote-composition
- Homepage: https://github.com/musafiroon/remotion-remote-composition#readme
- Issues: https://github.com/musafiroon/remotion-remote-composition/issues
- npm.io page: https://npm.io/package/remotion-remote-composition

## Dependencies (1)

- [webpack](https://npm.io/package/webpack.md) ^5.81.0

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 0.6.9 (latest) — 2023-05-10
- 0.6.8 — 2023-05-04
- 0.6.7 — 2023-05-02
- 0.6.6 — 2023-04-27
- 0.6.4 — 2023-04-27
- 0.6.3 — 2023-04-12
- 0.6.2 — 2023-04-12
- 0.5.0 — 2023-04-11

## README

# Remotion Remote Composition

With this module, you can share and load remotion compositions from a URL

> This module is based on the remotion-microfrontends repository by mykeels. You can find the original repository here: https://github.com/mykeels/remotion-microfrontends

## Exporting a composition

firstly, on the remote project, you need to change the webpack config to include a module federation plugin pointing to a file that exports composition using the `createMounter()` method

```javascript
// remote/remotion.config.js
import overrideWebpack from "remotion-remote-composition/dist/cjs/overrideWebpack";
Config.overrideWebpackConfig(
	overrideWebpack({
		containerName: "remote",
		// the path of the file(s) to export (relative to root)
		federationExposes: ["./src/Composition.tsx"],
	})
);
```

This will make an endpoint at `remotion preview url/remoteEntry.js'

## Importing a remote composition

In the `Root.tsx` of the host, `import {RemoteComposition} from 'remotion-remote-composition'`  
and add it as a composition with the props

```javascript

// host/remotion.config.js
import overrideWebpack from "remotion-remote-composition/dist/cjs/overrideWebpack";

Config.overrideWebpackConfig(overrideWebpack({ name: "host" }));`
```

```javascript
<Composition
	id="HelloWorld"
	component={RemoteComposition}
	durationInFrames={150}
	fps={30}
	width={1920}
	height={1080}
	defaultProps={{
		url: "http://localhost:3000/remoteEntry.js",
		module: "./src/Composition.tsx",
		scope: "remotevideo",
		/** The name of the exported composition.If the composition is the default export,then simply use "default" */
		composition: "HelloWorld",
		// props to pass to the composition
		compositionProps: {
			titleText: "Welcome to Remotion",
			titleColor: "green",
		},
	}}
/>
```

> Note: you need to add this to the src/index.ts file

```
import React from "react";

window.React = React
```

If you find any issues, etc then feel free to file an issue on [GitHub]()

---
_Source: https://npm.io/package/remotion-remote-composition · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._