# DOMRect.toJSON is misleading

**URL:** <https://discourse.mozilla.org/t/domrect-tojson-is-misleading/143963>\
**Category:** MDN\
**Tags:** feedback, issue\
**Created:** [June 6, 2025, 12:44pm UTC](https://discourse.mozilla.org/t/domrect-tojson-is-misleading/143963 "2025-06-06T12:44:53Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![KooiInc](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/kooiinc/32/73567_2.png) [@KooiInc](https://discourse.mozilla.org/u/KooiInc)\
**Post date:** [June 6, 2025, 12:44pm UTC](https://discourse.mozilla.org/t/domrect-tojson-is-misleading/143963/1 "2025-06-06T12:44:53Z")

</div>

I would like to note that the method name for `DOMRect.toJSON` (actually the `toJSON` method of `DOMRectReadOnly`) is _misleading_.

It does **not** return the `DOMRect` instance as _Javascript String Object Notation_ (so _a string_), but a plain `Object`.

So, trying to use the `DOMRect.toJSON` return value as actual `JSON` will throw a `SyntaxError`.

```javascript
const elementDimensions = JSON.parse(
  [someElement].getBoundingClientRect().toJSON()
);
// => Uncaught SyntaxError: "[object Object]" is not valid JSON

// One can of course use ...
const elementDimensions = JSON.parse(
  JSON.stringify([someElement].getBoundingClientRect().toJSON())
);
// But that would be, well ... refute the meaning of toJSON

```

I would suggest a line to mention this in the [MDN DOMRectReadOnly page](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly#instance_methods)

Regards / Kooiinc

[**edit**] rerouted to MDN topic.

---

<div class="post-metadata">

**Author:** ![pransh](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/pransh/32/67461_2.png) [@pransh](https://discourse.mozilla.org/u/pransh)\
**Post date:** [July 7, 2025, 10:49am UTC](https://discourse.mozilla.org/t/domrect-tojson-is-misleading/143963/2 "2025-07-07T10:49:20Z")

</div>

Hello @KooiInc 👋

Thanks a ton for sharing this. I would love to take it to the team of technical writers, can you please [open an issue here](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FDOMRectReadOnly&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Fweb%2Fapi%2Fdomrectreadonly%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FDOMRectReadOnly%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fweb%2Fapi%2Fdomrectreadonly%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F9f09d944bca13b61293b4cc93cb52011c6134b0d%0A*+Document+last+modified%3A+2024-11-16T01%3A07%3A04.000Z%0A%0A%3C%2Fdetails%3E) so we can discuss on this topic if there are any more comments.

Thank you! 🙏

---

<div class="post-metadata">

**Author:** ![KooiInc](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/kooiinc/32/73567_2.png) [@KooiInc](https://discourse.mozilla.org/u/KooiInc)\
**Post date:** [July 7, 2025, 11:57am UTC](https://discourse.mozilla.org/t/domrect-tojson-is-misleading/143963/3 "2025-07-07T11:57:15Z")

</div>

Hi pransh, glad to contribute. Issue [submitted](https://github.com/mdn/content/issues/40230).

---

<div class="post-metadata">

**Author:** ![pransh](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/pransh/32/67461_2.png) [@pransh](https://discourse.mozilla.org/u/pransh)\
**Post date:** [July 7, 2025, 12:08pm UTC](https://discourse.mozilla.org/t/domrect-tojson-is-misleading/143963/4 "2025-07-07T12:08:48Z")

</div>

Perfect. Thanks a ton!

---

<div class="post-metadata">

**Author:** ![AC1DST4R](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/ac1dst4r/32/78945_2.png) [@AC1DST4R](https://discourse.mozilla.org/u/AC1DST4R)\
**Post date:** [October 14, 2026, 3:13pm UTC](https://discourse.mozilla.org/t/domrect-tojson-is-misleading/143963/5 "2026-10-14T15:13:14Z")

</div>

Hi @KooiInc !

One small clarification that might be useful for the documentation: `toJSON()` is expected to return a JavaScript value that can be serialized to JSON, rather than a JSON string directly.

For example:

```auto
const rect = element.getBoundingClientRect();

const dimensions = rect.toJSON(); // Plain object
const json = JSON.stringify(rect); // JSON string

```

Passing the result of `toJSON()` directly to `JSON.parse()` fails because `JSON.parse()` expects a string containing JSON, not an object.

That said, I agree that a brief note on the MDN page explaining this distinction could help prevent confusion, especially for developers encountering `toJSON()` for the first time.

Thanks for raising it!  
Regards, AC1DST4R  
_Self Employed Developer / Unofficial MDN Support_