custom-elements.json

{
  "version": "experimental",
  "tags": [
    {
      "name": "json-viewer",
      "path": "./json-viewer.js",
      "description": "Custom Element that shows a JavaScript object's properties as syntax-highlighted JSON.\n\nThe element will respect `prefers-color-scheme` by default, but if you use the\nCSS Custom Properties listed below, you should customize both light and dark themes.\n\n❤️ Proudly uses [open-wc](https://open-wc.org) tools and recommendations.",
      "attributes": [
        {
          "name": "object",
          "description": "JavaScript Object to display\nSetting this property will override `<script type=\"application/json\">` children",
          "type": "string|object"
        },
        {
          "name": "allowlist",
          "description": "User-defined allowlist of top-level keys for the object.\nOptional for plain objects,\nRequired when setting `object` to a non-serializable object (e.g. an HTMLElement)\nProperty is an Array of strings\nAttribute is a comma-separated string",
          "type": "string[]"
        }
      ],
      "properties": [
        {
          "name": "object",
          "attribute": "object",
          "description": "JavaScript Object to display\nSetting this property will override `<script type=\"application/json\">` children",
          "type": "string|object"
        },
        {
          "name": "allowlist",
          "attribute": "allowlist",
          "description": "User-defined allowlist of top-level keys for the object.\nOptional for plain objects,\nRequired when setting `object` to a non-serializable object (e.g. an HTMLElement)\nProperty is an Array of strings\nAttribute is a comma-separated string",
          "type": "string[]"
        },
        {
          "name": "error",
          "description": "JSON.parse error",
          "type": "Error"
        }
      ],
      "events": [
        {
          "name": "json-parse-error",
          "description": "when JSON parse fails"
        }
      ],
      "slots": [
        {
          "name": "",
          "description": "JSON scripts or JSON strings appended as text nodes will be parsed and displayed"
        }
      ],
      "cssProperties": [
        {
          "name": "--json-viewer-color",
          "description": "Color for generic text. Light white, Dark #212121"
        },
        {
          "name": "--json-viewer-background",
          "description": "Color for generic text. Light #212121, Dark white"
        },
        {
          "name": "--json-viewer-key-color",
          "description": "Color for keys. Light #f76707, Dark #ff922b"
        },
        {
          "name": "--json-viewer-boolean-color",
          "description": "Color for booleans. Light #f76707, Dark #22b8cf"
        },
        {
          "name": "--json-viewer-number-color",
          "description": "Color for numbers. Light #0ca678, Dark #51cf66"
        },
        {
          "name": "--json-viewer-null-color",
          "description": "Color for nulls. Light #e03131, Dark #ff6b6b"
        },
        {
          "name": "--json-viewer-string-color",
          "description": "Color for strings. Light #0c8599, Dark #22b8cf"
        }
      ],
      "cssParts": [
        {
          "name": "code",
          "description": "the wrapping `<code>` element"
        },
        {
          "name": "key",
          "description": "property keys"
        },
        {
          "name": "boolean",
          "description": "boolean property values"
        },
        {
          "name": "number",
          "description": "number property values"
        },
        {
          "name": "null",
          "description": "null property values"
        },
        {
          "name": "string",
          "description": "string property values"
        }
      ]
    }
  ]
}