@forter/json-viewer

fc-json-viewer

Display themed syntax highlighted JSON.

⚠️⚠️ This component is deprecated and might be unstable. please use fc-highlight. ⚠️⚠️

Usage

<script>
  import '@forter/json-viewer';
</script>

<fc-json-viewer>
   {"foo": "foo", "bar": 10, "baz": null, "biff": false}
</fc-json-viewer>

Properties

Property	Attribute	Type	Description
object	object	any	object to display. example: {"ori": { "goldi": 1, "gilad":2 } }
whitelist	whitelist	any	list of keys to show. example: ["foo"]

Slots

Name	Description
	markup of JSON to prettify. example: {"foo": "foo", "bar": 10, "baz": null, "biff": false}

CSS Custom Properties

Property	Description
--fc-json-viewer-boolean-color	boolean color. example: var(--yellow-9), default: var(--cyan-9)
--fc-json-viewer-key-color	key color. example: var(--yellow-9), default: var(--orange-9)
--fc-json-viewer-null-color	null color. example: var(--yellow-9), default: var(--red-9)
--fc-json-viewer-number-color	number color. example: var(--yellow-9), default: var(--green-9)
--fc-json-viewer-string-color	string color. example: var(--yellow-9), default: var(--cyan-9)