@cliquify.me/video-remotion-previewer

A Remotion-based video previewer used to render and inspect Cliquify video designs inside React applications.

Features

• Player React component tailored for Cliquify-style video designs.
• Integrates with the Remotion ecosystem.
• Integrates with Cliquify domain packages (state, timeline, animations, transitions, types).
• Ships TypeScript types and keeps core frameworks as peers.

Installation

Once published to npm:

pnpm add @cliquify.me/video-remotion-previewer           react react-dom           remotion @remotion/player           @cliquify.me/state @cliquify.me/timeline           @cliquify.me/animations @cliquify.me/transitions @cliquify.me/types           @designcombo/events @designcombo/frames

(Adjust the exact peers based on what your host app already uses.)

Peer Dependencies

Provided by the host application:

• react >=18 <19
• react-dom >=18 <19
• remotion ^4.0.243
• @remotion/player, @remotion/fonts, @remotion/media-utils, @remotion/paths, @remotion/shapes, @remotion/transitions
• @cliquify.me/state ^5.0.3
• @cliquify.me/timeline ^5.0.3
• @cliquify.me/animations ^6.0.5
• @cliquify.me/transitions ^0.11.9
• @cliquify.me/types ^5.0.3
• @designcombo/events ^1.0.2
• @designcombo/frames ^0.0.3

The library assumes these packages exist in the host to avoid version and bundle duplication.

Basic Usage

import { Player } from '@cliquify.me/video-remotion-previewer';
import type { CliquifyVideoDesign } from '@cliquify.me/types';

const design: CliquifyVideoDesign = /* ... */;

export function Example() {
  return (
    <div style={{ maxWidth: '50%' }}>
      <Player design={design} />
    </div>
  );
}

The PlayerProps type is exported:

import type { PlayerProps } from '@cliquify.me/video-remotion-previewer';

Implementation Notes

• Entry: src/index.ts exports Player and PlayerProps.
• Built with Vite in library mode.
• Output:
  • ESM: dist/index.js
  • CJS: dist/index.cjs
  • Types: dist/index.d.ts
• Host-level libraries (React, Remotion, Cliquify core packages) are all peerDependencies and marked as external in Rollup.
• Styling/utility libraries used only internally are regular dependencies.

Local Development

Inside the monorepo:

pnpm --filter @cliquify.me/video-remotion-previewer build
pnpm --filter video-previewer-sample dev

The video-previewer-sample app imports the package via workspace:* and is the recommended place to manually test changes.