diff --git a/doc/developer_guide/index.md b/doc/developer_guide/index.md
index b5890dc406..2e5dad6006 100644
--- a/doc/developer_guide/index.md
+++ b/doc/developer_guide/index.md
@@ -82,7 +82,7 @@ All available tasks can be found by running `pixi task list`, the following sect
 
 ### Editable install
 
-It can be advantageous to install the Panel in [editable mode](https://pip.pypa.io/en/stable/topics/local-project-installs/#editable-installs):
+It can be advantageous to install Panel in [editable mode](https://pip.pypa.io/en/stable/topics/local-project-installs/#editable-installs):
 
 ```bash
 pixi run install
@@ -97,6 +97,8 @@ Currently, this needs to be run for each environment. So, if you want to install
 pixi run -e test-ui install
 ```
 
+You can find the list of environments in the **pixi.toml** file.
+
 :::
 
 ## Linting
diff --git a/doc/explanation/components/reactive_html_components.md b/doc/explanation/components/reactive_html_components.md
index 4658d5511b..a74db5ef99 100644
--- a/doc/explanation/components/reactive_html_components.md
+++ b/doc/explanation/components/reactive_html_components.md
@@ -12,7 +12,7 @@ This page will walk you through using the `ReactiveHTML` class to craft custom c
 
 A *`ReactiveHTML` component* is essentially a class that you create by inheriting from the `ReactiveHTML` class. Within this custom class, you are required to define the `_template` attribute using HTML, which serves as the *design blueprint* for your custom component. You can use Javascript *template variables* `${...}` as well as Python [Jinja2](https://jinja.palletsprojects.com) syntax to make the template *dynamic*.
 
-Here is a basic `SlideShow` component
+Here is a basic `Slideshow` component
 
 ```{pyodide}
 import param
diff --git a/doc/how_to/custom_components/esm/callbacks.md b/doc/how_to/custom_components/esm/callbacks.md
index cf5247f90d..a2ffa5dac1 100644
--- a/doc/how_to/custom_components/esm/callbacks.md
+++ b/doc/how_to/custom_components/esm/callbacks.md
@@ -4,7 +4,7 @@ In this guide we will show you how to add callbacks to your ESM components.
 
 ## Slideshow with Python callback
 
-This example shows you how to create a `SlideShow` component that uses a Python *callback* function to update the `Slideshow` image when its clicked:
+This example shows you how to create a `Slideshow` component that uses a Python *callback* function to update the `Slideshow` image when its clicked:
 
 ```{pyodide}
 import param
diff --git a/doc/how_to/custom_components/esm/custom_layout.md b/doc/how_to/custom_components/esm/custom_layout.md
index d5ad7bc692..bc88360f70 100644
--- a/doc/how_to/custom_components/esm/custom_layout.md
+++ b/doc/how_to/custom_components/esm/custom_layout.md
@@ -1,8 +1,6 @@
 # Create Custom Layouts using ESM Components
 
-In this guide, we will demonstrate how to build custom, reusable layouts using [`JSComponent`](../../reference/panes/JSComponent.md) or [`ReactComponent`](../../reference/panes/ReactComponent.md).
-
-Please note that it is currently not possible to create layouts using the [`AnyWidgetComponent`](../../reference/panes/AnyWidgetComponent.md), as the underlying [`AnyWidget`](https://anywidget.dev/) API does not support this.
+In this guide, we will demonstrate how to build custom, reusable layouts using [`JSComponent`](../../reference/panes/JSComponent.md), [`ReactComponent`](../../reference/panes/ReactComponent.md) or [`AnyWidgetComponent`](../../reference/panes/AnyWidgetComponent.md).
 
 ## Layout Two Objects
 
@@ -89,11 +87,9 @@ split_js = SplitJS(
 )
 split_js.servable()
 ```
-
 :::
 
 :::{tab-item} `ReactComponent`
-
 ```{pyodide}
 import panel as pn
 
@@ -165,6 +161,90 @@ split_react.servable()
 ```
 :::
 
+:::{tab-item} `AnyWidgetComponent`
+```{pyodide}
+import panel as pn
+
+from panel.custom import Child, AnyWidgetComponent
+
+CSS = """
+.split {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    width: 100%;
+}
+
+.gutter {
+    background-color: #eee;
+    background-repeat: no-repeat;
+    background-position: 50%;
+}
+
+.gutter.gutter-horizontal {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
+    cursor: col-resize;
+}
+"""
+
+
+class SplitAnyWidget(AnyWidgetComponent):
+
+    left = Child()
+    right = Child()
+
+    _esm = """
+    import Split from 'https://esm.sh/split.js@1.6.5'
+
+    function render({ model, el }) {
+      const splitDiv = document.createElement('div');
+      splitDiv.className = 'split';
+
+      const split0 = document.createElement('div');
+      splitDiv.appendChild(split0);
+
+      const split1 = document.createElement('div');
+      splitDiv.appendChild(split1);
+
+      const split = Split([split0, split1])
+
+      model.on('remove', () => split.destroy())
+
+      split0.append(model.get_child("left"))
+      split1.append(model.get_child("right"))
+
+      el.appendChild(splitDiv)
+    }
+
+    export default {render}
+    """
+
+    _stylesheets = [CSS]
+
+
+pn.extension("codeeditor")
+
+split_anywidget = SplitAnyWidget(
+    left=pn.widgets.CodeEditor(
+        value="Left!",
+        sizing_mode="stretch_both",
+        margin=0,
+        theme="monokai",
+        language="python",
+    ),
+    right=pn.widgets.CodeEditor(
+        value="Right",
+        sizing_mode="stretch_both",
+        margin=0,
+        theme="monokai",
+        language="python",
+    ),
+    height=500,
+    sizing_mode="stretch_width",
+)
+split_anywidget.servable()
+```
+
 ::::
 
 Let's verify that the layout will automatically update when the `object` is changed.
@@ -172,6 +252,7 @@ Let's verify that the layout will automatically update when the `object` is chan
 ::::{tab-set}
 
 :::{tab-item} `JSComponent`
+
 ```{pyodide}
 split_js.right=pn.pane.Markdown("Hi. I'm a `Markdown` pane replacing the `CodeEditor` widget!", sizing_mode="stretch_both")
 ```
@@ -183,6 +264,14 @@ split_react.right=pn.pane.Markdown("Hi. I'm a `Markdown` pane replacing the `Cod
 ```
 :::
 
+:::
+
+:::{tab-item} `AnyWidgetComponent`
+```{pyodide}
+split_anywidget.right=pn.pane.Markdown("Hi. I'm a `Markdown` pane replacing the `CodeEditor` widget!", sizing_mode="stretch_both")
+```
+:::
+
 ::::
 
 Now, let's change it back:
@@ -213,6 +302,18 @@ split_react.right=pn.widgets.CodeEditor(
 ```
 :::
 
+:::{tab-item} `AnyWidgetComponent`
+```{pyodide}
+split_anywidget.right=pn.widgets.CodeEditor(
+    value="Right",
+    sizing_mode="stretch_both",
+    margin=0,
+    theme="monokai",
+    language="python",
+)
+```
+:::
+
 ::::
 
 ## Layout a List of Objects
@@ -362,20 +463,95 @@ grid_react = GridReact(
 )
 grid_react.servable()
 ```
+
+You must list `ListLike, ReactComponent` in exactly that order when you define the class! Reversing the order to `ReactComponent, ListLike` will not work.
 :::
 
-::::
+:::{tab-item} `AnyWidgetComponent`
+```{pyodide}
+import panel as pn
+import param
 
-:::{note}
-You must list `ListLike, ReactComponent` in exactly that order when you define the class! Reversing the order to `ReactComponent, ListLike` will not work.
+from panel.custom import AnyWidgetComponent
+
+from panel.layout.base import ListLike
+
+CSS = """
+.gutter {
+    background-color: #eee;
+    background-repeat: no-repeat;
+    background-position: 50%;
+}
+.gutter.gutter-vertical {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
+    cursor: row-resize;
+}
+"""
+
+
+class GridAnyWidget(ListLike, AnyWidgetComponent):
+
+    _esm = """
+    import Split from 'https://esm.sh/split.js@1.6.5'
+
+    function render({ model, el}) {
+      const objects = model.get_child("objects")
+
+      const splitDiv = document.createElement('div');
+      splitDiv.className = 'split';
+      splitDiv.style.height = `calc(100% - ${(objects.length - 1) * 10}px)`;
+
+      let splits = [];
+
+      objects.forEach((object, index) => {
+        const split = document.createElement('div');
+        splits.push(split)
+
+        splitDiv.appendChild(split);
+        split.appendChild(object);
+      })
+
+      Split(splits, {direction: 'vertical'})
+
+      el.appendChild(splitDiv);
+    }
+    export default {render}
+    """
+
+    _stylesheets = [CSS]
+
+
+pn.extension("codeeditor")
+
+grid_anywidget = GridAnyWidget(
+    pn.widgets.CodeEditor(
+        value="I love beatboxing\n" * 10, theme="monokai", sizing_mode="stretch_both"
+    ),
+    pn.panel(
+        "https://upload.wikimedia.org/wikipedia/commons/d/d3/Beatboxset1_pepouni.ogg",
+        sizing_mode="stretch_width",
+        height=100,
+    ),
+    pn.widgets.CodeEditor(
+        value="Yes, I do!\n" * 10, theme="monokai", sizing_mode="stretch_both"
+    ),
+    styles={"border": "2px solid lightgray"},
+    height=800,
+    width=500,
+    sizing_mode="fixed",
+).servable()
+```
+
+You must list `ListLike, AnyWidgetComponent` in exactly that order when you define the class! Reversing the order to `AnyWidgetComponent, ListLike` will not work.
 :::
 
+::::
+
 You can now use `[...]` indexing and methods like `.append`, `.insert`, `pop`, etc., as you would expect:
 
 ::::{tab-set}
 
 :::{tab-item} `JSComponent`
-
 ```{pyodide}
 grid_js.append(
     pn.widgets.CodeEditor(
@@ -399,6 +575,18 @@ grid_react.append(
 ```
 :::
 
+:::{tab-item} `AnyWidgetComponent`
+```{pyodide}
+grid_anywidget.append(
+    pn.widgets.CodeEditor(
+        value="Another one bites the dust\n" * 10,
+        theme="monokai",
+        sizing_mode="stretch_both",
+    )
+)
+```
+:::
+
 ::::
 
 Let's remove it again:
@@ -417,4 +605,10 @@ grid_react.pop(-1)
 ```
 :::
 
+:::{tab-item} `AnyWidgetComponent`
+```{pyodide}
+grid_anywidget.pop(-1)
+```
+:::
+
 ::::
diff --git a/doc/how_to/custom_components/esm/custom_widgets.md b/doc/how_to/custom_components/esm/custom_widgets.md
index 279b77662a..d3a91e6992 100644
--- a/doc/how_to/custom_components/esm/custom_widgets.md
+++ b/doc/how_to/custom_components/esm/custom_widgets.md
@@ -97,8 +97,8 @@ export function render({ model }) {
     const [image] = model.useState("image");
 
     return (
-    <button onClick={e => setClicks(clicks+1)} class="pn-container center-content">
-        <img src={image} class="image-size" src={ image }/>
+    <button onClick={e => setClicks(clicks+1)} className="pn-container center-content">
+        <img src={image} className="image-size" src={ image }/>
     </button>
     )
 }
@@ -129,7 +129,7 @@ export function render({ model }) {
 button = ImageButton(
     image="https://panel.holoviz.org/_static/logo_stacked.png",
     styles={"border": "2px solid lightgray"},
-    width=400, height=200
+    width=400
 )
 pn.Column(button, button.param.clicks).servable()
 ```
@@ -141,6 +141,7 @@ import panel as pn
 import param
 
 from panel.custom import AnyWidgetComponent
+from panel.widgets import WidgetBase
 
 pn.extension()
 
@@ -208,7 +209,7 @@ pn.Column(button, button.param.clicks).servable()
 
 If you don't want the *button* styling, you can change the `<button>` tag to a `<div>` tag.
 
-The `ImageButton` now works as any other widget. Lets try the `.from_param` method to create a `ImageButton` from a `param` class.
+The `ImageButton` now works as any other widget. Lets try the `.from_param` method to create an `ImageButton` from a `Parameter:
 
 ```{pyodide}
 class MyClass(param.Parameterized):
@@ -223,7 +224,7 @@ class MyClass(param.Parameterized):
             self.clicks += 1
 
 my_instance = MyClass()
-button2 = ImageButton.from_param(my_instance.param.value)
+button2 = ImageButton.from_param(my_instance.param.value, image="https://panel.holoviz.org/_static/logo_stacked.png",)
 pn.Column(button2, my_instance.param.clicks).servable()
 ```
 
diff --git a/doc/how_to/custom_components/esm/dataframe.md b/doc/how_to/custom_components/esm/dataframe.md
index a5156aca78..39559403e4 100644
--- a/doc/how_to/custom_components/esm/dataframe.md
+++ b/doc/how_to/custom_components/esm/dataframe.md
@@ -18,8 +18,6 @@ class GridJS(JSComponent):
 
     object = param.DataFrame()
 
-    _extension_name = 'gridjs'
-
     _esm = """
     import * as gridjs from "https://esm.sh/gridjs@6.2.0"
 
@@ -86,8 +84,6 @@ class GridJS(ReactComponent):
 
     object = param.DataFrame()
 
-    _extension_name = 'gridjs'
-
     _esm = """
 	import { useEffect, useState } from "react"
     import { Grid } from "https://esm.sh/gridjs-react@6.1.1"
diff --git a/doc/how_to/custom_components/examples/esm_leaflet.md b/doc/how_to/custom_components/examples/esm_leaflet.md
index e45fcd3c7f..5e0f457442 100644
--- a/doc/how_to/custom_components/examples/esm_leaflet.md
+++ b/doc/how_to/custom_components/examples/esm_leaflet.md
@@ -81,8 +81,6 @@ class LeafletHeatMap(JSComponent):
     }"""
 
     _stylesheets = ['https://unpkg.com/leaflet@1.7.1/dist/leaflet.css']
-
-pn.extension(template='bootstrap')
 ```
 
 Some of the concepts this component demonstrates:
@@ -95,6 +93,8 @@ Some of the concepts this component demonstrates:
 Now let's try this component:
 
 ```{pyodide}
+pn.extension(template='bootstrap')
+
 url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv"
 
 earthquakes = pd.read_csv(url)
diff --git a/doc/how_to/custom_components/index.md b/doc/how_to/custom_components/index.md
index 389e9c9dd7..c709301ad6 100644
--- a/doc/how_to/custom_components/index.md
+++ b/doc/how_to/custom_components/index.md
@@ -53,12 +53,13 @@ examples/table_viewer
 
 ## ESM Components
 
-Build custom components in Javascript using so called ESM components, which allow you to write components that automatically sync parameter state between Python and JS. ESM components can be written in pure JS, using React or using the AnyWidget specification.
+Build custom components in Javascript using so called ESM components, which allow you to write components that automatically sync parameter state between Python and JS. ESM components can be written in pure JavaScript, using [React](https://react.dev/) or using the [AnyWidget](https://anywidget.dev/) specification.
+
+ESM Components is our 2nd generation api for custom components while `ReactiveHTML` is our 1st generation. We recommend using ESM Components over `ReactiveHTML`.
 
 ::::{grid} 1 2 2 3
 :gutter: 1 1 1 2
 
-
 :::{grid-item-card} {octicon}`tools;2.5em;sd-mr-1 sd-animate-grow50` Compile and Bundle ESM Components
 :link: esm/build
 :link-type: doc
@@ -73,6 +74,13 @@ How to specify external dependencies for ESM components and compile them into JS
 How to add both JS and Python based callbacks to ESM components.
 :::
 
+:::{grid-item-card} {octicon}`image;2.5em;sd-mr-1 sd-animate-grow50` Panes
+:link: esm/custom_panes
+:link-type: doc
+
+How to create panes using ESM components
+:::
+
 :::{grid-item-card} {octicon}`pencil;2.5em;sd-mr-1 sd-animate-grow50` Create Custom Widgets
 :link: esm/custom_widgets
 :link-type: doc
@@ -84,19 +92,19 @@ How to create a custom widget using ESM components
 :link: esm/custom_layout
 :link-type: doc
 
-How to create a custom layout using ESM components
+How to create custom layouts using ESM components
 :::
 
-:::{grid-item-card} {octicon}`table;2.5em;sd-mr-1 sd-animate-grow50` Render a `DataFrame`
+:::{grid-item-card} {octicon}`table;2.5em;sd-mr-1 sd-animate-grow50` DataFrame
 :link: esm/dataframe
 :link-type: doc
 
-How to create `JSComponent`s and `ReactComponent`s that render data in a DataFrame.
+How to create ESM components that render data a DataFrame.
 :::
 
 ::::
 
-### Examples
+### ESM Examples
 
 ::::{grid} 1 2 2 3
 :gutter: 1 1 1 2
@@ -197,12 +205,13 @@ How to create input widgets using `ReactiveHTML`
 :link: reactive_html/reactive_html_dataframe
 :link-type: doc
 
-How to create components using `ReactiveHTML` and a DataFrame parameter
+How to create `ReactiveHTML` components that render data a DataFrame.
+
 :::
 
 ::::
 
-### Examples
+### `ReactiveHTML` Examples
 
 ::::{grid} 1 2 2 3
 :gutter: 1 1 1 2
diff --git a/doc/how_to/custom_components/reactive_html/reactive_html_callbacks.md b/doc/how_to/custom_components/reactive_html/reactive_html_callbacks.md
index 8a637146f9..020d157979 100644
--- a/doc/how_to/custom_components/reactive_html/reactive_html_callbacks.md
+++ b/doc/how_to/custom_components/reactive_html/reactive_html_callbacks.md
@@ -30,7 +30,7 @@ This approach lets you quickly build custom HTML components with complex interac
 
 ## Slideshow with Javascript Callback
 
-This example shows you how to create a `SlideShow` component that uses a Javascript *callback* function to update the `SlideShow` image when its clicked:
+This example shows you how to create a `Slideshow` component that uses a Javascript *callback* function to update the `Slideshow` image when its clicked:
 
 ```{pyodide}
 import param
diff --git a/doc/how_to/migrate/anywidget/index.md b/doc/how_to/migrate/anywidget/index.md
index 5f6d8b14e6..3b9655aab3 100644
--- a/doc/how_to/migrate/anywidget/index.md
+++ b/doc/how_to/migrate/anywidget/index.md
@@ -1,14 +1,14 @@
 # Converting from AnyWidget to Panel
 
-This guide addresses how to convert [AnyWidget](https://anywidget.dev/) widgets to custom Panel widgets.
+This guide addresses how to convert [AnyWidget](https://anywidget.dev/) widgets to custom `JSComponent` or `ReactComponent` widgets.
 
 Please note that AnyWidget widgets are [`ipywidgets`](https://ipywidgets.readthedocs.io/en/stable/) and can be used directly in Panel via the [`IpyWidgets`](../../reference/panes/IPyWidget.ipynb) pane and the `Traitlets` `@observe` API without a conversion. We recommend trying this option first. If it does not work for your use case, please consider contributing to the existing `AnyWidget` before converting it to a Panel widget.
 
 Some reasons you might still want to convert an `AnyWidget` to a custom Panel widget are:
 
-- Familiar and Optimized API: This enables your and your users to use the familiar `Param` parameter API for which Panel is optimized.
-- Customization: You might want to use the `AnyWidget` as a starting point and customize it to your exact needs.
-- Efficiency: You users avoid loading  `AnyWidget`/`ipywidgets` JavaScript libraries which ANECDOTALLY is not insignificant. Your users also avoid the overhead of converting between `Param/Panel/Bokeh` and `Traitlets`/`AnyWidget`/`ipywidgets` objects: ANECDOTALLY, Panel (i.e., Bokeh) utilizes faster serialization and deserialization methods and formats. IS THIS TRUE, PHILIPP? ALSO, WHEN USING THE ANYWIDGET ON THE BOKEH SERVER? DO WE HAVE NUMBERS FOR THIS?
+- **Familiar and Optimized API**: This enables you and your users to use the familiar `Param` parameter API for which Panel is optimized.
+- **Customization**: You might want to use the `AnyWidget` as a starting point and customize it to your exact needs.
+- **Efficiency**: You users avoid loading  `AnyWidget`/`ipywidgets` JavaScript libraries which ANECDOTALLY is not insignificant. Your users also avoid the overhead of converting between `Param/Panel/Bokeh` and `Traitlets`/`AnyWidget`/`ipywidgets` objects: ANECDOTALLY, Panel (i.e., Bokeh) utilizes faster serialization and deserialization methods and formats. IS THIS TRUE, PHILIPP? ALSO, WHEN USING THE ANYWIDGET ON THE BOKEH SERVER? DO WE HAVE NUMBERS FOR THIS?
 
 ## Conversion Steps
 
@@ -18,7 +18,7 @@ The high-level steps needed for converting `AnyWidgets` components to Panel comp
 
 #### Step 1: Base Class Conversion
 
-Convert from the `AnyWidget` base class to the Panel [`JSComponent`](../../reference/panes/JSComponent.md) base class. If the `_esm` script is based on [React](https://react.dev/), use the [`ReactComponent`](../../reference/panes/ReactComponent.md). For [Preact](https://preactjs.com/), use the [`PreactComponent`](../../reference/panes/JSComponent.md).
+Convert from the `AnyWidget` base class to the Panel [`JSComponent`](../../reference/panes/JSComponent.ipynb) base class. If the `_esm` script is based on [React](https://react.dev/), use the [`ReactComponent`](../../reference/panes/ReactComponent.ipynb).
 
 #### Step 2: Attribute Conversion
 
@@ -49,9 +49,9 @@ Their methods are also different reflecting differences between Traitlets and Pa
 
 | AnyWidget | Panel/ Bokeh |
 | --------- | ----- |
-| `model.get('some_value')` | `data.some_value`|
-| `model.save('some_value', 1)`<br>`model.save_changes()` | `data.some_value = 1`|
-| `model.on("change:some_value", () => {...})` | `data.on('change: some_value', () => {...}))` |
+| `model.get('some_value')` | `model.some_value`|
+| `model.save('some_value', 1)`<br>`model.save_changes()` | `model.some_value = 1`|
+| `model.on("change:some_value", () => {...})` | `model.on('change: some_value', () => {...}))` |
 
 ### Convert React Code
 
@@ -99,7 +99,7 @@ class CounterWidget(anywidget.AnyWidget):
     """
 ```
 
-#### Panel `CounterWidget`
+#### Panel JS `CounterWidget`
 
 ```{pyodide}
 import panel as pn
@@ -121,7 +121,7 @@ class CounterButton(JSComponent):
       btn.addEventListener("click", () => {
           model.value += 1
       });
-      data.on('change:value', () => {
+      model.on('change:value', () => {
         btn.innerHTML = `count is ${model.value}`;
       })
       return btn
@@ -134,16 +134,10 @@ CounterButton().servable()
 
 :::{note}
 
-With Panel you may replace the lines `export function render({ data })` and `return btn` with the lines `export function render({ data, el })` and `el.appendChild(btn)`, if you want to minimize the number of changes.
+With Panel you may replace the lines `export function render({ model })` and `return btn` with the lines `export function render({ model, el })` and `el.appendChild(btn)`, if you want to minimize the number of changes.
 
 :::
 
-### React Counter Widget
-
-#### AnyWidget React `CounterWidget`
-
-To be determined (TBD).
-
 #### Panel React `CounterWidget`
 
 ```{pyodide}
diff --git a/doc/how_to/param/custom.md b/doc/how_to/param/custom.md
index 34bd872ef6..ebad91206b 100644
--- a/doc/how_to/param/custom.md
+++ b/doc/how_to/param/custom.md
@@ -49,7 +49,6 @@ pn.Param(CustomExample.param, widgets={
 
 However it is also possible to explicitly construct a widget from a parameter using the `.from_param` method, which makes it easy to override widget settings using keyword arguments:
 
-
 ```{pyodide}
 pn.widgets.RadioBoxGroup.from_param(CustomExample.param.select_string, inline=True)
 ```
@@ -58,7 +57,6 @@ pn.widgets.RadioBoxGroup.from_param(CustomExample.param.select_string, inline=Tr
 
 By default, a param Pane has a title that is derived from the class name of its `Parameterized` object. Using the ``name`` keyword we can set any title to the pane, e.g. to improve the user interface.
 
-
 ```{pyodide}
 pn.Param(CustomExample.param, name="Custom Name")
 ```
@@ -67,14 +65,12 @@ pn.Param(CustomExample.param, name="Custom Name")
 
 You can sort the widgets alphabetically by setting `sort=True`
 
-
 ```{pyodide}
 pn.Param(CustomExample.param, sort=True, name="Sort by Label Example")
 ```
 
 You can also specify a custom sort function that takes the (parameter name, Parameter instance) as input.
 
-
 ```{pyodide}
 def sort_func(x):
     return len(x[1].label)
diff --git a/doc/tutorials/basic/layouts.md b/doc/tutorials/basic/layouts.md
index 6a911a235b..f9e65c508c 100644
--- a/doc/tutorials/basic/layouts.md
+++ b/doc/tutorials/basic/layouts.md
@@ -1,4 +1,4 @@
-# Layouts Content
+# Layout Content
 
 Welcome to our guide on layouting Python objects, including Panel components! Let's dive into arranging your content in a visually appealing and organized manner.
 
diff --git a/doc/tutorials/expert/custom_anywidget_components.md b/doc/tutorials/expert/custom_anywidget_components.md
new file mode 100644
index 0000000000..6479944163
--- /dev/null
+++ b/doc/tutorials/expert/custom_anywidget_components.md
@@ -0,0 +1,245 @@
+# Creating a `MarioButton` with `JSComponent`
+
+In this tutorial we will build a *[Mario](https://mario.nintendo.com/) style button* with sounds and animations using the [`AnyWidgetComponent`](../../reference/custom/AnyWidgetComponent.md) feature in Panel. It aims to help you learn how to push the boundaries of what can be achieved with HoloViz Panel by creating advanced components using modern JavaScript and CSS technologies.
+
+![Mario chime button](https://assets.holoviz.org/panel/tutorials/ipymario.gif)
+
+This tutorial draws heavily on the great [`ipymario` video and tutorial](https://youtu.be/oZhyilx3gqI?si=dFPFiHua4TuuqCpu) by [Trevor Manz](https://github.com/manzt).
+
+## Overview
+
+We'll build a `MarioButton` that displays a pixelated Mario icon and plays a chime sound when clicked. The button will also have customizable parameters for gain, duration, size, and animation, showcasing the powerful capabilities of `AnyWidgetComponent`.
+
+### Prerequisites
+
+Ensure you have HoloViz Panel installed:
+
+```sh
+pip install panel watchfiles
+```
+
+## Step 1: Define the `MarioButton` Component
+
+We'll start by defining the Python class for the `MarioButton` component, including its parameters and rendering logic.
+
+Create a file named `mario_button.py`:
+
+```python
+import numpy as np
+import param
+from panel.custom import AnyWidgetComponent
+import panel as pn
+
+colors = {
+    "O": [0, 0, 0, 255],
+    "X": [247, 82, 0, 255],
+    " ": [247, 186, 119, 255],
+}
+
+# fmt: off
+box = [
+    ['O', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'O'],
+    ['X', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'O'],
+    ['X', ' ', 'O', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'O', ' ', 'O'],
+    ['X', ' ', ' ', ' ', ' ', 'X', 'X', 'X', 'X', 'X', ' ', ' ', ' ', ' ', ' ', 'O'],
+    ['X', ' ', ' ', ' ', 'X', 'X', 'O', 'O', 'O', 'X', 'X', ' ', ' ', ' ', ' ', 'O'],
+    ['X', ' ', ' ', ' ', 'X', 'X', 'O', ' ', ' ', 'X', 'X', 'O', ' ', ' ', ' ', 'O'],
+    ['X', ' ', ' ', ' ', 'X', 'X', 'O', ' ', ' ', 'X', 'X', 'O', ' ', ' ', ' ', 'O'],
+    ['X', ' ', ' ', ' ', ' ', 'O', 'O', ' ', 'X', 'X', 'X', 'O', ' ', ' ', ' ', 'O'],
+    ['X', ' ', ' ', ' ', ' ', ' ', ' ', 'X', 'X', 'O', 'O', 'O', ' ', ' ', ' ', 'O'],
+    ['X', ' ', ' ', ' ', ' ', ' ', ' ', 'X', 'X', 'O', ' ', ' ', ' ', ' ', ' ', 'O'],
+    ['X', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'O', 'O', ' ', ' ', ' ', ' ', ' ', 'O'],
+    ['X', ' ', ' ', ' ', ' ', ' ', ' ', 'X', 'X', ' ', ' ', ' ', ' ', ' ', ' ', 'O'],
+    ['X', ' ', ' ', ' ', ' ', ' ', ' ', 'X', 'X', 'O', ' ', ' ', ' ', ' ', ' ', 'O'],
+    ['X', ' ', 'O', ' ', ' ', ' ', ' ', ' ', 'O', 'O', ' ', ' ', ' ', 'O', ' ', 'O'],
+    ['X', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'O'],
+    ['O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O'],
+]
+# fmt: on
+
+np_box = np.array([[colors[c] for c in row] for row in box], dtype=np.uint8)
+np_box_as_list = [[[int(z) for z in y] for y in x] for x in np_box.tolist()]
+
+class MarioButton(AnyWidgetComponent):
+
+    _esm = "mario_button.js"
+    _stylesheets = ["mario_button.css"]
+
+    _box = param.List(np_box_as_list)
+    gain = param.Number(0.1, bounds=(0.1, 1.0), step=0.1)
+    duration = param.Number(1.0, bounds=(0.5, 2), step=0.5,)
+    size = param.Integer(100, bounds=(10, 1000), step=10)
+    animate = param.Boolean(True)
+
+    margin = param.Integer(10)
+
+if pn.state.served:
+    button = MarioButton()
+    parameters = pn.Param(
+        button, parameters=["gain", "duration", "size", "animate"]
+    )
+    settings=pn.Column(parameters, "Credits: Trevor Manz")
+    pn.FlexBox(settings, button).servable()
+```
+
+### Explanation - Python
+
+- **`_esm`**: Specifies the path to the JavaScript file for the component.
+- **`_stylesheets`**: Specifies the path to the CSS file for styling the component.
+- **`_box`**: A parameter representing the pixel data for the Mario icon.
+- **`gain`, `duration`, `size`, `animate`**: Parameters for customizing the button's behavior.
+- **`pn.Param`**: Creates a Panel widget to control the parameters.
+
+## Step 2: Define the JavaScript for the `MarioButton`
+
+Create a file named `mario_button.js`:
+
+```javascript
+/**
+ * Plays a Mario chime sound with the specified gain and duration.
+ * @see {@link https://twitter.com/mbostock/status/1765222176641437859}
+ */
+function chime({ gain, duration }) {
+  let c = new AudioContext();
+  let g = c.createGain();
+  let o = c.createOscillator();
+  let of = o.frequency;
+  g.connect(c.destination);
+  g.gain.value = gain;
+  g.gain.linearRampToValueAtTime(0, duration);
+  o.connect(g);
+  o.type = "square";
+  of.setValueAtTime(988, 0);
+  of.setValueAtTime(1319, 0.08);
+  o.start();
+  o.stop(duration);
+}
+
+function createCanvas(model) {
+  let size = () => `${model.get('size')}px`;
+  let canvas = document.createElement("canvas");
+  canvas.width = 16;
+  canvas.height = 16;
+  canvas.style.width = size();
+  canvas.style.height = size();
+  return canvas;
+}
+
+function drawImageData(canvas, pixelData) {
+  const flattenedData = pixelData.flat(2);
+  const imageDataArray = new Uint8ClampedArray(flattenedData);
+  const imgData = new ImageData(imageDataArray, 16, 16);
+
+  let ctx = canvas.getContext("2d");
+  ctx.imageSmoothingEnabled = false;
+  ctx.putImageData(imgData, 0, 0);
+}
+
+function addClickListener(canvas, model) {
+  canvas.addEventListener("click", () => {
+    chime({
+      gain: model.get('gain'),
+      duration: model.get('duration'),
+    });
+    if (model.get('animate')) {
+      canvas.style.animation = "none";
+      setTimeout(() => {
+        canvas.style.animation = "ipymario-bounce 0.2s";
+      }, 10);
+    }
+  });
+}
+
+function addResizeWatcher(canvas, model) {
+  model.on('change:size', () => {
+    let size = () => `${model.get('size')}px`;
+    canvas.style.width = size();
+    canvas.style.height = size();
+  });
+}
+
+function render({ model, el }) {
+  let canvas = createCanvas(model);
+  drawImageData(canvas, model.get('_box'));
+  addClickListener(canvas, model);
+  addResizeWatcher(canvas, model);
+
+  el.classList.add("ipymario");
+  el.appendChild(canvas)
+}
+export default {render};
+```
+
+### Explanation - JavaScript
+
+- **`chime`**: A function that generates the Mario chime sound using the Web Audio API.
+- **`render`**: The main function that renders the button, sets up the canvas, handles click events, and manages parameter changes.
+
+## Step 3: Define the CSS for the `MarioButton`
+
+Create a file named `mario_button.css`:
+
+```css
+.ipymario > canvas {
+    animation-fill-mode: both;
+    image-rendering: pixelated; /* Ensures the image stays pixelated */
+    image-rendering: crisp-edges; /* For additional support in some browsers */
+}
+
+@keyframes ipymario-bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-12px); }
+}
+```
+
+### Explanation - CSS
+
+- **`.ipymario > canvas`**: Styles the canvas to ensure the Mario icon remains pixelated.
+- **`@keyframes ipymario-bounce`**: Defines the bounce animation for the button when clicked.
+
+## Step 4: Serve the Application
+
+To serve the application, run the following command in your terminal:
+
+```sh
+panel serve mario_button.py --autoreload
+```
+
+This command will start a Panel server and automatically reload changes as you edit the files.
+
+The result should look like this:
+
+<video muted controls loop poster="https://assets.holoviz.org/panel/tutorials/mario_button.png" style="max-height: 400px; max-width: 100%;">
+    <source src="https://assets.holoviz.org/panel/tutorials/mario_button.mp4" type="video/mp4">
+    Your browser does not support the video tag.
+</video>
+
+You'll have to turn on the sound to hear the chime.
+
+## Step 4: Develop the Application with Autoreload
+
+When you save your `.py`, `.js` or `.css` file, the Panel server will automatically reload the changes. This feature is called *auto reload* or *hot reload*.
+
+Try changing `"ipymario-bounce 0.2s"` in the `mario_button.js` file to `"ipymario-bounce 2s"` and save the file. The Panel server will automatically reload the changes.
+
+Try clicking the button to see the button bounce more slowly.
+
+## Conclusion
+
+You've now created a custom `MarioButton` component using  [`AnyWidgetComponent`](../../reference/panes/AnyWidgetComponent.md) in HoloViz Panel. This button features a pixelated Mario icon, plays a chime sound when clicked, and has customizable parameters for gain, duration, size, and animation.
+
+## References
+
+### Tutorials
+
+- [Build Custom Components](../../how_to/custom_components/esm/custom_layout.md)
+
+### How-To Guides
+
+- [Convert `AnyWidget` widgets](../../how_to/migrate/anywidget/index.md)
+
+### Reference Guides
+
+- [`AnyWidgetComponent`](../../reference/panes/AnyWidgetComponent.md)
+- [`JSComponent`](../../reference/panes/JSComponent.md)
+- [`ReactComponent`](../../reference/panes/ReactComponent.md)
diff --git a/doc/tutorials/expert/custom_components.md b/doc/tutorials/expert/custom_js_components.md
similarity index 91%
rename from doc/tutorials/expert/custom_components.md
rename to doc/tutorials/expert/custom_js_components.md
index f057c041b1..ce27132160 100644
--- a/doc/tutorials/expert/custom_components.md
+++ b/doc/tutorials/expert/custom_js_components.md
@@ -4,7 +4,7 @@ In this tutorial we will build a *[Mario](https://mario.nintendo.com/) style but
 
 ![Mario chime button](https://assets.holoviz.org/panel/tutorials/ipymario.gif)
 
-This tutorial draws heavily on the great [`ipymario` tutorial](https://youtu.be/oZhyilx3gqI?si=dFPFiHua4TuuqCpu) by [Trevor Manzt](https://github.com/manzt).
+This tutorial draws heavily on the great [`ipymario` tutorial](https://youtu.be/oZhyilx3gqI?si=dFPFiHua4TuuqCpu) by [Trevor Manz](https://github.com/manzt).
 
 ## Overview
 
@@ -78,7 +78,7 @@ if pn.state.served:
     parameters = pn.Param(
         button, parameters=["gain", "duration", "size", "animate"]
     )
-    settings=pn.Column(parameters, "Credits: Trevor Mantz")
+    settings=pn.Column(parameters, "Credits: Trevor Manz")
     pn.FlexBox(settings, button).servable()
 ```
 
@@ -115,8 +115,8 @@ function chime({ gain, duration }) {
   o.stop(duration);
 }
 
-function createCanvas(data) {
-  let size = () => `${data.size}px`;
+function createCanvas(model) {
+  let size = () => `${model.size}px`;
   let canvas = document.createElement("canvas");
   canvas.width = 16;
   canvas.height = 16;
@@ -135,13 +135,13 @@ function drawImageData(canvas, pixelData) {
   ctx.putImageData(imgData, 0, 0);
 }
 
-function addClickListener(canvas, data) {
+function addClickListener(canvas, model) {
   canvas.addEventListener("click", () => {
     chime({
-      gain: data.gain,
-      duration: data.duration,
+      gain: model.gain,
+      duration: model.duration,
     });
-    if (data.animate) {
+    if (model.animate) {
       canvas.style.animation = "none";
       setTimeout(() => {
         canvas.style.animation = "ipymario-bounce 0.2s";
@@ -150,20 +150,19 @@ function addClickListener(canvas, data) {
   });
 }
 
-function addResizeWatcher(canvas, data) {
-  data.on('size', () => {
-    let size = () => `${data.size}px`;
+function addResizeWatcher(canvas, model) {
+  model.on('size', () => {
+    let size = () => `${model.size}px`;
     canvas.style.width = size();
     canvas.style.height = size();
-    console.log("resized");
   });
 }
 
-export function render({ data, el }) {
-  let canvas = createCanvas(data);
-  drawImageData(canvas, data._box);
-  addClickListener(canvas, data);
-  addResizeWatcher(canvas, data);
+export function render({ model, el }) {
+  let canvas = createCanvas(model);
+  drawImageData(canvas, model._box);
+  addClickListener(canvas, model);
+  addResizeWatcher(canvas, model);
 
   el.classList.add("ipymario");
   return canvas;
@@ -232,7 +231,7 @@ You've now created a custom `MarioButton` component using  [`JSComponent`](../..
 
 ### Tutorials
 
-- [Build Custom Components](../../how_to/custom_components/reactive_esm/reactive_esm_layout.md)
+- [Build Custom Components](../../how_to/custom_components/esm/custom_layout.md)
 
 ### How-To Guides
 
@@ -240,6 +239,6 @@ You've now created a custom `MarioButton` component using  [`JSComponent`](../..
 
 ### Reference Guides
 
+- [`AnyWidgetComponent`](../../reference/panes/AnyWidgetComponent.md)
 - [`JSComponent`](../../reference/panes/JSComponent.md)
 - [`ReactComponent`](../../reference/panes/ReactComponent.md)
-- [`PreactComponent`](../../reference/panes/PreactComponent.md)
diff --git a/doc/tutorials/expert/index.md b/doc/tutorials/expert/index.md
index baa1680585..165c62513d 100644
--- a/doc/tutorials/expert/index.md
+++ b/doc/tutorials/expert/index.md
@@ -8,7 +8,8 @@ We will assume you have an *intermediate skill level* corresponding to the what
 
 ## Extend Panel
 
-- **[Develop Custom Components](./custom_components.md)**: Use `JSComponent` to build advanced components utilizing  modern JavaScript and CSS technologies.
+- **[Develop Custom AnyWidgetComponents](./custom_anywidget_components.md)**: Use `AnyWidgetComponent` to build advanced components utilizing modern JavaScript and CSS technologies.
+- **[Develop Custom JSComponents](./custom_js_components.md)**: Use `JSComponent` to build advanced components utilizing modern JavaScript and CSS technologies.
 - **Develop Custom Bokeh models**:
 - **Customizing Panel for your brand**:
 
@@ -17,5 +18,6 @@ We will assume you have an *intermediate skill level* corresponding to the what
 :hidden:
 :maxdepth: 2
 
-custom_components
+custom_anywidget_components
+custom_js_components
 ```
diff --git a/examples/reference/chat/ChatAreaInput.ipynb b/examples/reference/chat/ChatAreaInput.ipynb
index 5ea2880622..ca80644a21 100644
--- a/examples/reference/chat/ChatAreaInput.ipynb
+++ b/examples/reference/chat/ChatAreaInput.ipynb
@@ -32,12 +32,12 @@
     "\n",
     "#### Parameters:\n",
     "\n",
-    "For layout and styling related parameters see the [customization user guide](../../user_guide/Customization.ipynb).\n",
+    "For layout and styling-related parameters see the [Control the size](../../tutorials/basic/size.md), [Align Content](../../tutorials/basic/align.md) and [Style](../../tutorials/basic/style.md) tutorials.\n",
     "\n",
     "##### Core\n",
     "\n",
     "* **``disabled_enter``** (bool): If True, disables sending the message by pressing the `enter_sends` key.\n",
-    "* **``enter_sends``** (bool): If True, pressing the Enter key sends the message, if False it is sent by pressing the Ctrl-Enter. Defaults to True.",
+    "* **``enter_sends``** (bool): If True, pressing the Enter key sends the message, if False it is sent by pressing the Ctrl-Enter. Defaults to True.\n",
     "* **``value``** (str): The value when the \"Enter\" or \"Ctrl-Enter\" key is pressed. Only to be used with `watch` or `bind` because the `value` resets to `\"\"` after the message is sent; use `value_input` instead to access what's currently available in the text input box.\n",
     "* **``value_input``** (str): The current value updated on every key press.\n",
     "\n",
diff --git a/examples/reference/chat/ChatMessage.ipynb b/examples/reference/chat/ChatMessage.ipynb
index 2bfeb78814..9315925a0e 100644
--- a/examples/reference/chat/ChatMessage.ipynb
+++ b/examples/reference/chat/ChatMessage.ipynb
@@ -36,7 +36,7 @@
     "\n",
     "#### Parameters:\n",
     "\n",
-    "For layout and styling related parameters see the [customization user guide](../../user_guide/Customization.ipynb).\n",
+    "For layout and styling-related parameters see the [Control the size](../../tutorials/basic/size.md), [Align Content](../../tutorials/basic/align.md) and [Style](../../tutorials/basic/style.md) tutorials.\n",
     "\n",
     "##### Core\n",
     "\n",
diff --git a/examples/reference/custom_components/AnyWidgetComponent.ipynb b/examples/reference/custom_components/AnyWidgetComponent.ipynb
index 3e410dda70..835a16569d 100644
--- a/examples/reference/custom_components/AnyWidgetComponent.ipynb
+++ b/examples/reference/custom_components/AnyWidgetComponent.ipynb
@@ -17,7 +17,9 @@
    "id": "9908a714-692d-4513-aca8-b251a627cae4",
    "metadata": {},
    "source": [
-    "Panel's `AnyWidgetComponent` class simplifies the creation of custom Panel components using the [`AnyWidget`](https://anywidget.dev/) JavaScript API."
+    "Panel's `AnyWidgetComponent` class simplifies the creation of custom Panel components using the [`AnyWidget`](https://anywidget.dev/) JavaScript API.\n",
+    "\n",
+    "This allows the Panel and Jupyter communities to collaborate and share JavaScript code for widgets."
    ]
   },
   {
@@ -27,16 +29,13 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "import panel as pn\n",
     "import param\n",
-    "\n",
+    "import panel as pn\n",
     "from panel.custom import AnyWidgetComponent\n",
     "\n",
+    "pn.extension()\n",
     "\n",
-    "class CounterButton(AnyWidgetComponent):\n",
-    "\n",
-    "    value = param.Integer()\n",
-    "\n",
+    "class CounterWidget(AnyWidgetComponent):\n",
     "    _esm = \"\"\"\n",
     "    function render({ model, el }) {\n",
     "      let count = () => model.get(\"value\");\n",
@@ -53,8 +52,9 @@
     "    }\n",
     "    export default { render };\n",
     "    \"\"\"\n",
+    "    value = param.Integer()\n",
     "\n",
-    "CounterButton().servable()"
+    "CounterWidget().servable()"
    ]
   },
   {
@@ -75,7 +75,7 @@
     "\n",
     "- **`_esm`** (str | PurePath): This attribute accepts either a string or a path that points to an [ECMAScript module](https://nodejs.org/api/esm.html#modules-ecmascript-modules). The ECMAScript module should export a `default` object or function that returns an object. The object should contain a `render` function and optionally an `initialize` function. In a development environment such as a notebook or when using `--autoreload`, the module will automatically reload upon saving changes.\n",
     "- **`_importmap`** (dict | None): This optional dictionary defines an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap), allowing you to customize how module specifiers are resolved.\n",
-    "- **`_stylesheets`** (optional list of strings): This optional attribute accepts a list of CSS strings or paths to CSS files. It supports automatic reloading in development environments.\n",
+    "- **`_stylesheets`** (list[str] | list[PurePath]): This optional attribute accepts a list of CSS strings or paths to CSS files. It supports automatic reloading in development environments. It works similarly to the `AnyWidget` `_css` attribute.\n",
     "\n",
     ":::note\n",
     "You may specify a path to a file as a string instead of a PurePath. The path should be specified relative to the file it is referenced in.\n",
@@ -85,10 +85,10 @@
     "\n",
     "The `_esm` `default` object must contain a `render` function. It accepts the following parameters:\n",
     "\n",
-    "- **`model`**: Represents the parameters of the component and provides methods to `.get` values, `.set` values, and `.save_changes`.\n",
-    "- **`el`**: The parent HTML element to append HTML elements to.\n",
+    "- **`model`**: Represents the parameters of the component and provides methods to `.get` values, `.set` values, and `.save_changes`. In addition to the AnyWidgets methods, Panel uniquely provides the `get_child` method to enable rendering of child models.\n",
+    "- **`el`**: The parent HTML element to which HTML elements are appended.\n",
     "\n",
-    "For more detail, see [`AnyWidget`](https://anywidget.dev/).\n",
+    "For more details, see [`AnyWidget`](https://anywidget.dev/).\n",
     "\n",
     "## Usage\n",
     "\n",
@@ -104,16 +104,14 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "import panel as pn\n",
     "import param\n",
+    "import panel as pn\n",
     "\n",
     "from panel.custom import AnyWidgetComponent\n",
     "\n",
+    "pn.extension()\n",
     "\n",
-    "class StyledCounterButton(AnyWidgetComponent):\n",
-    "\n",
-    "    value = param.Integer()\n",
-    "\n",
+    "class CounterWidget(AnyWidgetComponent):\n",
     "    _esm = \"\"\"\n",
     "    function render({ model, el }) {\n",
     "      let count = () => model.get(\"value\");\n",
@@ -130,23 +128,15 @@
     "    }\n",
     "    export default { render };\n",
     "    \"\"\"\n",
-    "\n",
     "    _stylesheets = [\n",
     "        \"\"\"\n",
-    "        button {\n",
-    "            background: #0072B5;\n",
-    "            color: white;\n",
-    "            border: none;\n",
-    "            padding: 10px;\n",
-    "            border-radius: 4px;\n",
-    "        }\n",
-    "        button:hover {\n",
-    "            background: #4099da;\n",
-    "        }\n",
+    "        button { color: white; font-size: 1.75rem; background-color: #ea580c; padding: 0.5rem 1rem; border: none; border-radius: 0.25rem; }\n",
+    "        button:hover { background-color: #9a3412; }\n",
     "        \"\"\"\n",
     "    ]\n",
+    "    value = param.Integer()\n",
     "\n",
-    "StyledCounterButton().servable()"
+    "CounterWidget().servable()"
    ]
   },
   {
@@ -154,6 +144,15 @@
    "id": "7619dad4-4dfe-43a1-aac1-32c57ddffc58",
    "metadata": {},
    "source": [
+    ":::{note}\n",
+    "\n",
+    "The `AnyWidget` will automatically add the CSS class `counter-widget` to the `el`.\n",
+    "\n",
+    "The `AnyWidgetComponent` does not add this class, but you can do it yourself via `el.classList.add(\"counter-widget\");`.\n",
+    "\n",
+    ":::\n",
+    "\n",
+    "\n",
     "### Dependency Imports\n",
     "\n",
     "JavaScript dependencies can be directly imported via URLs, such as those from [`esm.sh`](https://esm.sh/)."
@@ -306,9 +305,182 @@
     "\n",
     "You can now edit the JavaScript or CSS file, and the changes will be automatically reloaded.\n",
     "\n",
-    "- Try changing the `innerHTML` from `count is ${value()}` to `COUNT IS ${value()}` and observe the update. Note you must update `innerHTML` in two places.\n",
-    "- Try changing the background color from `#0072B5` to `#008080`.\n",
+    "- Try changing the `innerHTML` from `count is ${value()}` to `COUNT IS ${value()}` and observe the update. Note that you must update `innerHTML` in two places.\n",
+    "- Try changing the background color from `#0072B5` to `#008080`."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "6f5b0f26-b5ec-455b-91fb-4032f34086ee",
+   "metadata": {},
+   "source": [
+    "## Displaying A Single Child\n",
+    "\n",
+    "You can display Python objects by defining a `Child` parameter. Please note that this feature is **currently not supported by `AnyWidget`**.\n",
     "\n",
+    "Lets start with the simplest example:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "db65cc94-6e23-460a-8796-e10b55c88300",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import panel as pn\n",
+    "\n",
+    "from panel.custom import AnyWidgetComponent, Child\n",
+    "\n",
+    "pn.extension()\n",
+    "\n",
+    "\n",
+    "class Example(AnyWidgetComponent):\n",
+    "\n",
+    "    child = Child()\n",
+    "\n",
+    "    _esm = \"\"\"\n",
+    "    function render({ model, el }) {\n",
+    "      const button = document.createElement(\"button\");\n",
+    "      button.append(model.get_child(\"child\"))\n",
+    "      el.appendChild(button);\n",
+    "    }\n",
+    "\n",
+    "    export default { render };\n",
+    "    \"\"\"\n",
+    "\n",
+    "\n",
+    "Example(child=pn.panel(\"A **Markdown** pane!\")).servable()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "401345bd-5a53-4461-96c9-959b2ea41904",
+   "metadata": {},
+   "source": [
+    "If you provide a non-`Viewable` child it will automatically be converted to a `Viewable` by `pn.panel`:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "49c4c66f-9b4f-4461-ac3c-4f9ad2dbd1a7",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "Example(child=\"A **Markdown** pane!\").servable()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "5ef1c471-2ed8-48ef-a478-3873f7d613fd",
+   "metadata": {},
+   "source": [
+    "If you want to allow a certain type of Panel components only you can specify the specific type in the `class_` argument."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "2e7c1209-2b86-433a-8dd2-ca351ac02979",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import panel as pn\n",
+    "\n",
+    "from panel.custom import AnyWidgetComponent, Child\n",
+    "\n",
+    "\n",
+    "class Example(AnyWidgetComponent):\n",
+    "\n",
+    "    child = Child(class_=pn.pane.Markdown)\n",
+    "\n",
+    "    _esm = \"\"\"\n",
+    "    function render({ model, el }) {\n",
+    "      const button = document.createElement(\"button\");\n",
+    "      button.append(model.get_child(\"child\"))\n",
+    "      el.appendChild(button);\n",
+    "    }\n",
+    "\n",
+    "    export default { render };\n",
+    "    \"\"\"\n",
+    "\n",
+    "\n",
+    "Example(child=pn.panel(\"A **Markdown** pane!\")).servable()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "2e7da88d-aaa6-41ba-8a33-a0f93e0eb302",
+   "metadata": {},
+   "source": [
+    "The `class_` argument also supports a tuple of types:\n",
+    "\n",
+    "```python\n",
+    "    child = Child(class_=(pn.pane.Markdown, pn.pane.HTML))\n",
+    "```"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "53ce78f8-b4f5-4ff6-afe0-563efa0d3fc7",
+   "metadata": {},
+   "source": [
+    "## Displaying a List of Children\n",
+    "\n",
+    "You can also display a `List` of `Viewable` objects using the `Children` parameter type:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "634d84e4-e372-4cff-b40e-7e16df179765",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import panel as pn\n",
+    "\n",
+    "from panel.custom import AnyWidgetComponent, Children\n",
+    "\n",
+    "pn.extension()\n",
+    "\n",
+    "\n",
+    "class Example(AnyWidgetComponent):\n",
+    "\n",
+    "    objects = Children()\n",
+    "\n",
+    "    _esm = \"\"\"\n",
+    "    function render({ model, el }) {\n",
+    "      const div = document.createElement('div')\n",
+    "      div.append(...model.get_child(\"objects\"))\n",
+    "      el.appendChild(div);\n",
+    "    }\n",
+    "\n",
+    "    export default { render };\n",
+    "    \"\"\"\n",
+    "\n",
+    "\n",
+    "Example(\n",
+    "    objects=[pn.panel(\"A **Markdown** pane!\"), pn.widgets.Button(name=\"Click me!\"), {\"text\": \"I'm shown as a JSON Pane\"}]\n",
+    ").servable()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "748776ca-925d-44dd-b503-3823252165c9",
+   "metadata": {},
+   "source": [
+    ":::note\n",
+    "You can change the `item_type` to a specific subtype of `Viewable` or a tuple of\n",
+    "`Viewable` subtypes.\n",
+    ":::"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "91a8cb50-c38d-4d8a-b992-7bf013926a73",
+   "metadata": {},
+   "source": [
     "### React\n",
     "\n",
     "You can use React with `AnyWidget` as shown below."
diff --git a/examples/reference/layouts/Accordion.ipynb b/examples/reference/layouts/Accordion.ipynb
index d69f44ef68..a96455f654 100644
--- a/examples/reference/layouts/Accordion.ipynb
+++ b/examples/reference/layouts/Accordion.ipynb
@@ -28,7 +28,7 @@
     "* **``header_color``** (str): The color of the header text.\n",
     "* **``header_background``** (str): The background color of the header.\n",
     "\n",
-    "For further layout and styling-related parameters see the [customization user guide](../../user_guide/Customization.ipynb).\n",
+    "For further layout and styling-related parameters see the [Control the size](../../tutorials/basic/size.md), [Align Content](../../tutorials/basic/align.md) and [Style](../../tutorials/basic/style.md) tutorials.\n",
     "\n",
     "___"
    ]
diff --git a/examples/reference/layouts/GridSpec.ipynb b/examples/reference/layouts/GridSpec.ipynb
index 273d56b5a8..443d5a801e 100644
--- a/examples/reference/layouts/GridSpec.ipynb
+++ b/examples/reference/layouts/GridSpec.ipynb
@@ -22,13 +22,13 @@
     "\n",
     "#### Parameters:\n",
     "\n",
-    "For details on other options for customizing the component see the [layout](../../how_to/layout/index.md) and [styling](../../how_to/styling/index.md) how-to guides.\n",
-    "\n",
     "* **``ncols``** (int): Limits the number of columns that can be assigned.\n",
     "* **``nrows``** (int): Limits the number of rows that can be assigned.\n",
     "* **``mode``** (str): Whether to 'warn', 'error', or simply 'override' on overlapping assignment\n",
     "* **``objects``** (list): The list of objects to display in the GridSpec. Should not generally be modified directly except when replaced in its entirety.\n",
     "\n",
+    "For layout and styling-related parameters see the [Control the size](../../tutorials/basic/size.md), [Align Content](../../tutorials/basic/align.md) and [Style](../../tutorials/basic/style.md) tutorials.\n",
+    "\n",
     "___"
    ]
   },
diff --git a/examples/reference/layouts/Swipe.ipynb b/examples/reference/layouts/Swipe.ipynb
index e7b372f4e4..99e9d36af5 100644
--- a/examples/reference/layouts/Swipe.ipynb
+++ b/examples/reference/layouts/Swipe.ipynb
@@ -30,7 +30,7 @@
     "* **``slider_width``** (int): The width of the slider in pixels. Default is 12.\n",
     "* **``slider_color``** (str): The color of the slider. Default is 'black'.\n",
     "\n",
-    "For further layout and styling-related parameters see the [customization user guide](../../user_guide/Customization.ipynb).\n",
+    "For further layout and styling-related parameters see the [Control the size](../../tutorials/basic/size.md), [Align Content](../../tutorials/basic/align.md) and [Style](../../tutorials/basic/style.md) tutorials.\n",
     "\n",
     "---"
    ]
diff --git a/examples/reference/panes/Param.ipynb b/examples/reference/panes/Param.ipynb
index a3f865bde4..fbf2729d2a 100644
--- a/examples/reference/panes/Param.ipynb
+++ b/examples/reference/panes/Param.ipynb
@@ -39,9 +39,8 @@
     "* **`show_labels`** (bool): Whether or not to show labels\n",
     "* **`show_name`** (bool): Whether or not to show the name of the Parameterized Class \n",
     "\n",
-    "For more layout and styling related parameters see the [customization user guide](../../user_guide/Customization.ipynb).\n",
+    "For further layout and styling-related parameters see the [Control the size](../../tutorials/basic/size.md), [Align Content](../../tutorials/basic/align.md) and [Style](../../tutorials/basic/style.md) tutorials.\n",
     "\n",
-    "For an alternative example of using `panel.Param` see the [parameters user guide](../../user_guide/Param.ipynb).\n",
     "___"
    ]
   },
diff --git a/panel/layout/spacer.py b/panel/layout/spacer.py
index 92f86ce708..4be5c40ade 100644
--- a/panel/layout/spacer.py
+++ b/panel/layout/spacer.py
@@ -49,7 +49,7 @@ class VSpacer(Spacer):
     Using this component we can space objects equidistantly in a layout and
     allow the empty space to shrink when the browser is resized.
 
-    Reference: https://panel.holoviz.org/user_guide/Customization.html#spacers
+    Reference: https://panel.holoviz.org/how_to/layout/spacing.html#spacer-components
 
     :Example: