Skip to content

Data & Content Blocks

These blocks handle tabular data display, rich text, code, images, alerts, and progress indicators.


DataTable

Interactive, searchable, paginated data table. Ideal for detailed drill-down data.

Props

Prop Type Default Description
title str required Table title
data Any None Tabular data (list of dicts, DataFrame, etc.)
columns list[str] \| None None Explicit column list; auto-detected from data if omitted
searchable bool True Enable text search across all columns
paginated bool True Enable pagination

Basic Example

table_basic.py
from holysheet import DataTable

DataTable(
    title="Top Customers",
    data=[
        {"company": "Meridian Corp", "plan": "Enterprise", "mrr": "$12,400"},
        {"company": "Atlas Dynamics", "plan": "Enterprise", "mrr": "$9,800"},
        {"company": "Helix Systems", "plan": "Mid-Market", "mrr": "$5,600"},
    ],
)

With Explicit Columns

Control which columns appear and their order:

table_columns.py
DataTable(
    title="Project Portfolio",
    data=projects_data,
    columns=["project", "owner", "risk", "status", "completion", "budget_used"],
)

With Pandas DataFrame

table_pandas.py
import pandas as pd

df = pd.DataFrame({
    "Name": ["Alice", "Bob", "Carol"],
    "Score": [95, 87, 92],
    "Grade": ["A", "B+", "A-"],
})

DataTable(title="Student Grades", data=df)

Disabling Features

table_minimal.py
DataTable(
    title="Static Data",
    data=my_data,
    searchable=False,  # No search bar
    paginated=False,   # Show all rows
)

Auto-Detection

When columns is None, HolySheet automatically detects column names from the first record in the data. Specify columns explicitly to control column order or exclude certain fields.


Markdown

Free-form rich text content using Markdown syntax. Perfect for narrative sections, executive summaries, and documentation.

Props

Prop Type Default Description
content str required Markdown-formatted string

Example

markdown_example.py
from holysheet import Markdown

Markdown(content="""## Executive Summary

Portfolio health remains **strong** with 42 active projects delivering on schedule.
Risk-adjusted returns are trending positively, with a **12% improvement** in delivery
confidence over the past quarter.

### Key Highlights

- Revenue exceeded targets for 10 consecutive months
- Overall portfolio risk score decreased from 72 to 38
- Frontend team delivered 110% of planned capacity

---

> _This report was generated with HolySheet v0.2.0_
""")

Supported Markdown

The React renderer supports standard Markdown including headings, bold, italic, lists, links, blockquotes, code spans, and horizontal rules.


CodeBlock

Syntax-highlighted code display with optional title. Great for API examples, configuration snippets, and developer resources.

Props

Prop Type Default Description
code str required The source code string
language str \| None None Programming language for syntax highlighting
title str \| None None Optional title above the code block

Example

codeblock_example.py
from holysheet import CodeBlock

CodeBlock(
    code=(
        "from holysheet import Report, KPI, LineChart\n\n"
        "report = Report(title='Q4 Metrics', theme='dark')\n"
        "report.add(KPI(label='Revenue', value='$258K', delta='+12%', status='positive'))\n"
        "report.add(LineChart(title='Trend', data=monthly_data, x='month', y='revenue'))\n\n"
        "report.export_html('q4_report.html')\n"
    ),
    language="python",
    title="Quick Start — Generate a Report",
)

Multiple Languages

CodeBlock(code="print('Hello')", language="python")
CodeBlock(code="console.log('Hello');", language="javascript")
CodeBlock(code="SELECT * FROM users WHERE active = true;", language="sql")
CodeBlock(code="theme: dark\ntitle: My Report", language="yaml")

Image

Display an image from a URL or data URI.

Props

Prop Type Default Description
src str required Image URL or data URI
alt str \| None None Accessibility alt text
caption str \| None None Caption text below the image
width str \| int \| None None Width (CSS value or pixels)
height str \| int \| None None Height (CSS value or pixels)

Example

image_example.py
from holysheet import Image

Image(
    src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800",
    alt="Data Visualization Dashboard",
    caption="NovaPulse Platform — Live Dashboard View",
    width="100%",
)

With Fixed Dimensions

image_sized.py
Image(
    src="https://example.com/chart.png",
    alt="Q4 Revenue Chart",
    width=600,
    height=400,
)

External URLs

Images referenced by URL require internet access when viewing the report. For fully offline reports, consider using data URIs (base64-encoded images).


Alert

Alert / callout block for important messages, warnings, and notifications.

Props

Prop Type Default Description
severity "info" \| "warning" \| "error" \| "success" "info" Alert level
title str \| None None Optional alert title
message str "" Alert message body

Severity Levels

Alert(
    severity="info",
    title="Upcoming Renewal Cycle",
    message="12 Enterprise accounts are up for renewal in Q1.",
)
Blue accent — use for informational notices.

Alert(
    severity="success",
    title="Milestone Reached!",
    message="Crossed 42,000 monthly active users, exceeding the annual target by 20%.",
)
Green accent — use for positive announcements.

Alert(
    severity="warning",
    title="Cost Alert",
    message="Compute costs increased 18% month-over-month. Review autoscaling policies.",
)
Yellow/amber accent — use for caution notices.

Alert(
    severity="error",
    title="Action Required",
    message="Quantum Forge usage dropped 34% in the last 30 days. Escalate to CS team.",
)
Red accent — use for critical issues.


ProgressBar

Visual progress indicator for completion tracking, utilization metrics, and goal progress.

Props

Prop Type Default Description
label str required Progress label
value int \| float 0 Current value
max int \| float 100 Maximum value
color str \| None None Optional CSS color for the bar
description str \| None None Optional helper text

Example

progress_example.py
from holysheet import ProgressBar, Columns

Columns(children=[
    ProgressBar(
        label="CPU Utilisation",
        value=73,
        description="18 / 24 vCPUs allocated",
    ),
    ProgressBar(
        label="Memory Usage",
        value=61,
        description="49 GB / 80 GB",
    ),
    ProgressBar(
        label="Disk I/O",
        value=42,
        description="Healthy throughput",
    ),
    ProgressBar(
        label="Network Bandwidth",
        value=88,
        description="Approaching limit — consider upgrade",
        color="#EF4444",  # Red to indicate warning
    ),
])

Custom Ranges

progress_custom.py
ProgressBar(
    label="Sprint Progress",
    value=34,
    max=50,       # 34 out of 50 story points
    description="34 / 50 story points completed",
)

Using with Columns

Wrap multiple ProgressBar blocks in a Columns layout to create a utilization dashboard row.


Timeline

Vertical event/milestone timeline for roadmaps, changelogs, and process histories.

Props

Prop Type Default Description
title str \| None None Section title
events list[dict] required List of event dicts

Event dict keys: date (str, required), title (str, required), description (str, optional), icon (str, optional), color (str, optional hex color)

Product Roadmap

timeline_example.py
from holysheet import Timeline

Timeline(
    title="Product Roadmap 2024",
    events=[
        {"date": "Jan 2024", "title": "v1.0 Launch", "description": "Initial public release", "color": "#22c55e"},
        {"date": "Mar 2024", "title": "v1.5 Charts", "description": "Added 9 chart types", "color": "#6366f1"},
        {"date": "Jun 2024", "title": "v2.0 Interactive", "description": "Sliders, toggles, dropdowns", "color": "#f59e0b"},
        {"date": "Sep 2024", "title": "v3.0 Pro", "description": "21 new block types", "color": "#ef4444"},
    ],
)

Callout

Styled quote, highlight, or note block — perfect for pull quotes, key takeaways, and editorial content.

Props

Prop Type Default Description
content str required The callout text
author str \| None None Attribution text
icon str \| None None Icon emoji/string
variant "quote" \| "highlight" \| "note" "quote" Visual style variant

Callout Variants

Callout(
    content="The best dashboards tell a story.",
    author="Product Team",
    variant="quote",
    icon="💡",
)
Callout(
    content="47 block types. 3 themes. Zero Node.js required.",
    variant="highlight",
)
Callout(
    content="Data is refreshed every 15 minutes.",
    variant="note",
)

Embed

Embed external content via an iframe — dashboards, maps, videos, or any web page.

Props

Prop Type Default Description
url str required URL to embed
title str \| None None Accessible title
height int 400 Iframe height in pixels
aspect_ratio str \| None None Optional CSS aspect ratio (e.g. "16/9")
embed_example.py
from holysheet import Embed

Embed(
    url="https://www.google.com/maps/embed?pb=...",
    title="Office Locations",
    height=450,
)

Security

The embedded page must allow iframe embedding via its X-Frame-Options or Content-Security-Policy headers.


JsonViewer

Interactive JSON tree with syntax highlighting, collapsible levels, and color-coded types.

Props

Prop Type Default Description
data Any required Any JSON-serializable Python object
title str \| None None Title above the viewer
collapsed_depth int 2 Auto-collapse levels deeper than this

Configuration Viewer

json_viewer_example.py
from holysheet import JsonViewer

JsonViewer(
    data={
        "app": {"name": "NovaPulse", "version": "3.0.0"},
        "features": ["charts", "interactive", "timeline"],
        "metrics": {"users": 45000, "uptime": 99.97},
    },
    title="Application Config",
    collapsed_depth=1,
)

UserCard

Team member / person card with avatar, role, email, and optional stats.

Props

Prop Type Default Description
name str required Person's name
role str \| None None Job title / role
avatar_url str \| None None URL for avatar image
email str \| None None Email address
stats list[dict] \| None None List of {label, value} dicts

Team Cards

user_card_example.py
from holysheet import UserCard, Columns

Columns(children=[
    UserCard(
        name="Alice Chen",
        role="Chief Data Officer",
        email="alice@company.io",
        stats=[{"label": "Reports", "value": "142"}, {"label": "Dashboards", "value": "38"}],
    ),
    UserCard(
        name="Marcus Johnson",
        role="VP Engineering",
        stats=[{"label": "Deployments", "value": "1.2K"}, {"label": "Uptime", "value": "99.97%"}],
    ),
])

StatusList

List with colored status indicators — ideal for service health, deployment status, and task tracking.

Props

Prop Type Default Description
title str \| None None Section title
items list[dict] required List of status item dicts

Item dict keys: label (str, required), status ("success" | "warning" | "error" | "info" | "pending", required), description (str, optional), value (str, optional)

Service Health

status_list_example.py
from holysheet import StatusList

StatusList(
    title="Service Health",
    items=[
        {"label": "API Gateway", "status": "success", "value": "12ms"},
        {"label": "Redis Cache", "status": "warning", "value": "85%", "description": "Memory elevated"},
        {"label": "ML Pipeline", "status": "error", "value": "DOWN"},
        {"label": "Email Service", "status": "pending", "value": "Queue: 142"},
    ],
)

InfoList

Key-value pair display with optional icons — for configuration panels, metadata, and summary lists.

Props

Prop Type Default Description
title str \| None None Section title
items list[dict] required List of {key, value, icon?} dicts
info_list_example.py
from holysheet import InfoList

InfoList(
    title="System Configuration",
    items=[
        {"key": "Environment", "value": "Production", "icon": "🌐"},
        {"key": "Region", "value": "us-east-1", "icon": "📍"},
        {"key": "Python", "value": "3.12.4", "icon": "🐍"},
        {"key": "Database", "value": "PostgreSQL 16.2", "icon": "🗄️"},
    ],
)

Stepper

Process / wizard step visualization showing sequential stages with status indicators.

Props

Prop Type Default Description
title str \| None None Section title
steps list[dict] required List of step dicts
current_step int \| None None Zero-based index of current active step

Step dict keys: label (str, required), description (str, optional), status ("complete" | "active" | "pending", optional)

Deployment Pipeline

stepper_example.py
from holysheet import Stepper

Stepper(
    title="Deployment Pipeline",
    steps=[
        {"label": "Build", "description": "Compile & bundle", "status": "complete"},
        {"label": "Test", "description": "Unit + integration", "status": "complete"},
        {"label": "Staging", "description": "Canary deploy", "status": "active"},
        {"label": "Production", "description": "Blue-green deploy", "status": "pending"},
    ],
    current_step=2,
)

TagList

Display a collection of colored tags/badges — for technology stacks, categories, and labels.

Props

Prop Type Default Description
title str \| None None Section title
tags list[dict] required List of {label, color?, variant?} dicts
tag_list_example.py
from holysheet import TagList

TagList(
    title="Tech Stack",
    tags=[
        {"label": "Python", "color": "#3776AB"},
        {"label": "React", "color": "#61DAFB"},
        {"label": "TypeScript", "color": "#3178C6"},
        {"label": "PostgreSQL", "color": "#4169E1"},
    ],
)

Sparkline

Tiny inline chart — a compact line/area visualization with no axes, perfect for showing trends at a glance.

Props

Prop Type Default Description
data list[int \| float] required Numeric values for the line
color str \| None None Line color (CSS color)
height int 60 Chart height in pixels
show_area bool True Fill area below the line
sparkline_example.py
from holysheet import Sparkline, Columns

Columns(children=[
    Sparkline(data=[10, 25, 18, 35, 28, 42, 55, 48, 62, 75], color="#6C63FF"),
    Sparkline(data=[50, 45, 52, 48, 55, 42, 58, 62, 68, 80], color="#34d399"),
])

Use with KPIs

Place a Sparkline next to a KPI in a Columns layout to add trend context to your metrics.


Scorecard

Conditional color metric grid that highlights values based on configurable thresholds. Perfect for health dashboards and KPI grids.

Props

Prop Type Default Description
title str \| None None Grid title
data list[dict] [] List of row dicts
value_column str required Column key containing the metric value
thresholds list[dict] [] List of threshold rules with min, max, color, label
columns list[str] \| None None Columns to display (auto-inferred if omitted)

Threshold dict keys: min (float), max (float), color (str, hex color), label (str, optional descriptive label like "Good")

Service Health Scorecard

scorecard_example.py
from holysheet import Scorecard

Scorecard(
    title="Service Health",
    data=[
        {"service": "API Gateway", "uptime": 99.99, "p99_ms": 45},
        {"service": "Auth Service", "uptime": 99.95, "p99_ms": 120},
        {"service": "ML Pipeline", "uptime": 98.50, "p99_ms": 850},
        {"service": "Email Queue", "uptime": 99.80, "p99_ms": 230},
    ],
    value_column="uptime",
    thresholds=[
        {"min": 99.9, "max": 100, "color": "#10B981", "label": "Healthy"},
        {"min": 99.0, "max": 99.9, "color": "#F59E0B", "label": "Degraded"},
        {"min": 0, "max": 99.0, "color": "#EF4444", "label": "Critical"},
    ],
)

Multiple Scorecards

Use Columns to place multiple scorecards side-by-side, each tracking a different value_column:

Columns(children=[
    Scorecard(title="Uptime", data=data, value_column="uptime", thresholds=uptime_rules),
    Scorecard(title="Latency", data=data, value_column="p99_ms", thresholds=latency_rules),
])

DataProfile

Auto-EDA (Exploratory Data Analysis) summary that displays column-level statistics for a dataset. Ideal for data quality checks and quick profiling.

Props

Prop Type Default Description
title str \| None None Profile title
columns list[dict] [] List of column profile dicts

Column profile dict keys:

Key Type Description
name str Column name
dtype str Data type (e.g. "float64", "object", "int64")
count int Non-null count
null_count int Number of null values
null_pct float Null percentage (0–100)
unique int Unique value count
mean float \| None Mean (numeric columns)
std float \| None Standard deviation
min float \| str \| None Minimum value
max float \| str \| None Maximum value
top str \| None Most frequent value (categorical)
freq int \| None Frequency of most common value

Dataset Profile

dataprofile_example.py
from holysheet import DataProfile

DataProfile(
    title="Customer Dataset Profile",
    columns=[
        {
            "name": "revenue",
            "dtype": "float64",
            "count": 10000,
            "null_count": 12,
            "null_pct": 0.12,
            "unique": 8942,
            "mean": 45230.50,
            "std": 12840.32,
            "min": 1200.00,
            "max": 198500.00,
        },
        {
            "name": "segment",
            "dtype": "object",
            "count": 10000,
            "null_count": 0,
            "null_pct": 0.0,
            "unique": 4,
            "top": "Enterprise",
            "freq": 4200,
        },
        {
            "name": "churn_risk",
            "dtype": "float64",
            "count": 9800,
            "null_count": 200,
            "null_pct": 2.0,
            "unique": 98,
            "mean": 0.23,
            "std": 0.18,
            "min": 0.01,
            "max": 0.95,
        },
    ],
)

With Pandas

Generate a DataProfile directly from a pandas DataFrame:

dataprofile_pandas.py
import pandas as pd
from holysheet import DataProfile

df = pd.read_csv("customers.csv")

# Build column profiles from pandas describe
profiles = []
for col in df.columns:
    profile = {
        "name": col,
        "dtype": str(df[col].dtype),
        "count": int(df[col].count()),
        "null_count": int(df[col].isna().sum()),
        "null_pct": round(df[col].isna().mean() * 100, 2),
        "unique": int(df[col].nunique()),
    }
    if df[col].dtype in ("float64", "int64"):
        profile["mean"] = round(df[col].mean(), 2)
        profile["std"] = round(df[col].std(), 2)
        profile["min"] = round(df[col].min(), 2)
        profile["max"] = round(df[col].max(), 2)
    else:
        profile["top"] = str(df[col].mode().iloc[0]) if len(df[col].mode()) > 0 else None
        profile["freq"] = int(df[col].value_counts().iloc[0]) if len(df[col]) > 0 else None
    profiles.append(profile)

DataProfile(title=f"Profile: {df.shape[0]} rows × {df.shape[1]} cols", columns=profiles)

Data Quality Dashboards

Combine DataProfile with Scorecard thresholds to create automated data quality monitoring dashboards.


Video

HTML5 video embed with poster image, controls, and responsive sizing.

Props

Prop Type Default Description
src str required Video URL
title str \| None None Title above the player
poster str \| None None Poster/thumbnail image URL
autoplay bool False Auto-play on load
controls bool True Show playback controls
video_example.py
from holysheet import Video

Video(
    src="https://example.com/demo.mp4",
    title="Product Demo",
    poster="https://example.com/poster.jpg",
    controls=True,
)

SqlBlock

Client-side SQL query block. Displays a SQL query with syntax highlighting and a "Run" button that executes queries against the block's data directly in the browser.

Props

Prop Type Default Description
query str required SQL query string
data Any None Data source to query against
title str "Query Result" Block title
output Literal["table", "chart"] "table" Output mode

Example

sql_block.py
from holysheet import SqlBlock

SqlBlock(
    title="Revenue by Region",
    query="SELECT region, SUM(revenue) as total FROM data GROUP BY region ORDER BY total DESC",
    data=[
        {"region": "US", "revenue": 120000},
        {"region": "EU", "revenue": 95000},
        {"region": "APAC", "revenue": 78000},
    ],
)

Supported SQL

The client-side engine supports SELECT, WHERE (=, >, <, >=, <=, <>, LIKE), GROUP BY with aggregates (COUNT, SUM, AVG, MIN, MAX), ORDER BY, and LIMIT.


NarrationBlock

Text-to-speech narration block using the Web Speech API.

Props

Prop Type Default Description
text str required The narration text
autoplay bool False Start speaking on page load

Example

narration.py
from holysheet import NarrationBlock

NarrationBlock(
    text="Revenue grew 22% quarter-over-quarter, driven by enterprise accounts.",
    autoplay=False,
)

Auto-Narrate

Use report.auto_narrate() to automatically generate narration text from KPIs and chart titles:

report.add(NarrationBlock(text=report.auto_narrate()))


AIInsight

AI-generated narrative insight block. Uses an LLM provider to generate textual insights from data at build time.

Props

Prop Type Default Description
data Any None Data to analyse
title str "AI Insight" Block title
provider Literal["openai", "anthropic", "google"] "openai" LLM provider
prompt str \| None None Custom analysis prompt
api_key str \| None None API key (or use env var)

Example

ai_insight.py
from holysheet import AIInsight

AIInsight(
    title="Revenue Trends",
    data=revenue_df,
    provider="openai",
)

Installation

Install the provider SDK: pip install holysheet[ai] or individually:

  • OpenAI: pip install openai + set OPENAI_API_KEY
  • Anthropic: pip install anthropic + set ANTHROPIC_API_KEY
  • Google: pip install google-generativeai + set GOOGLE_API_KEY

GoogleSheet

Data source block that fetches data from a Google Sheet at build time.

Props

Prop Type Default Description
spreadsheet_id str required Google Sheet ID (from URL)
sheet_name str \| None None Specific tab name
title str "Google Sheet" Block title
credentials_path str \| None None Path to service account JSON
range str \| None None A1 notation range

Example

google_sheet.py
from holysheet import GoogleSheet

GoogleSheet(
    spreadsheet_id="1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgVE2upms",
    sheet_name="Q4 Data",
    title="Sales by Region",
)

Installation

pip install holysheet[gsheets]
Set GOOGLE_APPLICATION_CREDENTIALS to your service account JSON path.