HTML

Open this notebook in Jupyterlite | Download this notebook from GitHub (right-click to download).

---

import panel as pn

pn.extension()

The HTML pane allows rendering arbitrary HTML in a panel. It renders strings containing valid HTML as well as objects with a _repr_html_ method and may define custom CSS styles.

Parameters:

For details on other options for customizing the component see the layout and styling how-to guides.

• disable_math (boolean, default=True): Whether to disable MathJax math rendering for strings escaped with $$ delimiters.

• object (str or object): The string or object with _repr_html_ method to display

• sanitize_html (boolean, default=False): Whether to sanitize HTML sent to the frontend.

• sanitize_hook (Callable, default=bleach.clean): Sanitization callback to apply if sanitize_html=True.

• styles (dict): Dictionary specifying CSS styles

---

The HTML pane accepts the entire HTML5 spec including any embedded script tags, which will be executed. It also supports a styles dictionary to apply styles to control the style of the <div> tag the HTML contents will be rendered in.

styles = {
    'background-color': '#F6F6F6', 'border': '2px solid black',
    'border-radius': '5px', 'padding': '10px'
}

html_pane = pn.pane.HTML("""
<h1>This is an HTML pane</h1>

<code>
x = 5;<br>
y = 6;<br>
z = x + y;
</code>

<br>
<br>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>
""", styles=styles)

html_pane

To update the object or styles we can simply set it:

html_pane.styles = dict(html_pane.styles, border='2px solid red')

---

Open this notebook in Jupyterlite | Download this notebook from GitHub (right-click to download).