Starter projects
The Magnolia Starter Projects give developers consistent and structured starting point for headless development across the front-end frameworks.
We call them starters.
Whether you’re building a single-page application or a server-side rendered app, you can now see how to integrate with the most popular Magnolia features in the framework that works best for your project.
You don’t have to start with a Starter Project. You can start with your own frontend project and just use the starters as examples for how certain features can be implemented.
Features
Each demo provides insights into how Magnolia works with different front-end frameworks. They include working examples of the key content management tasks in the visual editor. They also showcase advanced features like:
-
Component auto-generation
-
Inheritance
-
Internationalization (i18n)
-
Personalization (p13n)
Whether you are experimenting with Magnolia headless integration or using them as a starting point, the starters offer a solid foundation.
They are compatible with both the Magnolia Community Edition and Magnolia DX Core.
Available starter projects
SDK v1
While the starter projects described above are the recommended starting place, they use the v2 of the Magnolia front-end SDK.
If you’re using v1 of the SDK (known previously as the Magnolia front-end helpers), you may want to use the older generation of the starters known as the Minimal Headless SPA Demos. You can find them all in a single Bitbucket repository:
Jumpstarting the projects
To get a complete project integrated with Magnolia content editing, use the Magnolia CLI (Installing CLI).
In a terminal, jumpstart your project by executing the CLI jumpstart command:
npx @magnolia/cli@latest jumpstart