Headless website development on Payload CMS: TypeScript architecture

A classic website hits a ceiling when content and catalog grow faster than the platform. We design and develop turnkey headless websites on Payload CMS: a unified data schema, access roles, and predictable release of updates. Let's discuss your task — we'll come back with an estimate and work plan.

Development and maintenance of all types of websites:

Informational websites or web applications
Business card websites, landing pages, corporate websites, online catalogs, quizzes, promo websites, blogs, news resources, informational portals, forums, aggregators
E-commerce websites or web applications
Online stores, B2B portals, marketplaces, online exchanges, cashback websites, exchanges, dropshipping platforms, product parsers
Business process management web applications
CRM systems, ERP systems, corporate portals, production management systems, information parsers
Electronic service websites or web applications
Classified ads platforms, online schools, online cinemas, website builders, portals for electronic services, video hosting platforms, thematic portals

These are just some of the technical types of websites we work with, and each of them can have its own specific features and functionality, as well as be customized to meet the specific needs and goals of the client.

Frequently Asked Questions

Payload CMS: where the architecture of a classic site breaks

In a monolithic platform, content and markup live in the same template tree: a section's text, its markup, and output logic are interconnected, and changing block order or adding a field goes through code and the release cycle.

The material is ready, but only a developer can publish it — publication speed is limited not by the editorial team, but by the deployment task queue.

The second architectural bottleneck is catalog growth. Each new card type, filter, or related collection requires a separate template, migration, and manual field mapping, while the number of relationships between sections grows faster than the number of sections themselves.

At some point, touching an existing page becomes riskier than rebuilding it from scratch, and the editorial team starts maintaining workaround spreadsheets instead of working with the site.

The third failure point is delivery. A monolith is built as a whole, so an error in one template brings down not just a single page but the entire resource, and rollback is also global.

A headless site on Payload CMS separates these layers.

Collections are described declaratively and generate the storage schema, admin interface, and TypeScript types for the frontend — an editor changes field composition and block order without touching the output code, while a page requests only the data it needs.

Next, we break down how this is addressed: where the boundary between content and presentation lies, how publishing works, and what to check before migration.

What headless architecture provides: measurable effects

Moving the content layer to headless on Payload CMS changes not only how data is stored but also release frequency. The collection schema is described in TypeScript code and versioned alongside the frontend — hence four effects visible in metrics.

Speed of releasing sections

A new page or catalog section is a collection entry and a route, not a frontend queue task. The content team publishes a section in hours, including draft, preview, and access roles; a developer gets involved only when a new block type is needed.

Recovery time after failure

The build is separated from application operation: the static layer is served from cache, so if the database or admin service is unavailable, the site continues to open.

Rolling back to a previous build version restores a working state in minutes — downtime is measured in minutes, not hours of root-cause analysis.

Caching and targeted rebuilds

Cache invalidation is tied to entities: editing one page rebuilds it and related lists, not the entire site. A full run is reduced to seconds on affected routes instead of tens of minutes rebuilding the whole site, and publishing no longer blocks other edits.

Eliminated classes of failures

Field validation at the schema level, versions, and drafts remove two typical classes of failures: "broken layout after text editing" and content divergence between environments. The volume of manual fixes after release drops by roughly three times.

Payload CMS vs monolith: comparison of implementation options

The choice between a monolith and a separated architecture is not a matter of fashion, but of how often the content structure changes and how many channels consume it. While the content model is stable and there is one output, a monolith solves the task with less code.

If the schema changes often and the same material is needed by the site, app, and partner storefronts, separating layers pays off.

Option When it fits Limitations
Monolith on a ready-made platform Content model is stable, one output channel, editors work in a familiar admin panel The presentation layer is tied to templates: a new channel is built anew, and the platform limits your content schema with its own record types
Separated architecture on Payload CMS Multiple channels, frequent schema changes, typed connection between content and code The presentation layer and preview are built separately, editors are trained, caching and hosting are configured manually
Hybrid approach Some sections are stable, some require flexible fields and external data Two data models and two publishing loops: maintenance cost grows, clear boundaries are needed

When a custom content schema is overkill

It is not needed where a site consists of a dozen pages, updates a couple of times a week, and serves content only to the browser. Collections with fields, relations, and access rights are an extra layer that is maintained but pays for nothing.

During assessment, we look at content composition, the number of channels, and edit frequency — and propose the option with lower total cost of ownership.

How we implement a headless site: stages of engineering work

A headless site is built not around markup, but around the data model and how content is delivered.

Therefore, we structure the work so that each decision relies on the verified result of the previous step, not on assumptions from the brief — otherwise reworking the schema costs more than the entire rest of the project.

  1. Content and integration audit. We analyze material types, relationships between them, and external systems — accounting, analytics, newsletters. Result: a list of entities and exchange contracts that will go into the schema.
  2. Data schema design. Collections, fields, versions, and drafts are described before the first line of code: in Payload CMS the model is defined by types, and an error here leads to rework. Result: an agreed schema and migration plan.
  3. Environment setup. Development, staging, and production environments are built identically, secrets and keys live outside the repository, access is separated by roles. Result: a release is reproducible on any environment.
  4. Content migration. We migrate materials, files, and metadata, verify record counts and relationship correctness on a production copy. Result: discrepancies are visible before domain switchover, not after.
  5. Load testing. We run caching, page generation, and backend requests on a profile close to real traffic. Result: the headroom for concurrent visitors and bottlenecks are clear.
  6. Acceptance and handover to support. We provide access, schema documentation, and update regulations, and train editors. Result: publishing materials does not require a developer.

Project artifacts: data schema, access roles, regulations

Code without a description of the data model and access rules quickly turns into a black box: no one dares make an edit in the editor interface, and any change to the content structure requires a call to the developer.

Therefore, along with the repository, we hand over a set of artifacts that the client's team can use to work independently — from releasing material to deploying a staging environment. Below is what physically remains with you.

  • Data schema. A description of collections, fields, types, and relations in the same form in which they are declared in the Payload configuration — indicating where a field is required, where it is computed, and where it is a relation to another collection. It shows what will change when adding an entity and which migrations will be required.
  • Access role matrix. A "role → collection → action" table with notes on which restrictions live at the document level and which at the individual field level. It is immediately clear why a section editor cannot see others' drafts and who is allowed to change global settings.
  • Editorial instructions. How to create material, fill in relations and metadata, work with drafts and versions, and what to do in case of edit conflicts. Designed for a person without a technical background.
  • Publishing regulations. What is released without developer involvement, what requires review, how to roll back a published version, and how content structure changes are approved.
  • Deployment documentation. A list of environment variables, build order, database and media storage requirements, and the recovery procedure from backup.
  • Copy deployment procedure. A step-by-step scenario for bringing up a separate staging environment with the same settings — for release verification or editor training.
  • Architecture decision log. Short "why this way" notes: choice of access model, boundaries between content and code, deferred improvements.

Each artifact is updated together with the code — otherwise documentation diverges from reality within a couple of releases.

Case study: how a media catalog was moved to a headless schema

A media catalog with tens of thousands of cards ran on a monolithic engine: content, output templates, and filter logic were tied together in one codebase.

Publishing a new card went through developers — editing a template, manual export, and cache reset took days, and during an announcement sections responded with delays and some requests ended in errors.

We moved the project to a headless schema: content is stored as structured data on Payload CMS, and the frontend is built separately and receives data via an API.

The editorial team works in a familiar panel — cards, tags, related materials, and access rights are described by the schema and validated on input. The build became page-by-page: a new publication updates only the affected pages, not the entire catalog.

Metric Before After
Card publication time days, through developers minutes, by the editorial team
Catalog size tens of thousands of cards in one monolith catalog grew threefold without rebuilding the frontend
Share of edits by the editorial team about one tenth nine out of ten
Support requests about content regular, for every publication occasional, for new material types
Response under peak load delays and errors during announcements stable response time

Resilience came not from the migration as such, but from separating layers: output is cached and does not depend on the editing panel, so a traffic spike during an announcement does not block the editorial team's work.

The team stopped being a bottleneck — content edits and code releases now proceed in parallel and do not interfere with each other.

How the headless approach differs from a template platform

In a template platform, content and presentation are linked: material fields are tied to theme blocks, and the built-in output engine assembles the markup.

The headless approach splits this into two layers — the content model is served via API, and the frontend renders the data however it wants. The boundary runs along the contract between the layers: as long as the response format is stable, they evolve independently.

This changes material preview. In a template platform, a draft is shown by the same renderer as the public page. In headless, preview is a separate mode: the frontend requests the unpublished version with an access token and assembles it with the same components as the live one. The editor sees the real layout before publication.

Content versioning moves to the model level. Revisions of individual records are stored, not a "page version": you can roll back one material, compare a draft with the published version, and schedule publication. For multilingual projects, this removes the "language — separate template" coupling.

New output channels take the same data via API — a mobile app, partner site, kiosk. Payload CMS is one option for such an architecture: collections are described in code, the contract is versioned with the project, and types are reused between layers.

The flip side is that you maintain the frontend, preview, and cache yourself. Here headless is more expensive than a template platform, and it is justified when there is more than one channel.

Technical concerns worth resolving before starting

Before starting, the client checks not the architecture diagram but the risks: what will happen to accumulated content, whether the editorial team can work independently, and who is responsible for the site after handover. Below are five concerns most often raised in pre-project discussions, with direct answers.

How is content migrated and page URLs preserved?

We inventory the current entities and map them into the data model collections, then migrate with scripts that verify record counts and nested relations. In parallel, we build a map of old and new URLs and close it with permanent redirects — search visibility is not lost. Broken URLs are cleaned up before domain switchover, not after.

Will the editorial team be able to work without a developer?

Standard blocks — text, media, cards, tables, callouts — are assembled from ready-made fields, preview shows the page before publication, and rights are separated by roles. A developer is needed only when a new content type appears.

We cover editorial scenarios during handover: how to assemble a page, how to schedule publication, how to roll back an unsuccessful edit.

What happens if the content layer is unavailable?

Public pages are served statically, so an admin panel or database failure does not bring down the site. The last successful page version remains in cache until recovery, and dynamic forms go into a queue and are processed after the service returns. Monitoring detects unavailability before a visitor notices it.

What support is provided after handover?

We hand over documentation, access, and infrastructure into your ownership — you are not technically tied to us. After that, we work according to regulations: security updates, backups with recovery verification, an incident response window, and a clear improvement queue.

Let's discuss the task: what to clarify before work begins

Estimating a headless project rests not on the number of pages, but on the content schema and editorial scenarios. To come back with a work plan and stage timelines rather than a broad range, we need inputs on the current state and the load the system must withstand. It is enough to send them in free form — we will clarify the rest on a call.

  • Current schema: where the site is hosted, how content is published now, which parts are reused, whether there is an existing API.
  • Content volume: how many materials and page types, how many language versions, whether migration from the old system with URL preservation is needed.
  • Editorial scenarios: who publishes and how often, whether roles and rights are needed, drafts, scheduled publishing, preview, edit history.
  • Integrations: CRM, payment, search, analytics, external services — and who on your side owns each.
  • Load requirements: peak visits, share of pages served from cache, acceptable response time under peak.
  • Materials to start: access to the repository and servers, mockups, collection descriptions, contact of the person responsible for acceptance.

Based on these inputs, we assemble a stage-by-stage work plan: collection and access rights schema, integration layer, material migration, load testing, and launch into operation.

For each stage, we include the team composition — who is responsible for architecture, who for interfaces, who for data — and timelines tied to your dates. Describe the task — we will come back with an estimate and plan.

Our competencies:

Latest works

  • Development of a web application for FEEDME
    Development of a web application for FEEDME
    1394
  • Development of an online store for the company FURNORO
    Development of an online store for the company FURNORO
    1369
  • Development of a web application for Enviok
    Development of a web application for Enviok
    1140
  • CRM development for Chasseurs
    CRM development for Chasseurs
    1152
  • Website development for SBH Partners
    Website development for SBH Partners
    1231
  • Website development for Red Pear
    Website development for Red Pear
    642