Product Mockups

A powerful mockup rendering and editing library built with Svelte 5.

Installation

npm install svelte-product-mockup
# or
pnpm add svelte-product-mockup

Usage

Basic Renderer

<script>
	import { MockupRenderer } from 'svelte-product-mockup';
	import type { Mockup } from 'svelte-product-mockup';

	const mockup: Mockup = {
		id: '1',
		name: 'My Mockup',
		composition: {
			width: 800,
			height: 600,
			layers: [
				{
					id: 'layer1',
					src: 'https://example.com/image.jpg',
					transform: { x: 400, y: 300, scale: 1, rotation: 0 },
					opacity: 1,
					visible: true,
					effects: []
				}
			]
		},
		view: { zoom: 1, panX: 0, panY: 0 },
		createdAt: Date.now(),
		updatedAt: Date.now()
	};
</script>

<MockupRenderer mockup={mockup} />

Editor Component

<script>
	import { MockupEditor } from 'svelte-product-mockup';
</script>

<MockupEditor>
	<h1>My Mockup Editor</h1>
</MockupEditor>

The MockupEditor component manages all mockup state internally, including loading from and saving to localStorage. You can optionally pass storageKey and currentMockupKey props to customize the storage keys:

<MockupEditor storageKey="my-custom-key" currentMockupKey="my-current-key">
	<h1>My Mockup Editor</h1>
</MockupEditor>

Programmatic Rendering

import { renderMockupCanvas } from 'svelte-product-mockup';
import type { Composition } from 'svelte-product-mockup';

const canvas = document.getElementById('my-canvas') as HTMLCanvasElement;
const composition: Composition = {
	width: 800,
	height: 600,
	layers: [/* ... */]
};

const cleanup = renderMockupCanvas(canvas, composition);
// Later: cleanup();

API

Components

• MockupEditor - Full-featured editor component (manages its own state)
  • Props: children (snippet), storageKey? (string), currentMockupKey? (string)
• MockupRenderer - Simple renderer component
• MockupEditorRenderer - Renderer with editor features
• ZoomableCanvas - Canvas wrapper with zoom/pan
• LayerControls - Layer editing controls
• MockupListModal - Modal for selecting mockups

Functions

• renderMockupCanvas(canvas, composition, overrides?, onRenderTime?) - Render to canvas
• renderMockupCanvasEditor(canvas, composition, overrides?, onRenderTime?) - Editor renderer
• saveMockup(mockup, storageKey?) - Save mockup to localStorage
• loadMockup(id, storageKey?) - Load mockup from localStorage
• loadAllMockups(storageKey?) - Load all mockups
• createNewMockup(name?) - Create a new mockup

Types

• Mockup - Main mockup type
• Composition - Canvas composition
• Layer - Layer definition
• LayerEffect - Effect configuration
• WarpEffect - Warp effect configuration
• RestyleEffect - Image adjustment effect

Configuration

• STORAGE_KEY - Default localStorage key for mockups (default: 'product-mockups')
• CURRENT_MOCKUP_KEY - Default localStorage key for current mockup (default: 'product-mockups-current')

License

MIT