cliquify-previewers

Monorepo containing reusable previewer libraries used across Cliquify projects:

• @cliquify.me/fabric-previewer: Fabric-based canvas previewer/editor.
• @cliquify.me/video-remotion-previewer: Remotion-based video previewer.
• Example apps under apps/ for local development and manual QA.

Requirements

• Node >= 20.18
• pnpm >= 9.12.3

It is recommended to pin versions (already configured in this repo):

{
  "engines": { "node": ">=20.18" },
  "packageManager": "[email protected]"
}

Getting Started

Install all dependencies from the repo root:

pnpm install

Repository Structure

cliquify-previewers/
  packages/
    fabric-previewer/
    video-remotion-previewer/
  apps/
    fabric-previewer-demo/
    video-previewer-sample/

Development

The libraries are built as isolated packages and consumed by example apps via workspace:*.

Run Fabric previewer demo

pnpm --filter @cliquify.me/fabric-previewer build
pnpm --filter @cliquify.me/fabric-previewer-demo dev

Run Video previewer demo

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

When developing a package, rebuild it after changes so the demo app picks up the latest dist/ output. For a smoother experience you can run a build --watch script in parallel.

Publishing

This repo is designed for publishing each package independently under the @cliquify scope.

Typical flow (with Changesets configured):

1. Create a changeset:

   pnpm changeset

2. Apply versions:

   pnpm run version-packages

3. Build and publish:

   pnpm -r build
   pnpm -r publish --access public

Configure NPM_TOKEN in your environment or CI to authenticate with npm.

Design Principles

• React, Remotion, Fabric and other host-level libraries are declared as peerDependencies.
• Libraries do not bundle host frameworks; consumers control versions.
• TypeScript declarations are shipped for all public APIs.
• Example apps live alongside packages for fast, realistic integration testing.