@cliquify.me/fabric-previewer

A Fabric-based canvas previewer + React wrapper designed to be embedded inside Cliquify apps (or any React app).

Features

• Ready-to-use <Canvas /> React component.
• Integrates with Fabric v6.
• Ships TypeScript types for a smooth DX.
• Keeps React/Fabric as peer dependencies so the host app is in control.

Installation

Once published to npm:

pnpm add @cliquify.me/fabric-previewer fabric react react-dom
# or
npm install @cliquify.me/fabric-previewer fabric react react-dom

Peer Dependencies

Must be provided by the host application:

• react >=18 <19
• react-dom >=18 <19
• fabric ^6.0.0-beta16
• paper ^0.12.17 (optional depending on enabled features)

Basic Usage

import { Canvas } from '@cliquify.me/fabric-previewer';

export function Example() {
  return (
    <div style={{ width: 900, height: 600 }}>
      <Canvas />
    </div>
  );
}

If the package exposes additional hooks/contexts (e.g. useSnapmotion, useActiveScene), they can be imported directly:

import { Canvas, useSnapmotion } from '@cliquify.me/fabric-previewer';

Refer to the source for the full public API.

Implementation Notes

• Built with Vite in library mode.
• react, react-dom, fabric, etc. are marked as peerDependencies and external in the bundle.
• Internal utilities such as clsx, zustand, lucide-react, etc. are regular dependencies.
• Public entry:
  • ESM: dist/index.js
  • CJS: dist/index.cjs
  • Types: dist/index.d.ts
  • Wired via the "exports" field.

Local Development

In the monorepo:

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

The demo app consumes the package using the workspace version. Rebuild the package (or run a watch build) when iterating on the library.