webwrench Examples

Sixteen progressively complex examples covering every major feature of the framework — from a one-liner Hello World to multi-page apps with live updates, theming, and modal dialogs.

Running an example

python examples/01_hello_world.py
# then open http://localhost:6502

Example 08 exports a static HTML file instead of starting a server.

All examples

01 Hello World 01_hello_world.py

The minimal webwrench app. Adds a title, paragraph, and markdown block, then calls ww.serve(). Establishes the script-mode pattern you will use in every subsequent example.

script mode title text serve

02 Interactive Chart 02_interactive_chart.py

A bar chart and metric driven by a slider. Introduces callbacks (@slider.on_change) and demonstrates real-time multi-widget updates over SSE.

chart slider callback SSE

03 Multiple Chart Types 03_multi_chart.py

Bar, line, and pie charts side-by-side in a three-column layout, all sharing the same quarterly-revenue dataset. Uses themes, metric cards, dividers, and a summary data table.

columns chart metric card theme table

04 Dashboard Layout 04_dashboard.py

A structured dashboard with a KPI metrics row at the top and a two-column body containing a chart and a table. Shows proportional column sizing ([2, 1]).

columns metric chart table

05 Form Widgets Showcase 05_form_widgets.py

Every available input widget: text, textarea, slider, select, radio, checkbox, number, date picker, colour picker, and file upload. Widgets are grouped into cards and columns, with a submit button that fires a toast notification.

widgets card button toast

06 Data Table 06_data_table.py

A sortable, searchable, paginated employee directory. Includes summary metrics (headcount, average salary) and a department bar chart above the full table.

table sortable searchable paginate metric

07 Theming 07_theming.py

Dynamic theme switching between light, dark, ocean, and forest presets via a dropdown. Shows how a single ww.theme() call restyles every component on the page.

theme select callback

08 Static Export 08_static_export.py

Builds a quarterly report with charts, metrics, and a table, then writes a self-contained HTML file via ww.export(). No server needed — open the output directly in a browser.

export static chart table

09 Multi-Page App 09_multi_page_app.py

Uses App mode with @app.page() decorators to register three routes (home, about, contact) with ww.nav() for cross-page navigation. Each handler receives a PageContext with the same API as module-level functions.

App mode routing PageContext

10 Tabs & Accordion 10_tabs_and_accordion.py

Tabbed navigation with ww.tabs() and collapsible sections with ww.accordion(). Shows how context managers organise content within each pane or section.

tabs accordion context manager

11 Sidebar Navigation 11_sidebar_nav.py

Classic sidebar + main-content layout using ww.sidebar() as a context manager and ww.nav() for navigation links.

sidebar nav layout

12 Multiple Datasets 12_chart_datasets.py

Overlays three product-revenue data series on a single chart using the datasets parameter. Includes summary metrics and a chart-type selector dropdown.

chart datasets multi-series

13 DataFrame-style Plot 13_dataframe_plot.py

Uses ww.plot() with dict-based data and x / y column specifications — pandas-like plotting without the dependency.

plot DataFrame x/y columns

14 Live Updates 14_live_updates.py

A progress bar, click counter, and status text that advance on each button click. Demonstrates widget.update() for in-place DOM patches and the callback → SSE → DOM update cycle.

progress button update toast

15 Grid Layout 15_grid_layout.py

Uses ww.grid("1fr 1fr 1fr") for a CSS Grid containing nested cards with metrics, charts, and text.

grid card responsive

16 Modal Dialog 16_modal_dialog.py

A modal dialog with a nested feedback form (textarea, rating slider, submit button). Demonstrates ww.modal() as a context manager with a toast-triggering callback.

modal button form

Learning path

If you are new to webwrench, work through the examples in this order:

Stage	Examples	Focus
1. Basics	01 – 03	Output elements, charts, columns, themes
2. Layouts	04, 10, 11, 15	Dashboards, tabs, sidebars, grids
3. Interactivity	02, 05, 14, 16	Widgets, callbacks, live updates, modals
4. Data	06, 12, 13	Tables, multi-dataset charts, DataFrame plots
5. Advanced	07 – 09	Theming, static export, multi-page apps