Using JSON API as a tool for building headless websites involves leveraging its capabilities to facilitate communication between the front end and back end while decoupling the presentation layer from the content management system (CMS).

In a headless architecture, the front end (or "head") is decoupled from the back end, allowing greater flexibility in designing and delivering content across various platforms and devices. JSON API serves as a means of exchanging data between the two layers.

While this has been a capability of Drupal for many years it has not been possible until recently to leverage the content stored in Acquia’s drag and drop site building tool for Drupal, Site Studio. 

In Site Studio version 7.4.0 (Nov 2023) we introduced a new consumer layer to create a reliable, persistent schema that can be consumed by JSON:API and used to propagate a separate headless application.

How to setup and use JSON API and Site Studio
To install Site Studio JSON:API integration submodule, run the following command on your environments CLI:

composer require acquia/sitestudio_jsonapi

Alternatively download the module from the public github repository acquia/sitestudio_jsonapi by the means of your choice. If downloading manually, please make sure to download the dependencies of the module which at the time of writing are the following:

• jsonapi_extras version 3.24 or later

Once Site Studio JSON:API submodule and its dependencies are downloaded manually, follow the Drupal documentation to install the "Site Studio JSON:API" (`sitestudio_jsonapi) module.

The Module ships with default configuration and no additional steps are required. Included configuration enables JSON:API Extras field overrides for "Cohesion Layout Canvas" entity resource - "styles" and "templates" field values are removed from output, "json_values" field is processed using "Cohesion Layout (Site Studio Layout Canvas field)" field enhancer plugin.

You must also make sure "Cohesion Layout (Site Studio Layout Canvas field)" field enhancer is applied only on `cohesion_layout--cohesion_layout` resource and should not be applied to any other resource. Doing so will result in unexpected behavior and PHP Exception errors.

An example of the OUTPUT
If we set up the WYSIWYG form element up on a component as in this example

And then use it on the node layout canvas as below

then the JSON:API output will be formatted like this

A simple example of JSON API in action
We have created a simple static recipe website to show how this might work in the real world

Step 1 - On the node you want to use drag the components you want to use in your headless application

Step 2 - Create a form to enable input of the data.

As you can see below in the example component each one is made up of form fields. There doesn’t actually have to have anything on the component layout canvas for this to work (but could have nested components)

 

Step 3 - Connect the data to the equivalent front end component

 

The full JSON API output for each supported data type can be found in our user guide. 

In this case you’ll get the following static headless website

https://sitestudio-nextjs-example.vercel.app/ 
 

For more information on using JSON API please see our user guide. To get an instant sandbox or a 30 day API Key trial visit our product page and complete the form at the bottom of the page.