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¶
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:
DataTable(
title="Project Portfolio",
data=projects_data,
columns=["project", "owner", "risk", "status", "completion", "budget_used"],
)
With Pandas DataFrame¶
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¶
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¶
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¶
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¶
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¶
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(
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¶
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¶
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¶
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
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
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") |
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
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
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
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 |
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
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 |
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 |
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
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:
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
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:
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 |
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¶
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¶
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:
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¶
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+ setOPENAI_API_KEY - Anthropic:
pip install anthropic+ setANTHROPIC_API_KEY - Google:
pip install google-generativeai+ setGOOGLE_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 |