Use the SXA Layout Service to model your pages in JSON

Last updated Friday, June 23, 2017 in Sitecore Experience Accelerator for Content Author, Developer, Marketer
Keywords: Configuration, Layouts

SXA enables you to model your data in JSON (JavaScript Object Notation). For example, if you want to build a mobile app and feed it with SXA content, you can edit the JSON content on the page and have output content in JSON instead of HTML. You can use special renderings to build JSON layout but if your website uses default renderings, you can use the SXA Layout Service to return placeholders and data source items in JSON.

The SXA Layout Service uses serializers to render the JSON content. There is a generic serializer for all renderings that use variants and there are specific serializers for some of the renderings. You can view the settings in the Layout Service section of your rendering. For example, there is a Navigation serializer for the Navigation rendering:

There is a special Rendering contents resolver for the Navigation rendering.

This topic describes how to:

View your pages in JSON

To switch to the JSON device:

  1. In the Experience Editor, on the ribbon, on the Experience tab, click Default, and then click JSON.
  2. To view the JSON, on the ribbon, on the Experience tab, click Other, and click Preview.

The flat list in JSON represents the tree structure of your page. For example, if your page contains the page list rendering:

The page list in JSON.

Or an image:

Example of image in JSON.


If you applied personalization rules to your webpage, these are also displayed in JSON. For example, if you add a rule to hide a rendering under certain conditions.

Filter JSON data using search parameters

You can view and access the JSON data that is returned to every page through the URL.

To filter JSON data using search parameters:

  • In Preview mode, to make JSON data search calls, add query parameters in your browser's address bar. You must start each query with a question mark (?) and separate each query parameter with the ampersand (&) character. Values are comma separated.

You can filter your search by component type (sc_filter_name), placeholder (sc_filter_path), and component ID (sc_filter_id).

For example:



= /home?sc_device=json&sc_filter_path=/leftph/menu

Returns a rendering based on a placeholder.

= /home?sc_device=json&sc_filter_id=content,spot1

Returns renderings with the ID content and spot1 from the /home page.

= /home?sc_device=json&sc_filter_name=richtext

Returns renderings of type richtext from the /home page.

= /home?sc_device=json&sc_filter_path=content&sc_filter_name=richtext

Returns renderings of type richtext in placeholder content from the /home page.

Send feedback about the documentation to