Enables previews for Wagtail pages in headless CMS setups by routing previews to a separate front-end application.
Wagtail Headless Preview is a Django package that enables preview functionality for Wagtail CMS when used in a headless setup. It solves the problem where editors lose the ability to preview page changes because the front-end is a separate application, by routing previews to the configured front-end URL. This allows content editors to see exactly how their changes will appear on the live site.
Developers building headless CMS implementations with Wagtail as the backend and a separate front-end framework like React, Vue, or Next.js. It's particularly useful for teams where content editors need to preview changes before publishing.
Developers choose Wagtail Headless Preview because it seamlessly integrates with Wagtail's existing preview system, requires minimal configuration, and maintains the editorial experience that makes Wagtail popular. It's the official solution for headless previews in the Wagtail ecosystem.
Previews for headless Wagtail setups
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Restores Wagtail's preview functionality in headless setups, allowing editors to see changes in the actual front-end context, which maintains the CMS's user-friendly workflow as highlighted in the README's philosophy.
Supports configurable client URLs for different Wagtail sites, enabling previews to point to the correct front-end for each site, as demonstrated in the settings examples for multi-site setups.
Offers both iframe-based and redirect-based previews, with redirects recommended for Wagtail 7.1+ to enable integrations like scroll restoration and the accessibility checker, per the README's guidance.
Provides HeadlessMixin, HeadlessPreviewMixin, and HeadlessServeMixin for simple addition to Wagtail page models, requiring minimal code changes to enable previews.
To enable API-based previews, you must install and configure django-cors-headers for CORS handling, adding an extra layer of setup complexity beyond the core package.
Optimal features like redirect-based previews and integrations such as the accessibility checker require Wagtail 7.1+, which may not be feasible for projects locked to older versions.
The provided example for displaying preview content is a simplistic HTML/JavaScript file, leaving developers to implement full front-end integration with frameworks like React or Vue themselves.