{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import json\n",
    "import panel as pn\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The ``JSON`` pane allows rendering arbitrary JSON strings, dicts and other json serializable objects in a panel.\n",
    "\n",
    "#### Parameters:\n",
    "\n",
    "For layout and styling related parameters see the [customization user guide](../../user_guide/Customization.ipynb).\n",
    "\n",
    "* **``depth``** (int): Depth to which the JSON structure is expanded on initialization (`depth=-1` indicates full expansion)\n",
    "* **``hover_preview``** (bool): Whether to enable hover preview for collapsed nodes \n",
    "* **``object``** (str or object): JSON string or JSON serializable object\n",
    "* **``theme``** (string): The color scheme, one of 'light' or 'dark'\n",
    "\n",
    "___"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `JSON` pane can be used to render a tree view of arbitrary JSON objects which may be defined as a string or a JSON-serializable Python object."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "json_obj = {\n",
    "    'boolean': False,\n",
    "    'dict': {'a': 1, 'b': 2, 'c': 3},\n",
    "    'int': 1,\n",
    "    'float': 3.1,\n",
    "    'list': [1, 2, 3],\n",
    "    'null': None,\n",
    "    'string': 'A string',\n",
    "}\n",
    "\n",
    "json = pn.pane.JSON(json_obj, name='JSON', height=300, width=500)\n",
    "\n",
    "json"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Controls\n",
    "\n",
    "The `JSON` pane exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.Row(json.controls(jslink=True), json)"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}