add documentation

main.py

@@ -402,7 +402,7 @@ def documentation_page() -> None:
 
 @ui.page('/documentation/{name}')
 async def documentation_page_more(name: str, client: Client) -> None:
-    if name in {'ag_grid', 'e_chart'}:
+    if name in {'ag_grid', 'e_chart', 'j_s_o_neditor'}:
         name = name.replace('_', '')  # NOTE: "AG Grid" leads to anchor name "ag_grid", but class is `ui.aggrid`
     module = importlib.import_module(f'website.more_documentation.{name}_documentation')
     more = getattr(module, 'more', None)

website/documentation.py

@@ -143,6 +143,7 @@ def create_full() -> None:
     load_demo(ui.scene)
     load_demo(ui.tree)
     load_demo(ui.log)
+    load_demo(ui.jsoneditor)
 
     heading('Layout')
 

website/more_documentation/jsoneditor_documentation.py

@@ -0,0 +1,17 @@
+from nicegui import ui
+
+
+def main_demo() -> None:
+    ui.jsoneditor(properties={'content': {
+        'json': {
+            'array': [1, 2, 3],
+            'boolean': True,
+            'color': '#82b92c',
+            None: None,
+            'number': 123,
+            'object': {'a': 'b', 'c': 'd'},
+            'time': 1575599819000,
+            'string': 'Hello World'
+        }}},
+        on_select=lambda e: ui.notify(f'Select: {e}'),
+        on_change=lambda e: ui.notify(f'Change: {e}')).classes('w-full')