> For the complete documentation index, see [llms.txt](https://tbw.rangle.io/headless-cms-playbook/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tbw.rangle.io/headless-cms-playbook/introduction/headless-architecture.md). # Headless architecture A headless platform can be broken down into two parts: 1. The **CMS** where content authors can manage website content through an editor interface; and 2. The **site builder**, which is comprised of a front-end framework (such as Next.js, Gatsby, and Nuxt.js), component library, and page template. Here's an overview of how it works:

Authors input content into the CMS; the site builder retrieves content from the CMS, in the form of JSON, and builds the front-end UI; and the distribution platform stores the bundled code and serves content to the end users.

Let's look at the CMS and site builder in greater detail. ## Headless CMS A headless CMS stores content for a website and provides access to users and applications. Examples include [Contentful](https://www.contentful.com/) and [Sanity](https://www.sanity.io/). The diagram below illustrates some of the important pieces that comprise a headless CMS.
An editor interface allows authors to edit content in the CMS, as well as access other assets and third-party integrations. Using page preview, authors can review unpublished pages and changes in the application. Applications and developers access the content stored in a headless CMS via APIs. Third-party services and data can be integrated into the CMS. This can include e-commerce data from Shopify, as well as digital assets, such as images and videos, from Cloudinary, Bynder, and other digital asset management (DAM) platforms. ## Site builder A site builder is built on a front-end framework and constructs pages using data from the CMS. This is essentially how a site builder works:
We use a CMS client software development kit (SDK) to transform raw JSON data from the CMS to Javascript objects that are easier to work with. Every headless CMS provides a client SDK: an npm package containing functions to request data in a variety of ways. With the transformed data, we use a page template to compile what will be viewed by end users on a site. (We'll cover exactly how we turn data and components into pages in a [later section](/headless-cms-playbook/static-site-generators/how-to-connect-content-data-to-front-end-components.md)). The resulting bundled code is what's used to deploy the production application with all the pages for the website. ## Distribution platform A distribution platform is a system that takes the bundled code (generated by a site builder) and makes them available to end users on their browsers. This is typically achieved by publishing the code and assets to a space where they can be accessed publicly. Bundled code contains what's necessary to run the application: compiled code and static assets. Static assets that are core to the application include, for example, fonts, icons, images, and generated resource files. Using a content delivery network (CDN) can improve the performance and speed of the application. Because a CDN can cache static assets in multiple servers globally, it can deliver them to end users from a server closest to their geographic location. The application will likely still have integrations with third-party services and hosted asset services to provide additional data that couldn’t be compiled by the site builder. We illustrate below how distribution platforms deliver dynamic content to end users.