A JSX render for Chrome Devtools.

Usage no npm install needed!

<script type="module">
  import jsxJsonmlDevtoolsRenderer from 'https://cdn.skypack.dev/jsx-jsonml-devtools-renderer';


jsx-jsonml-devtools-renderer npm

This is a Custom Object Formatter for rendering JSX objects in Chrome Devtools. Yes, you can see them in the console now!

How to use

import React from "jsx-jsonml-devtools-renderer";
class MyObject {
  type = 1;
  innerData = "innerData";
class MyObjectCustomFormatter implements React.CustomObjectFormatter {
  hasBody(obj: unknown) {
    if (obj instanceof MyObject) return true;
    return false;
  body(obj: MyObject) {
    return (
          <tr style="background: rgba(255, 255, 255, 0.6)">
            <td style="min-width: 4em">Type</td>
  header(obj: unknown) {
    if (!(obj instanceof MyObject)) return null;
    return <div>MyObject (type: {obj.type})</div>;
React.installCustomObjectFormatter(new MyObjectCustomFormatter());

Standard Custom Object Formatters features

div span ol li table tr td object

NON-Standard Custom Object Formatters features

  • an onClick attribute is available for any tags except object. Due to technical limitation, the onClick event will be only fired once.
  • an img tag. With attributes src(required), width(optional) and height(optional)
  • a code tag.
  • a br tag.
  • a variant attribute is available for any tags except object. It can used to specify some default styles.


  • Fragment (Used to support <></> syntax)
  • createElement (used to support JSX)
  • createElementTyped (same as createElement, but have a more stricter type)
  • installCustomObjectFormatter(formatter) (install the formatter to Chrome devtools)
  • isJSXElement(x) is it a JSX Element
  • const [state, setState, forceRender] = useState(inspectedObject, initialStateCreator) (used to preserve states between renders)

JSX Features

Basic usage

return (
    <div style="opacity: 0.7;">

Display an object

return (
        The explicit way: <object object={window} />
        The implicit way: {window}. If window is `null`, renderer will ignore this element.


return (
        {data.map(x => (
            <object object={x} />