Blurhash

Generates a base64 WebP placeholder for image uploads in Payload CMS.

Community 1 4/wk MIT v0.1.0

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 profile

Similar plugins

More in Media