from rich.json import JSON
from rich.jupyter import display as rich_displayDisplay
Rich display utilities and dynamic CSS for Jupyter notebooks
This module enhances Jupyter’s display capabilities with:
- Rich rendering — Leverage
richlibrary 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— Render objects usingrichformatting (HTML + text)rich_display— Display objects with rich formatting and updateable handlesRenderJSON— Interactive collapsible JSON viewercssmap— Convert Python dicts to CSS strings (including nested at-rules)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
def display_json(json):
json_renderable = JSON.from_data(json)
a = list(console.render(json_renderable))
rich_display(a, console._render_buffer(a))display_json({'a': 1, 'b': 2}){ "a": 1, "b": 2 }
pretty_repr
def pretty_repr(
o:VAR_POSITIONAL, html:bool=True, text:bool=True, kwargs:VAR_KEYWORD
)->dict[str, str] | str:
pretty_repr
def pretty_repr(
o:VAR_POSITIONAL, html:bool=True, text:bool=True, kwargs:VAR_KEYWORD
)->dict[str, str] | str:
pretty_repr
def pretty_repr(
o:VAR_POSITIONAL, html:bool=True, text:bool=True, kwargs:VAR_KEYWORD
)->dict[str, str] | str:
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]}
rich_display
def rich_display(
o:VAR_POSITIONAL, dhdl:DisplayHandle | None=None
):
rich_display({'a': 1, 'b': 2}, [3, 4, 5]){'a': 1, 'b': 2}
[3, 4, 5]
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. 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
RenderJSON
def RenderJSON(
json_data, max_height:int=200, init_level:int=0
):
Initialize self. See help(type(self)) for accurate signature.
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)
cssmap
def cssmap(
stylesheet, lvl:int=0
)->str:
cssmap
def cssmap(
stylesheet, lvl:int=0
)->str:
cssmap
def cssmap(
stylesheet, lvl:int=0
)->str:
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
}'''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 instance, display it once, then add/update styles dynamically throughout your notebook.
Pattern:
# 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 <style> tags - Reactive updates without re-executing cells - Named styles for easy management
GlobalCSS
def GlobalCSS(
css:dict[str, str] | None=None
):
Initialize self. See help(type(self)) for accurate signature.
GCSS = GlobalCSS()
display(GCSS)<div class="__test__gcss__">Hello</div>Hello
GCSS.add('test', '.__test__gcss__ { color: red; }')GCSS.update('test', '.__test__gcss__ { color: green; }')test_stdout(lambda: display(GCSS), 'GlobalCSSs should be displayed only once, skipping.')