Skip to content

What is layout service Sitecore Jss?

The Layout Service is a key feature in Sitecore JavaScript Services (JSS) and is fundamental to how JSS works. It is a Sitecore API that provides a JSON representation of an item’s layout. Essentially, it converts the item’s presentation details into JSON format which can then be consumed by a JSS application.

The Layout Service provides two key pieces of information:

1.Layout Data:  

This is a representation of the item’s layout, including placeholders and renderings. For each rendering, it includes the datasource item and any parameters. It allows the JSS application to construct a page by placing components into the correct placeholders.

2.Route Data:  

This includes the item’s fields, and can also include data from related items if they are linked via a datasource or a field like a Droplink. This provides the content that the components will display.

To use the Layout Service, your JSS app makes a HTTP GET request to the Layout Service endpoint, passing the route of the item it wants to get data for. For example:


The Layout Service then responds with a JSON object that includes both layout data and route data.

Here’s a simplified example of what the Layout Service might return:

/* Code Json */
  "sitecore": {
    "route": {
      "name": "home",
      "displayName": "Home",
      "fields": {
        "title": {
          "value": "Welcome to our website!"
      "placeholders": {
        "jss-main": [
            "componentName": "SampleComponent",
            "fields": {
              "heading": {
                "value": "Hello, world!"
/* Code */

The `jss-main` placeholder includes a `SampleComponent` with a `heading` field.

The Layout Service enables the “decoupling” of the frontend and backend of a Sitecore site, facilitating the development of headless applications using JSS.

Share this post on social!

Leave a Reply

Your email address will not be published. Required fields are marked *