{"slug": "how-to-design-python-first-interactive-dashboards-with-prefab-reactive-ui-and", "title": "How to Design Python-First Interactive Dashboards with Prefab Reactive UI Components and Static HTML Export", "summary": "Prefab released a tutorial demonstrating how to build interactive Python-first dashboards using its reactive UI components and static HTML export. The tutorial shows developers how to create a polished operations dashboard with charts, tables, filters, and forms entirely in Python without writing frontend code. The approach enables rapid prototyping and deployment of data-driven interfaces directly from Python environments like Google Colab.", "body_md": "In this [tutorial](https://github.com/MARKTECHPOST-AI-MEDIA-INC/AI-Agents-Projects-Tutorials/blob/main/Data%20Analysis/prefab_reactive_dashboard_tutorial_Marktechpost.ipynb), we build a[ Prefab](https://github.com/PrefectHQ/prefab) application that demonstrates how to create interactive dashboards entirely in Python. We use Prefab’s component-based Python interface to design a polished operations dashboard with reactive state, charts, tables, filters, forms, tabs, alerts, metrics, and client-side actions. We generate realistic pipeline monitoring data, connect it to live UI controls, and export the final app as a static HTML dashboard that we can preview directly inside Google Colab. Through this workflow, we learn how Prefab lets us move from Python data logic to a modern React-powered user interface without having to write frontend code manually.\n\n**Installing Prefab in Colab**\n\n``` python\nimport os\nimport sys\nimport base64\nimport subprocess\nfrom pathlib import Path\nfrom IPython.display import HTML, display, FileLink\nPREFAB_VERSION = \"0.20.2\"\nAPP_PATH = Path(\"/content/prefab_advanced_tutorial_app.py\")\nHTML_PATH = Path(\"/content/prefab_advanced_dashboard.html\")\nsubprocess.check_call([\n sys.executable,\n \"-m\",\n \"pip\",\n \"install\",\n \"-q\",\n f\"prefab-ui=={PREFAB_VERSION}\",\n])\nAPP_CODE = \"\"\n```\n\nWe set up the Colab environment by importing the required Python utilities and defining the Prefab version, app path, and HTML export path. We install the pinned prefab-ui package so that the tutorial runs consistently without version-related issues. We also initialize an empty APP_CODE string, which we use to build the complete Prefab application step by step.\n\n```\nAPP_CODE += r'''\n```\n\n**Generating Synthetic Operations Data**\n\n``` python\nimport random\nfrom collections import Counter, defaultdict\nfrom datetime import date, timedelta\nfrom prefab_ui.actions import AppendState, OpenLink, PopState, SetState, ShowToast, ToggleState\nfrom prefab_ui.app import PrefabApp\nfrom prefab_ui.components import (\n Alert, AlertDescription, AlertTitle, Badge, Button, Card, CardContent,\n CardDescription, CardFooter, CardHeader, CardTitle, Code, Column,\n DataTable, DataTableColumn, Form, Grid, H2, Input, Markdown, Mermaid,\n Metric, Muted, Progress, Ring, Row, Slider, Small, Switch, Tab, Tabs,\n Text\n)\nfrom prefab_ui.components.charts import (\n BarChart, ChartSeries, LineChart, PieChart, RadarChart, ScatterChart,\n Sparkline\n)\nfrom prefab_ui.components.control_flow import Else, ForEach, If\nfrom prefab_ui.rx import EVENT, STATE\nrandom.seed(42)\nTODAY = date.today()\nDATES = [TODAY - timedelta(days=29 - i) for i in range(30)]\nREGIONS = [\"All\", \"APAC\", \"EMEA\", \"NA\", \"LATAM\"]\nPIPELINES = [\n \"Customer 360 ETL\",\n \"Invoice OCR\",\n \"LLM Triage\",\n \"Risk Scoring\",\n \"Forecast Sync\",\n \"Warehouse Load\",\n]\nOWNERS = [\"Data Platform\", \"AI Apps\", \"Revenue Ops\", \"Risk Engineering\"]\nSTATES = [\"Completed\", \"Completed\", \"Completed\", \"Completed\", \"Late\", \"Failed\"]\nPRIORITIES = [\"P0\", \"P1\", \"P2\", \"P3\"]\nruns = []\ndaily_region_rows = []\nfor d in DATES:\n for region in REGIONS[1:]:\n region_bias = {\n \"APAC\": 0.96,\n \"EMEA\": 0.94,\n \"NA\": 0.97,\n \"LATAM\": 0.91,\n }[region]\n volume = random.randint(32, 78)\n failures = 0\n late = 0\n total_cost = 0.0\n total_latency = 0.0\n total_revenue = 0.0\n for i in range(volume):\n pipeline = random.choice(PIPELINES)\n owner = random.choice(OWNERS)\n state = random.choices(\n STATES,\n weights=[\n region_bias * 10,\n 6,\n 4,\n 3,\n 1.2,\n max(0.2, (1 - region_bias) * 16),\n ],\n k=1,\n )[0]\n duration = max(\n 12,\n int(\n random.gauss(95, 35)\n + (20 if state == \"Late\" else 0)\n + (45 if state == \"Failed\" else 0)\n ),\n )\n cost = round(max(0.09, random.lognormvariate(-1.15, 0.55) + duration / 1800), 2)\n revenue = round(random.uniform(1.2, 8.5) * (1.3 if state == \"Completed\" else 0.6), 2)\n priority = random.choices(PRIORITIES, weights=[1, 3, 7, 10], k=1)[0]\n if state == \"Failed\":\n failures += 1\n if state == \"Late\":\n late += 1\n total_cost += cost\n total_latency += duration\n total_revenue += revenue\n if d >= TODAY - timedelta(days=10) and (state in {\"Failed\", \"Late\"} or random.random() < 0.05):\n runs.append({\n \"run_id\": f\"{d.strftime('%m%d')}-{region[:2]}-{len(runs)+1:04d}\",\n \"date\": d.strftime(\"%Y-%m-%d\"),\n \"pipeline\": pipeline,\n \"owner\": owner,\n \"region\": region,\n \"state\": state,\n \"priority\": priority,\n \"duration_s\": duration,\n \"cost_usd\": cost,\n \"revenue_k\": revenue,\n \"sla_gap\": round(max(0, duration - 120) / 60, 1),\n })\n daily_region_rows.append({\n \"date\": d.strftime(\"%b %d\"),\n \"region\": region,\n \"runs\": volume,\n \"failures\": failures,\n \"late\": late,\n \"success_rate\": round(100 * (volume - failures - late * 0.35) / volume, 1),\n \"avg_latency\": round(total_latency / volume, 1),\n \"cost_usd\": round(total_cost, 2),\n \"revenue_k\": round(total_revenue, 1),\n })\nruns = sorted(\n runs,\n key=lambda r: (r[\"priority\"], r[\"state\"] != \"Failed\", -r[\"duration_s\"])\n)[:80]\ndef aggregate_daily(rows):\n by_date = defaultdict(lambda: {\n \"date\": \"\",\n \"runs\": 0,\n \"failures\": 0,\n \"late\": 0,\n \"cost_usd\": 0.0,\n \"revenue_k\": 0.0,\n \"latency_weighted\": 0.0,\n })\n for r in rows:\n bucket = by_date[r[\"date\"]]\n bucket[\"date\"] = r[\"date\"]\n bucket[\"runs\"] += r[\"runs\"]\n bucket[\"failures\"] += r[\"failures\"]\n bucket[\"late\"] += r[\"late\"]\n bucket[\"cost_usd\"] += r[\"cost_usd\"]\n bucket[\"revenue_k\"] += r[\"revenue_k\"]\n bucket[\"latency_weighted\"] += r[\"avg_latency\"] * r[\"runs\"]\n out = []\n for d in [x.strftime(\"%b %d\") for x in DATES]:\n b = by_date[d]\n if b[\"runs\"]:\n b[\"success_rate\"] = round(100 * (b[\"runs\"] - b[\"failures\"] - b[\"late\"] * 0.35) / b[\"runs\"], 1)\n b[\"avg_latency\"] = round(b[\"latency_weighted\"] / b[\"runs\"], 1)\n b[\"cost_usd\"] = round(b[\"cost_usd\"], 2)\n b[\"revenue_k\"] = round(b[\"revenue_k\"], 1)\n del b[\"latency_weighted\"]\n out.append(dict(b))\n return out\ndef aggregate_regions(rows):\n by_region = defaultdict(lambda: {\n \"region\": \"\",\n \"runs\": 0,\n \"failures\": 0,\n \"late\": 0,\n \"cost_usd\": 0.0,\n \"revenue_k\": 0.0,\n \"latency_weighted\": 0.0,\n })\n for r in rows:\n b = by_region[r[\"region\"]]\n b[\"region\"] = r[\"region\"]\n b[\"runs\"] += r[\"runs\"]\n b[\"failures\"] += r[\"failures\"]\n b[\"late\"] += r[\"late\"]\n b[\"cost_usd\"] += r[\"cost_usd\"]\n b[\"revenue_k\"] += r[\"revenue_k\"]\n b[\"latency_weighted\"] += r[\"avg_latency\"] * r[\"runs\"]\n out = []\n for region in REGIONS[1:]:\n b = by_region[region]\n b[\"success_rate\"] = round(100 * (b[\"runs\"] - b[\"failures\"] - b[\"late\"] * 0.35) / b[\"runs\"], 1)\n b[\"avg_latency\"] = round(b[\"latency_weighted\"] / b[\"runs\"], 1)\n b[\"cost_usd\"] = round(b[\"cost_usd\"], 2)\n b[\"revenue_k\"] = round(b[\"revenue_k\"], 1)\n b[\"roi\"] = round(b[\"revenue_k\"] / max(1, b[\"cost_usd\"]), 1)\n del b[\"latency_weighted\"]\n out.append(dict(b))\n return out\ndef make_status_rows(table_rows):\n counts = Counter(r[\"state\"] for r in table_rows)\n return [{\"state\": k, \"count\": v} for k, v in counts.items()]\ndef make_pipeline_rows(table_rows):\n counts = Counter(r[\"pipeline\"] for r in table_rows)\n return [{\"pipeline\": k, \"count\": v} for k, v in counts.most_common()]\ndef make_kpis(region, daily_rows, table_rows):\n runs_count = sum(r[\"runs\"] for r in daily_rows)\n failures = sum(r[\"failures\"] for r in daily_rows)\n late = sum(r[\"late\"] for r in daily_rows)\n cost = sum(r[\"cost_usd\"] for r in daily_rows)\n revenue = sum(r[\"revenue_k\"] for r in daily_rows)\n return {\n \"region\": region,\n \"runs\": runs_count,\n \"success_rate\": round(100 * (runs_count - failures - late * 0.35) / max(1, runs_count), 1),\n \"avg_latency\": round(sum(r[\"avg_latency\"] * r[\"runs\"] for r in daily_rows) / max(1, runs_count), 1),\n \"cost_usd\": round(cost, 2),\n \"revenue_k\": round(revenue, 1),\n \"roi\": round(revenue / max(1, cost), 1),\n \"open_issues\": len(table_rows),\n \"p0p1\": sum(1 for r in table_rows if r[\"priority\"] in {\"P0\", \"P1\"}),\n \"failure_rate\": round(100 * failures / max(1, runs_count), 2),\n \"spark\": [r[\"success_rate\"] for r in daily_rows[-14:]],\n }\nDAILY_BY_REGION = {\"All\": aggregate_daily(daily_region_rows)}\nREGION_ROWS = aggregate_regions(daily_region_rows)\nfor region in REGIONS[1:]:\n DAILY_BY_REGION[region] = [r for r in daily_region_rows if r[\"region\"] == region]\nRUNS_BY_REGION = {\n region: [r for r in runs if region == \"All\" or r[\"region\"] == region]\n for region in REGIONS\n}\nSTATUS_BY_REGION = {\n region: make_status_rows(RUNS_BY_REGION[region])\n for region in REGIONS\n}\nPIPELINE_BY_REGION = {\n region: make_pipeline_rows(RUNS_BY_REGION[region])\n for region in REGIONS\n}\nKPI_BY_REGION = {\n region: make_kpis(region, DAILY_BY_REGION[region], RUNS_BY_REGION[region])\n for region in REGIONS\n}\nWATCHLIST = sorted(\n runs,\n key=lambda r: (r[\"priority\"], r[\"state\"] != \"Failed\", -r[\"sla_gap\"])\n)[:8]\nSCATTER_ROWS = [\n {\n \"region\": r[\"region\"],\n \"success_rate\": r[\"success_rate\"],\n \"cost_usd\": r[\"cost_usd\"],\n \"avg_latency\": r[\"avg_latency\"],\n }\n for r in REGION_ROWS\n]\nRADAR_ROWS = [\n {\"metric\": \"Success\", **{r[\"region\"]: r[\"success_rate\"] for r in REGION_ROWS}},\n {\"metric\": \"ROI\", **{r[\"region\"]: min(100, r[\"roi\"] * 8) for r in REGION_ROWS}},\n {\"metric\": \"Latency\", **{r[\"region\"]: max(0, 100 - r[\"avg_latency\"] / 2) for r in REGION_ROWS}},\n {\"metric\": \"Cost\", **{r[\"region\"]: max(0, 100 - r[\"cost_usd\"] / 20) for r in REGION_ROWS}},\n]\nREGION_ACTIONS = {\n region: [\n SetState(\"selected_region\", region),\n SetState(\"line_rows\", DAILY_BY_REGION[region]),\n SetState(\"table_rows\", RUNS_BY_REGION[region]),\n SetState(\"status_rows\", STATUS_BY_REGION[region]),\n SetState(\"pipeline_rows\", PIPELINE_BY_REGION[region]),\n SetState(\"region_kpis\", KPI_BY_REGION[region]),\n SetState(\"selected_run\", None),\n ShowToast(f\"Region set to {region}\", variant=\"info\", duration=1800),\n ]\n for region in REGIONS\n}\n'''\n```\n\nWe add the main imports for Prefab components, actions, charts, control flow, and reactive state handling. We generate realistic synthetic operations data across regions, pipelines, owners, states, priorities, costs, latency, and revenue. We also create aggregation functions and prepare datasets that power the dashboard’s charts, metrics, filters, tables, and watchlist.\n\n```\nAPP_CODE += r'''\n```\n\n**Building the Overview Tab**\n\n```\ninitial_state = {\n \"selected_region\": \"All\",\n \"line_rows\": DAILY_BY_REGION[\"All\"],\n \"table_rows\": RUNS_BY_REGION[\"All\"],\n \"status_rows\": STATUS_BY_REGION[\"All\"],\n \"pipeline_rows\": PIPELINE_BY_REGION[\"All\"],\n \"region_kpis\": KPI_BY_REGION[\"All\"],\n \"selected_run\": None,\n \"slo_target\": 94,\n \"operator_name\": \"Colab Builder\",\n \"notes\": [{\"note\": \"Click a run row to inspect it, then add triage notes here.\"}],\n \"watchlist\": WATCHLIST,\n \"compact\": False,\n \"dark_mode\": False,\n}\nwith PrefabApp(\n title=\"Prefab Advanced Colab Tutorial\",\n state=initial_state,\n css_class=\"max-w-7xl mx-auto p-6\",\n) as app:\n with Column(gap=6):\n with Row(justify=\"between\", align=\"center\", gap=4):\n with Column(gap=1):\n H2(\"Prefab Advanced Operations Dashboard\")\n Muted(\n \"A complete Colab-ready tutorial: Python DSL, reactive state, \"\n \"charts, tables, forms, conditionals, actions, Mermaid, and static export.\"\n )\n with Row(gap=2, align=\"center\"):\n Badge(f\"Region: {STATE.selected_region}\", variant=\"info\")\n Badge(f\"Operator: {STATE.operator_name}\", variant=\"secondary\")\n Button(\n \"Docs\",\n variant=\"outline\",\n onClick=OpenLink(\"https://prefab.prefect.io/docs/welcome\"),\n )\n with Alert(variant=\"info\", icon=\"sparkles\"):\n AlertTitle(\"What this app demonstrates\")\n AlertDescription(\n \"Everything below is composed in Python. The exported HTML runs client-side \"\n \"with no backend, while actions update Prefab state instantly.\"\n )\n with Card():\n with CardHeader():\n CardTitle(\"Interactive controls\")\n CardDescription(\n \"Use state actions to swap datasets, adjust SLO targets, and personalize \"\n \"the UI without JavaScript.\"\n )\n with CardContent():\n with Grid(columns={\"sm\": 1, \"md\": 2, \"lg\": 4}, gap=4):\n with Column(gap=2):\n Small(\"Region quick filters\")\n with Row(gap=2):\n for region in REGIONS:\n Button(\n region,\n size=\"sm\",\n variant=\"secondary\" if region != \"All\" else \"default\",\n onClick=REGION_ACTIONS[region],\n )\n with Column(gap=2):\n Small(\"SLO target\")\n Slider(\n value=STATE.slo_target,\n min=80,\n max=99,\n step=0.5,\n onChange=SetState(\"slo_target\", EVENT),\n gradient=True,\n )\n Muted(f\"Target is {STATE.slo_target}% successful runs\")\n with Column(gap=2):\n Small(\"Operator name\")\n Input(\n value=STATE.operator_name,\n placeholder=\"Your name\",\n on_change=SetState(\"operator_name\", EVENT),\n )\n with Column(gap=2):\n Small(\"Client-side toggles\")\n Switch(\n value=STATE.compact,\n label=\"Compact review mode\",\n onChange=ToggleState(\"compact\"),\n )\n Switch(\n value=STATE.dark_mode,\n label=\"Dark-mode flag\",\n onChange=ToggleState(\"dark_mode\"),\n )\n with Tabs(value=\"overview\"):\n with Tab(\"Overview\", value=\"overview\"):\n with Column(gap=5):\n with Grid(columns={\"sm\": 1, \"md\": 2, \"lg\": 4}, gap=4):\n Metric(\n label=\"Runs\",\n value=STATE.region_kpis.runs,\n description=f\"Selected slice: {STATE.selected_region}\",\n )\n Metric(\n label=\"Success rate\",\n value=f\"{STATE.region_kpis.success_rate}%\",\n delta=f\"Target {STATE.slo_target}%\",\n trend=\"up\",\n trendSentiment=\"positive\",\n )\n Metric(\n label=\"Avg latency\",\n value=f\"{STATE.region_kpis.avg_latency}s\",\n description=\"Weighted 30-day average\",\n )\n Metric(\n label=\"ROI index\",\n value=STATE.region_kpis.roi,\n description=\"Revenue thousands per USD cost\",\n )\n with Grid(columns={\"sm\": 1, \"lg\": 3}, gap=4):\n with Card(css_class=\"lg:col-span-2\"):\n with CardHeader():\n CardTitle(\"Reliability trend\")\n CardDescription(\n \"Line chart bound to a reactive state key. \"\n \"Region buttons replace the whole data list.\"\n )\n with CardContent():\n LineChart(\n data=STATE.line_rows,\n xAxis=\"date\",\n series=[\n ChartSeries(dataKey=\"success_rate\", label=\"Success %\"),\n ChartSeries(dataKey=\"avg_latency\", label=\"Avg latency\"),\n ],\n height=330,\n curve=\"smooth\",\n showDots=False,\n showLegend=True,\n )\n with Card():\n with CardHeader():\n CardTitle(\"SLO health\")\n CardDescription(\n \"Progress and ring components read live KPI and target state.\"\n )\n with CardContent():\n with Column(gap=4, align=\"center\"):\n Ring(\n value=STATE.region_kpis.success_rate,\n target=STATE.slo_target,\n label=f\"{STATE.region_kpis.success_rate}%\",\n size=\"lg\",\n gradient=True,\n )\n Progress(\n value=STATE.region_kpis.success_rate,\n target=STATE.slo_target,\n max=100,\n gradient=True,\n )\n Sparkline(\n data=STATE.region_kpis.spark,\n height=56,\n curve=\"smooth\",\n fill=True,\n )\n with If(STATE.region_kpis.success_rate >= STATE.slo_target):\n Badge(\"Meeting target\", variant=\"success\")\n with Else():\n Badge(\"Below target\", variant=\"warning\")\n with Grid(columns={\"sm\": 1, \"lg\": 2}, gap=4):\n with Card():\n with CardHeader():\n CardTitle(\"Open issue status mix\")\n with CardContent():\n PieChart(\n data=STATE.status_rows,\n dataKey=\"count\",\n nameKey=\"state\",\n innerRadius=55,\n showLegend=True,\n height=310,\n )\n with Card():\n with CardHeader():\n CardTitle(\"Affected pipelines\")\n with CardContent():\n BarChart(\n data=STATE.pipeline_rows,\n xAxis=\"pipeline\",\n series=[ChartSeries(dataKey=\"count\", label=\"Open issues\")],\n height=310,\n showLegend=False,\n )\n'''\n```\n\nWe define the initial application state and start building the Prefab dashboard layout. We create the dashboard header, region filters, SLO slider, operator input, toggles, and the main overview tab. We connect reactive state to metrics, line charts, progress indicators, rings, sparklines, pie charts, and bar charts so the interface updates dynamically.\n\n```\nAPP_CODE += r'''\n```\n\n**Run Explorer and Diagnostics**\n\n```\n with Tab(\"Run Explorer\", value=\"runs\"):\n with Column(gap=4):\n with Card():\n with CardHeader():\n CardTitle(\"Searchable sortable run table\")\n CardDescription(\n \"Click any row. Prefab stores the row object in state and \"\n \"conditionally renders the detail panel.\"\n )\n with CardContent():\n DataTable(\n columns=[\n DataTableColumn(key=\"run_id\", header=\"Run ID\", sortable=True),\n DataTableColumn(key=\"date\", header=\"Date\", sortable=True),\n DataTableColumn(key=\"pipeline\", header=\"Pipeline\", sortable=True),\n DataTableColumn(key=\"owner\", header=\"Owner\", sortable=True),\n DataTableColumn(key=\"region\", header=\"Region\", sortable=True),\n DataTableColumn(key=\"state\", header=\"State\", sortable=True),\n DataTableColumn(key=\"priority\", header=\"Priority\", sortable=True),\n DataTableColumn(\n key=\"duration_s\",\n header=\"Duration\",\n sortable=True,\n align=\"right\",\n ),\n DataTableColumn(\n key=\"cost_usd\",\n header=\"Cost\",\n sortable=True,\n align=\"right\",\n ),\n ],\n rows=STATE.table_rows,\n search=True,\n paginated=True,\n pageSize=12,\n onRowClick=SetState(\"selected_run\", EVENT),\n )\n with If(STATE.selected_run):\n with Card():\n with CardHeader():\n CardTitle(f\"Selected run: {STATE.selected_run.run_id}\")\n CardDescription(\n f\"{STATE.selected_run.pipeline} in {STATE.selected_run.region}\"\n )\n with CardContent():\n with Grid(columns={\"sm\": 1, \"md\": 4}, gap=3):\n Metric(label=\"State\", value=STATE.selected_run.state)\n Metric(label=\"Priority\", value=STATE.selected_run.priority)\n Metric(\n label=\"Duration\",\n value=f\"{STATE.selected_run.duration_s}s\",\n )\n Metric(\n label=\"SLA gap\",\n value=f\"{STATE.selected_run.sla_gap} min\",\n )\n with CardFooter():\n Button(\n \"Clear selection\",\n variant=\"outline\",\n onClick=SetState(\"selected_run\", None),\n )\n with Tab(\"Diagnostics\", value=\"diagnostics\"):\n with Grid(columns={\"sm\": 1, \"lg\": 2}, gap=4):\n with Card():\n with CardHeader():\n CardTitle(\"Regional reliability map\")\n CardDescription(\n \"Scatter chart compares cost, latency, and success by region.\"\n )\n with CardContent():\n ScatterChart(\n data=SCATTER_ROWS,\n xAxis=\"cost_usd\",\n yAxis=\"success_rate\",\n zAxis=\"avg_latency\",\n series=[ChartSeries(dataKey=\"region\", label=\"Region\")],\n height=320,\n )\n with Card():\n with CardHeader():\n CardTitle(\"Balanced score radar\")\n CardDescription(\n \"Scores are normalized for visual comparison across regions.\"\n )\n with CardContent():\n RadarChart(\n data=RADAR_ROWS,\n axisKey=\"metric\",\n series=[\n ChartSeries(dataKey=\"APAC\"),\n ChartSeries(dataKey=\"EMEA\"),\n ChartSeries(dataKey=\"NA\"),\n ChartSeries(dataKey=\"LATAM\"),\n ],\n height=320,\n )\n with Card(css_class=\"lg:col-span-2\"):\n with CardHeader():\n CardTitle(\"P0/P1 watchlist\")\n CardDescription(\n \"ForEach repeats a mini-card for each high-priority item.\"\n )\n with CardContent():\n with Grid(columns={\"sm\": 1, \"md\": 2, \"lg\": 4}, gap=3):\n with ForEach(\"watchlist\") as item:\n with Card():\n with CardHeader():\n with Row(justify=\"between\", align=\"center\"):\n CardTitle(item.run_id)\n Badge(item.priority, variant=\"destructive\")\n CardDescription(item.pipeline)\n with CardContent():\n Text(\n f\"{item.region} · {item.state} · \"\n f\"gap {item.sla_gap} min\"\n )\n'''\n```\n\nWe add the run explorer and diagnostics sections of the application. We build a searchable and sortable data table where we can click a row and inspect detailed run information using conditional rendering. We also add diagnostic visualizations such as scatter charts, radar charts, and a high-priority watchlist rendered through repeated Prefab cards.\n\n```\nAPP_CODE += r'''\n```\n\n**Exporting Static HTML Dashboard**\n\n```\n with Tab(\"Triage Notes\", value=\"notes\"):\n with Grid(columns={\"sm\": 1, \"lg\": 2}, gap=4):\n with Card():\n with CardHeader():\n CardTitle(\"Add client-side notes\")\n CardDescription(\n \"The form appends submitted values to a state list. \"\n \"No backend is required.\"\n )\n with CardContent():\n with Form(\n on_submit=[\n AppendState(\"notes\", EVENT),\n ShowToast(\"Note added\", variant=\"success\"),\n ]\n ):\n Input(\n name=\"note\",\n placeholder=\"Example: Escalate APAC LLM Triage failures\",\n required=True,\n )\n Button(\"Add note\", buttonType=\"submit\")\n with CardFooter():\n Button(\n \"Remove latest note\",\n variant=\"outline\",\n onClick=PopState(\"notes\", -1),\n )\n with Card():\n with CardHeader():\n CardTitle(\"Notes in state\")\n CardDescription(\"ForEach renders each submitted note.\")\n with CardContent():\n with Column(gap=2):\n with ForEach(\"notes\") as note:\n with Alert(variant=\"success\", icon=\"check\"):\n AlertDescription(note.note)\n with Tab(\"Architecture\", value=\"architecture\"):\n with Column(gap=4):\n Markdown(\"\"\"\n### How this tutorial maps to real Prefab work\n1. Build data in Python.\n2. Compose UI components with `with` blocks.\n3. Bind data and labels to reactive state using `STATE` / `Rx`.\n4. Trigger `SetState`, `AppendState`, `ToggleState`, and `ShowToast` from UI events.\n5. Export to HTML for static sharing, or serve locally with `prefab serve`.\n\"\"\")\n Mermaid(\"\"\"\nflowchart LR\n A[Python data and business logic] --> B[Prefab component tree]\n B --> C[JSON wire protocol]\n C --> D[Bundled React renderer]\n D --> E[Interactive dashboard]\n E --> F[Client-side state actions]\n F --> B\n\"\"\")\n Code(\n \"\"\"prefab export /content/prefab_advanced_tutorial_app.py -o /content/prefab_advanced_dashboard.html\nprefab serve /content/prefab_advanced_tutorial_app.py --reload\"\"\",\n language=\"bash\",\n )\n'''\nAPP_PATH.write_text(APP_CODE)\nprint(\"Verifying Prefab installation...\")\nsubprocess.check_call([sys.executable, \"-m\", \"prefab_ui.cli\", \"version\"])\nprint(\"\\nExporting Prefab app to static HTML...\")\nsubprocess.check_call([\n sys.executable,\n \"-m\",\n \"prefab_ui.cli\",\n \"export\",\n str(APP_PATH),\n \"-o\",\n str(HTML_PATH),\n])\nprint(f\"\\nPython app written to: {APP_PATH}\")\nprint(f\"Static dashboard written to: {HTML_PATH}\")\nprint(\"\\nDownload links:\")\ndisplay(FileLink(str(APP_PATH)))\ndisplay(FileLink(str(HTML_PATH)))\nhtml_bytes = HTML_PATH.read_bytes()\nencoded = base64.b64encode(html_bytes).decode(\"utf-8\")\ndisplay(HTML(f\"\"\"\n
\n
Prefab Advanced Dashboard Preview
\n
\n Use the tabs, region buttons, SLO slider, table row clicks, and triage-note form inside the embedded app.\n
\n
\n\n\"\"\"))\n```\n\nWe complete the dashboard by adding triage notes, architecture documentation, a Mermaid flowchart, and command examples. We write the accumulated Prefab code into a Python file, verify the installation, export the app as static HTML, and generate download links. We then embed the exported dashboard inside Colab using an iframe so we can interact with the finished application directly in the notebook.\n\n**Conclusion**\n\nIn conclusion, we successfully created a complete Prefab-powered dashboard that combines Python data generation, reactive state management, interactive visual components, and static HTML export into a single practical workflow. We worked with filters, metrics, charts, data tables, conditionals, forms, notes, and architecture diagrams to understand how Prefab can support real-world dashboards and internal tools. By running the project in Google Colab, we kept the setup simple while still building an advanced application with a production-style UI.\n\nCheck out the [Full Codes with Notebook](https://github.com/MARKTECHPOST-AI-MEDIA-INC/AI-Agents-Projects-Tutorials/blob/main/Data%20Analysis/prefab_reactive_dashboard_tutorial_Marktechpost.ipynb)[.](https://github.com/NVlabs/SpatialClaw)** **Also, feel free to follow us on ** Twitter** and don’t forget to join our\n\n**and Subscribe to**\n\n[150k+ML SubReddit](https://www.reddit.com/r/machinelearningnews/)**. Wait! are you on telegram?**\n\n[our Newsletter](https://www.aidevsignals.com/)\n\n[now you can join us on telegram as well.](https://t.me/machinelearningresearchnews)Need to partner with us for promoting your GitHub Repo OR Hugging Face Page OR Product Release OR Webinar etc.? [Connect with us](https://forms.gle/wbash1wF6efRj8G58)\n\nSana Hassan, a consulting intern at Marktechpost and dual-degree student at IIT Madras, is passionate about applying technology and AI to address real-world challenges. With a keen interest in solving practical problems, he brings a fresh perspective to the intersection of AI and real-life solutions.\n\n- Sana Hassan\n- Sana Hassan\n- Sana Hassan\n- Sana Hassan", "url": "https://wpnews.pro/news/how-to-design-python-first-interactive-dashboards-with-prefab-reactive-ui-and", "canonical_source": "https://www.marktechpost.com/2026/06/21/how-to-design-python-first-interactive-dashboards-with-prefab-reactive-ui-components-and-static-html-export/", "published_at": "2026-06-22 00:13:29+00:00", "updated_at": "2026-06-22 00:29:10.785603+00:00", "lang": "en", "topics": ["developer-tools"], "entities": ["Prefab", "Google Colab", "PrefectHQ", "Marktechpost"], "alternates": {"html": "https://wpnews.pro/news/how-to-design-python-first-interactive-dashboards-with-prefab-reactive-ui-and", "markdown": "https://wpnews.pro/news/how-to-design-python-first-interactive-dashboards-with-prefab-reactive-ui-and.md", "text": "https://wpnews.pro/news/how-to-design-python-first-interactive-dashboards-with-prefab-reactive-ui-and.txt", "jsonld": "https://wpnews.pro/news/how-to-design-python-first-interactive-dashboards-with-prefab-reactive-ui-and.jsonld"}}