{"panel":"/showcase/states"}

Web widgets showcase

{"_back":"^?panel="}

50 States

This screen brings together multiple widgets to create an interactive user experience. A table widget is supported by sorters located in each of the column titles, two paginators, a quick search filter and a page size selector. The widgets interact with each other via the page's state variables which can be observed by opening the debugger in the lower right corner. Resize the window to see how columns adjust dynamically to different widths.
Page 1235
Code NamePopulationPopLand (sq mi)Land (sq mi)Pop densityDen​sityGDPGDPGDP/capitaGDP per capita
AKAlaska738,0231M570,641570.6K1.291$64,257M$64B$87,066$87K
ALAlabama5,073,1875M50,64550.6K100.17100$275,396M$275B$54,285$54K
ARArkansas3,030,6463M52,03552.0K58.2458$163,779M$163B$54,041$54K
AZArizona7,303,3987M113,594113.6K64.2964$453,602M$453B$62,108$62K
CACalifornia39,995,07740M155,779155.8K256.74257$3,558,512M$3,558B$88,974$89K
COColorado5,922,6186M103,642103.6K57.1557$480,828M$480B$81,185$81K
CTConnecticut3,612,3144M4,8424.8K745.98746$317,907M$317B$88,006$88K
DEDelaware1,008,3501M1,9491.9K517.49517$86,673M$86B$85,955$86K
FLFlorida22,085,56322M53,62553.6K411.85412$1,371,468M$1,371B$62,098$62K
GAGeorgia10,916,76011M57,51357.5K189.81190$747,535M$747B$68,476$68K
rows
Page 1235

Text formatting

The Material typography scale and inline text-style helpers — colors, weights, sizes — across the framework's font stack.
open_in_newweb_assetdock_to_right

Code blocks

Server-side syntax highlighting via Chroma, with token classes mapped to Material design colors so the same markup recolors on theme change.
open_in_newweb_assetdock_to_right

Progress widget

Determinate and indeterminate progress indicators, plus the finite/infinite progress-status pattern for long-running operations.
open_in_newweb_assetdock_to_right

Toolbar widget

An action toolbar with grouped buttons and separators. Buttons that share a parent are automatically gathered into a toolbar without explicit configuration.
open_in_newweb_assetdock_to_right

Gallery widget

A horizontally-scrolling gallery of cards. Useful for featured-content rows or any list where horizontal swipe beats vertical scroll.
open_in_newweb_assetdock_to_right

Deck of cards widget

A responsive grid of cards that re-flows between 1, 2, and more columns depending on the viewport width. Good for dashboards or any uniform collection.
open_in_newweb_assetdock_to_right

Tab switcher widget

Tabbed content with smooth switching between sections. Each tab body is rendered server-side and revealed via the same state-driven redraw that powers the rest of the framework.
open_in_newweb_assetdock_to_right

Navigation widgets

The three flavors of side navigation — a compact strip, a labeled rail, and a full drawer — all driven by the same widget tree and adapting to the viewport.
open_in_newweb_assetdock_to_right

Form input widgets

Every form input widget on one page — text, email, password, OTP, dates, ranges, dropdowns, file uploads, color pickers, checkboxes, radios, star/sentiment ratings, filter and input chips, toggle switches, and the rich-text editor.
open_in_newweb_assetdock_to_right

Form validation

Client-side and server-side form validation working together: required fields, pattern matching, length limits, and custom predicate functions, with inline error messages that survive a server round-trip.
open_in_newweb_assetdock_to_right

Data table

A sortable, filterable, paginated table over a small US-states dataset. Quick-search, column sort, and page-size controls all use the same incremental-redraw plumbing the rest of the framework uses.
open_in_newweb_assetdock_to_right

CRUD

Standard create / read / update / delete flow over a per-session in-memory directory of contacts. Demonstrates form-driven persistence with validation, duplicate detection, and a record cap.
open_in_newweb_assetdock_to_right

Charts

Apache ECharts wrapped as bespa widgets. Bar, pie, column, and a US-states map all themed against the Material design tokens, with live theme switching.
open_in_newweb_assetdock_to_right

Mermaid

Mermaid diagrams (flowcharts, sequence, class, state, gantt) rendered client-side, themed against the Material design tokens, with optional zoom and pan interaction.
open_in_newweb_assetdock_to_right