W3cubDocs

/Web APIs

LayoutShift: toJSON() method

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The toJSON() method of the LayoutShift interface is a serializer; it returns a JSON representation of the LayoutShift object.

Syntax

toJSON()

Parameters

None.

Return value

A JSON object that is the serialization of the LayoutShift object.

Examples

Using the toJSON method

In this example, calling entry.toJSON() returns a JSON representation of the LayoutShift object.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry.toJSON());
  });
});

observer.observe({ type: "layout-shift", buffered: true });

This would log a JSON object like so:

{
  "name": "",
  "entryType": "layout-shift",
  "startTime": 246.39999999850988,
  "duration": 0,
  "value": 0.0071167845054842215,
  "hadRecentInput": false,
  "lastInputTime": 0,
  "sources": [
    {
      "previousRect": {
        "x": 917,
        "y": 708,
        "width": 706,
        "height": 248,
        "top": 708,
        "right": 1623,
        "bottom": 956,
        "left": 917
      },
      "currentRect": {
        "x": 693,
        "y": 708,
        "width": 1154,
        "height": 472,
        "top": 708,
        "right": 1847,
        "bottom": 1180,
        "left": 693
      }
    }
  ]
}

To get a JSON string, you can use JSON.stringify(entry) directly; it will call toJSON() automatically.

Specifications

Specification
Layout Instability API> # dom-layoutshift-tojson>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`toJSON`	77	79	No	64	No	77	No	55	No	12.0	77	No