# Display
This module enhances Jupyter’s display capabilities with:
- Rich rendering — Leverage `rich` library for beautiful object display
- Interactive JSON — Collapsible JSON viewer with configurable depth
- Dynamic CSS — Generate and update CSS stylesheets programmatically
- Global styles — Manage notebook-wide CSS that updates reactively
## Key Components
- [`pretty_repr`](https://civvic.github.io/pote/display.html#pretty_repr)
— Render objects using `rich` formatting (HTML + text)
- [`rich_display`](https://civvic.github.io/pote/display.html#rich_display)
— Display objects with rich formatting and updateable handles
- [`RenderJSON`](https://civvic.github.io/pote/display.html#renderjson)
— Interactive collapsible JSON viewer
- [`cssmap`](https://civvic.github.io/pote/display.html#cssmap) —
Convert Python dicts to CSS strings (including nested at-rules)
- [`GlobalCSS`](https://civvic.github.io/pote/display.html#globalcss) —
Manage global CSS with reactive updates
## When to Use
- Pretty printing — Display complex data structures with syntax
highlighting
- Data exploration — Inspect nested JSON/dicts with collapsible views
- Notebook styling — Generate CSS from Python for consistent theming
- Dynamic UIs — Update styles reactively based on state changes
# Rich display
Utilities for rendering objects with `rich` formatting in Jupyter. These
functions generate both HTML (for rich notebooks) and plain text (for
terminal/markdown) representations.
**Key features**: - Syntax highlighting for data structures -
Configurable output formats (HTML, text, or both) - Updateable display
handles for reactive UIs
``` python
from rich.json import JSON
from rich.jupyter import display as rich_display
```
``` python
def display_json(json):
json_renderable = JSON.from_data(json)
a = list(console.render(json_renderable))
rich_display(a, console._render_buffer(a))
```
``` python
display_json({'a': 1, 'b': 2})
```
{
"a": 1,
"b": 2
}
------------------------------------------------------------------------
source
### pretty_repr
``` python
def pretty_repr(
o:VAR_POSITIONAL, html:bool=True, text:bool=True, kwargs:VAR_KEYWORD
)->dict[str, str] | str:
```
------------------------------------------------------------------------
source
### pretty_repr
``` python
def pretty_repr(
o:VAR_POSITIONAL, html:bool=True, text:bool=True, kwargs:VAR_KEYWORD
)->dict[str, str] | str:
```
------------------------------------------------------------------------
source
### pretty_repr
``` python
def pretty_repr(
o:VAR_POSITIONAL, html:bool=True, text:bool=True, kwargs:VAR_KEYWORD
)->dict[str, str] | str:
```
``` python
display(HTML(pretty_repr({'a': 1, 'b': [1,2,3]}, text=False)))
print(pretty_repr({'a': 1, 'b': [1,2,3]}, html=False))
cprint({'a': 1, 'b': [1,2,3]})
```
{'a': 1, 'b': [1, 2, 3]}
{'a': 1, 'b': [1, 2, 3]}
{'a': 1, 'b': [1, 2, 3]}
------------------------------------------------------------------------
source
### rich_display
``` python
def rich_display(
o:VAR_POSITIONAL, dhdl:DisplayHandle | None=None
):
```
``` python
rich_display({'a': 1, 'b': 2}, [3, 4, 5])
```
{'a': 1, 'b': 2}
[3, 4, 5]
``` python
dhdl = display(display_id=True)
rich_display({'a': 1, 'b': 2}, [3, 4, 5], dhdl=dhdl)
```
{'a': 1, 'b': 2}
[3, 4, 5]
# Collapsible JSON
Interactive JSON viewer using
[renderjson](https://github.com/caldwell/renderjson). Displays JSON with
collapsible nodes, perfect for exploring deeply nested data.
**Features**: - Click to expand/collapse nodes - Configurable initial
expansion level - Scrollable container with max height - Automatic CDN
loading of renderjson library
**Use cases**: API responses, config files, deeply nested data
structures
------------------------------------------------------------------------
source
### RenderJSON
``` python
def RenderJSON(
json_data, max_height:int=200, init_level:int=0
):
```
*Initialize self. See help(type(self)) for accurate signature.*
``` python
json_data = {
"name": "Petronila",
"age": 28,
"interests": ["reading", "cycling", "technology"],
"education": {
"bachelor": "Computer Science",
"master": "Data Science",
"phd": "Not enrolled"
}
}
RenderJSON(json_data, init_level=1).display()
```
# CSS
Utilities for generating and managing CSS in notebooks. Write styles in
Python dicts instead of CSS strings for better maintainability and
dynamic generation.
## cssmap
Convert Python dictionaries to CSS strings. Supports: - Nested
selectors - At-rules (`@media`, `@scope`, `@keyframes`, etc.) - Proper
indentation and formatting
**Why use this?** - Type-safe CSS generation - Easier to compose and
reuse styles - Programmatic style generation (loops, conditionals)
------------------------------------------------------------------------
source
### cssmap
``` python
def cssmap(
stylesheet, lvl:int=0
)->str:
```
------------------------------------------------------------------------
source
### cssmap
``` python
def cssmap(
stylesheet, lvl:int=0
)->str:
```
------------------------------------------------------------------------
source
### cssmap
``` python
def cssmap(
stylesheet, lvl:int=0
)->str:
```
``` python
expected = '''@scope (div.tableFixHead) {
:scope {
overflow-y: auto;
max-width: max-content
}
thead th {
position: sticky;
top: 0px;
background-color: gray
}
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px
}'''
```
``` python
style = {
'@scope (div.tableFixHead)': {
':scope': {
'overflow-y': 'auto',
'max-width': 'max-content',
},
'thead th': {
'position': 'sticky',
'top': '0px',
'background-color': 'gray',
}
},
'body': {
'font-family': 'Arial, sans-serif',
'margin': '0',
'padding': '20px'
}
}
css = cssmap(style)
test_eq(css, expected)
display(Markdown(f"```css\n{css}\n```"))
```
@scope (div.tableFixHead) {
:scope {
overflow-y: auto;
max-width: max-content
}
thead th {
position: sticky;
top: 0px;
background-color: gray
}
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px
}
## GlobalCSS
Manage notebook-wide CSS with reactive updates. Create a single
[`GlobalCSS`](https://civvic.github.io/pote/display.html#globalcss)
instance, display it once, then add/update styles dynamically throughout
your notebook.
**Pattern**:
``` python
# Cell 1: Initialize and display
GCSS = GlobalCSS()
display(GCSS)
# Cell 2: Add styles dynamically
GCSS.add('my-component', '.my-component { color: blue; }')
# Cell 3: Update existing styles
GCSS.update('my-component', '.my-component { color: red; }')
```
**Benefits**: - Single source of truth for notebook styles - No
duplicate `
``` python
Hello
```
Hello
``` python
GCSS.add('test', '.__test__gcss__ { color: red; }')
```
``` python
GCSS.update('test', '.__test__gcss__ { color: green; }')
```
``` python
test_stdout(lambda: display(GCSS), 'GlobalCSSs should be displayed only once, skipping.')
```
------------------------------------------------------------------------