Go Headless
More opportunities to make the most of your Wagtail content
Whether you're ready to go headless now or want to be ready to go headless in the future, Wagtail provides the flexibility to structure your content management system the way you want to.
Wagtail headless features
Predicting future technology trends is impossible, which is why it's important to choose a content management system that offers you options to use your content in multi-faceted ways. These are some of the features that make Wagtail a solid choice if you want to go headless.
-
API-first options
Wagtail includes a REST API powered by the Django REST Framework, and GraphQL API support is provided by wagtail-grapple (a package maintained by Wagtail core members). You can pick the API integration that works best for your project and your team.
-
Flexible deployment
Wagtail can be deployed to the cloud, on-premises, or pretty much on any server that supports Python. Wagtail works well in containers and is fully scalable.
-
Frontend Freedom
Unlike some other content management systems, Wagtail is designed to be paired with the frontend framework of your choice. Whether you prefer Next.js, Vue, React or something else has caught your eye, almost any frontend can be combined with Wagtail.
-
Support for headless previews
With Wagtail, you can go headless without sacrificing page previews. The wagtail-headless-preview package manages the preview data so your content creators can preview their work without extra hassles.
Who's running headless Wagtail?
Organizations large and small have chosen headless Wagtail because of its flexibility and open-source ethos. These are just some of the organizations who have chosen to go headless with Wagtail.
How do I go headless with Wagtail?
There are many different ways to go headless with Wagtail depending on what your project needs, where you want to host it, and which frontends you are planning to display your content in.
If you want to know the basics of going headless, Kyle Bayliss from Torchbox provides a good overview of how Wagtail can fit into a MACH architecture (that would be Microservices, API-first, Cloud-native, Headless). He provides a few code examples but doesn't delve too deeply into how you set up the frontend that you would pair Wagtail with.
For a more in-depth exploration of some basic headless code and how you can pair headless Wagtail with a static frontend, Thibaud Colas and Sage Abdullah from Torchbox created a workshop that combines Next JS with Wagtail.
There are more code examples out there, some more recent than others. After you go through the workshop, here are a few other code examples you might want to look at:
Headless or traditional Wagtail: what's the difference?
Wagtail CMS can be used in a traditional (aka "monolithic") architecture on a server or in a MACH (Microservices, API-first, Cloud-native, Headless) architecture. It's often confusing to people who don't spend time working on servers everyday, so here is a quick overview of the differences between the two.
Traditional Wagtail
Traditional Wagtail puts all of your eggs in one nest: your backend code (the code that manages all your content and data) is strongly connected to frontend code (the code that powers how the people sees your content) on a single server or container. Having everything in one place makes it easier to test and troubleshoot your code all at once.
Headless Wagtail
With Headless Wagtail, you don't have to put all your eggs in one nest. Your eggs, which are different pieces of your code in this analogy, can be distributed to multiple nests, which are servers or cloud containers for hosting your code. Although the backend and the frontend can be distributed to different locations, they're still connected. They're connected by an application programming interface (API). The frontend, whether it's a website, a mobile phone app, or a smartwatch app, can collect content from the same backend using the API and display it specifically for a particular device or app.
Headless Wagtail community projects
Are you interested in joining the community and contributing to the progress of headless Wagtail? Go to #headless on the Wagtail Slack channel and join the conversation.