Blurhash
Generates a base64 WebP placeholder for image uploads in Payload CMS.
Installation
pnpm add @nlvogel/payload-blurhash About
The payload-blurhash plugin allows Payload CMS to automatically create a tiny base64 WebP placeholder, or 'blurhash', during image uploads. This placeholder serves as an instant blurred preview while the full image loads, useful for enhancing user experience. It integrates seamlessly with upload collections, storing the blurhash directly on the upload document without requiring additional requests from the frontend. The plugin adds specific fields for each targeted upload collection, including a read-only `blurhash`, horizontal and vertical resolution components, and a UI component for previewing and regenerating the blurhash. Users can configure settings such as collection limits and default resolution values during initialization. Additionally, a regeneration endpoint is available for manual updates when necessary, ensuring flexibility in managing image uploads. Compatibility includes Payload version 3.0.0 or higher, and it requires Node.js and React within specified versions. It can be integrated easily into existing Payload projects to improve image handling processes.
Package info
- Package name
@nlvogel/payload-blurhash- Latest version
0.1.0- Unpacked size
- 44 kB
- License
- MIT
- Weekly downloads
- 4
- Last publish
- Apr 29, 2026
More from nick-vogel
View profileCode Block Feature
Lexical feature for Payload CMS that adds syntax-highlighted code blocks with a language picker and copy button.
reCAPTCHA v3
This plugin protects Payload collection operations using Google reCAPTCHA v3.
TOTP
Add an extra layer of security with Time-based One-time Passwords (TOTP).
Similar plugins
More in MediaCloud
Connects a Payload instance to Payload Cloud's managed S3 storage, Cloudflare CDN upload caching, and Resend email delivery.
Redis Cache
Redis cache plugin for Payload CMS
Redis Cache
Redis-backed query caching layer for Payload v3 that intercepts database adapter read and write operations.
ISR revalidation
Integrates ISR-style cache revalidation into Payload CMS for Next.js.