Using The JSS Layout Service To Debug A Page In Sitecore

What Is The JSS Layout Service?

While working with a page, or even early on in the development of a component, it may be necessary to see the JSON structure. In particular, what the structure may be on a page or how it's coming to a component.

But before we get too deep into the weeds, let's answer the obvious question. What is the JSS Layout Service in the first place? Well, in the case of Sitecore Headless, it's nothing more than an endpoint that presents the JSON structure of the page, route, or item. Its sole purpose is to separate the layout from the rendering enabling developers to build applications that essentially only require JSON data to work. And while that might not seem like much, it's extremely powerful in what it delivers.

How Do We View This Information?

The great part is you can see it pretty easily, you just require a few pieces of information first. Most notably, you require the API Key the app or page consuming the JSON is using.

Next, you'll require the GUID for the item that you are examining.

Additional optional pieces of information include the language of the item and whether you're viewing the data while in edit, preview, or normal mode.

Combining this information into a URL that looks like the following:

{your host}/sitecore/api/layout/render/jss?item={XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX}&sc_apikey=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX.

You could switch between edit and normal modes simply by adding &sc_mode=normal/edit/preview along with a language using &sc_lang=en or whatever language is needed.

What Do We Get To See?

More like, what can't you see? It is everything, no. But when it comes to an item and all custom fields, the answer is yes. And even when you're trying to figure perhaps why a component isn't rendering or whether something is true, and you thought it was false it allows you to dive into the details right away. It's really become my first way of approaching a problem, to be honest. Just have a look below.

    "sitecore": {
      "context": {
        "pageEditing": false,
        "site": {},
        "pageState": "normal",
        "language": "en",
        "itemPath": "/"
      "route": {
        "name": "Home",
        "displayName": "Home",
        "fields": {},
        "databaseName": "master",
        "deviceId": "fe5d7fdf-89c0-4d99-9aa3-b5fbd009c9f3",
        "itemId": "97e4e222-fe33-4117-a8a4-32343d4d4e44",
        "itemLanguage": "en",
        "itemVersion": 1,
        "layoutId": "96e5f4ba-a2cf-4a4c-a4e7-64da88226362",
        "templateId": "fa869e7a-bb40-4f5a-84e2-72eb43a60f6c",
        "templateName": "App Route",
        "placeholders": {
          "jss-header": [],
          "jss-main": [
              "uid": "320db8e6-e227-44e2-aea3-7b4b716f63c9",
              "componentName": "Card",
              "dataSource": "{5090DED5-6D57-450F-BB7E-14E1DB4BCC4B}",
              "params": {},
              "fields": {
                "aField": {
                  "id": "d9ebb293-27f5-400f-992f-71c7f5d03779",
                  "url": "/Data/site/card1",
                  "name": "default",
                  "displayName": "Card 1",
                  "fields": {
                    "value": {
                      "value": "a value from a droplink"
          "jss-footer": [

👋 Hey Sitecore Enthusiasts!

Sign up to our bi-weekly newsletter for a bite-sized curation of valuable insight from the Sitecore community.

What’s in it for you?

  • Stay up-to-date with the latest Sitecore news
  • New to Sitecore? Learn tips and tricks to help you navigate this powerful tool
  • Sitecore pro? Expand your skill set and discover troubleshooting tips
  • Browse open careers and opportunities
  • Get a chance to be featured in upcoming editions
  • Learn our secret handshake
  • And more!
Sitecore Snack a newsletter by Fishtank Consulting

Meet David Austin

Development Team Lead | Sitecore Technology MVP x 3


David is a decorated Development Team Lead with Sitecore Technology MVP and Coveo MVP awards, as well as Sitecore CDP & Personalize Certified. He's worked in IT for 25 years; everything ranging from Developer to Business Analyst to Group Lead helping manage everything from Intranet and Internet sites to facility management and application support. David is a dedicated family man who loves to spend time with his girls. He's also an avid photographer and loves to explore new places.

Connect with David