There are a lot of incredible tools in today’s web ecosystem that enable non-technical users to author and edit web content. You no longer need developers for every small update or chore for your website or web product. The introduction of content management systems (CMS) empowers content authors to take control of the content of their web experience. It frees developers’ time for more complex and high-impact work.
While traditional, monolithic CMS products (like WordPress or Drupal) have been around for nearly two decades, a big trend that we’ve seen in recent years is the move to headless CMS solutions (like Sanity or Contentful) to build custom layouts, themes, and content that traditional CMS products don’t support. That being said, a drawback of headless solutions we often hear from our clients is that headless CMS products can be difficult to navigate, and understanding where content needs to be updated in the interface is often hard. While moving to headless architecture has opened up the world of CMS development to allow for a lot more customization, many of them lack a key component that has continued to drive users to traditional CMS products like WordPress. That missing piece is a What You See Is What You Get (WYSIWYG) interface, which allows content authors to directly edit the content on a preview environment that reflects the live site. While many headless CMS products offer preview environments for users to see changes before they are pushed to production, most don’t provide an “On The Glass” (OTG) editing experience where you can click on the piece of content you are looking to change in the preview environment and update it without going into the content model itself.
One of the best products we’ve seen tackle this problem is Stackbit. Stackbit is an interface for websites and apps that can connect to any structured content source to enable a visual content editing experience. Whether you’re using a headless CMS, a legacy database, or connecting to your content via an API, Stackbit provides OTG editing like the traditional WYSIWYG editors. With great integrations to products like Sanity or Contentful, adding Stackbit to your tech stack is a great tool to empower your content authors and remove some of the complexity that comes with many content editing platforms.
Some key benefits of using Stackbit are that it does not store your content, manipulate your production stack, or act as a site builder itself. At the core of the product, it is simply a visual editing interface. This allows you to use whatever content storage solution you prefer while being able to connect to the frontend framework and build tools of your choice. If you already use a headless CMS, you can integrate it with Stackbit to provide a live preview environment while enabling OTG editing.
Reuse components and create pages faster with presets
While improving the editing experience is enough reason to use Stackbit, during a recent client engagement, we uncovered that it could do so much more. One of the big differentiating factors from other editing platforms is that Stackbit allows you to create presets of components or templates to use across the pages of your site. For example, you can create a “tile wall” once and reuse the same component and content on other pages.
This can majorly accelerate the content creation process, saving content authors from needing to manually re-enter the same data for components that are reused across your site. You can also use presets to create templates for content authors, making the editing experience easier and significantly reducing the time to build complex components and new pages across your site.
Stackbit as a Git-based CMS
Although Stackbit does not store your content or act as a CMS in the traditional sense, they offer an option to manage your content models and self-host your content through GitHub. In this sense, Stackbit becomes a Git-based CMS and saves you from investing in another resource to store and manage your content. This is an incredible option for people who are looking to migrate to a headless tech stack or those who are looking for increased security by reducing the number of external tools that manage their content. If a company is already using GitHub for code management and version control, it means that no additional security review would be required to integrate Stackbit into your stack. You retain full control of your content, as you don’t need to rely on an external source to store or serve the data to your application, reducing potential points of attack or failure.
Using the Git-based CMS option from Stackbit does require a slight adjustment of your development workflow, but Stackbit makes the process easy to implement. Within the Stackbit web platform, you work off of a specific git branch (the default name is “preview,” but this can be changed to whatever name you prefer). All the content of your project is saved in markdown files, which can be found in the “content” folder within your project. Whenever you update in Stackbit, a commit with your changes is made within this folder to your GitHub repository on the preview branch. When your changes are ready to be shipped to the production environment, click the “Publish” button within the Stackbit UI. This will result in a merge of your preview branch into your main branch through GitHub, which can also be set up to trigger a new production build of your website or application.
Best practices for developer workflows with Git-based CMS
When developers work on new components or content models, they should always branch off the preview branch. This way, when code is approved and ready to be used in Stackbit, it simply needs to be merged into the preview branch to be accessible within the platform and used by content authors. Similarly, the merge from the preview to the main branch should only be managed through the Stackbit app and never done manually through GitHub. By following this workflow, it ensures consistency between the main and preview branches and removes the potential for merge conflicts by protecting the main branch from direct pushes.
Stackbit has also released a number of tools and plugins to help make development with the Git-based CMS option easier. One of my personal favourites is the Storybook plugin, which provides a suggested content model for your components if you are managing and documenting them in Storybook. Not only do you get the benefits of developing a component library and sandbox within the Storybook UI, but it significantly reduces the amount of manual work required to translate components into a content model. Another added benefit of using Storybook is the ability to use Chromatic for visual regression testing of your components, reducing the number of potential bugs within your application.
Another great integration Stackbit offers is with Cloudinary to manage your media assets. Rather than self-hosting images within an asset or public folder in your application, you can use Cloudinary for its advanced asset storage and management capabilities. To integrate Cloudinary with your Stackbit app, you add your cloud name and API key within the project settings of your app, which will grant access to your entire Cloudinary media catalogue whenever you use the ‘image’ or ‘video’ field types in any content model.
As a developer, I found that it was incredibly easy to learn and use Stackbit. Stackbit demystifies many more complex concepts from headless architecture, like building content models and connecting them to the editor interface. While the developer workflow using the Git-based CMS option does take some time to get used to, managing all of the content within your code was a huge benefit and made the migration process of the site we were building much easier. The visual editing interface significantly improves the learning curve for developers and content authors alike, and the Stackbit team was great at providing support whenever we needed it. After using Stackbit, I can confidently say that it is a game changer in the world of headless architecture and should definitely be considered by any team looking to speed up their content creation and empower content authors.
