All Examples
- Hello World!: A simple example to get you started with Wave.
- To-do List App: A simple multi-user To-do list application.
- Wizard: Create a multi-step wizard using form cards.
- Issue Tracker: Implement a simple issue tracker using a table to create master-detail views.
- Dashboard: Make a dashboard using a multitude of cards and update them live.
- Info / Tall: Create a tall information card displaying a title, caption, and either an icon or image.
- Article: Create an article card for longer texts.
- Info / Wide: Create a wide information card displaying a title, caption, and either an icon or image.
- Plot / Wide: Create a wide plot card displaying a plot with title and caption.
- Post card: Create a post card displaying persona, image, caption and optional buttons.
- Preview card: Create a preview card displaying an image with shadow overlay, title, social icons, caption, and button.
- Stat / Pie / Wide: Create a wide stat pie card displaying a pie chart.
- Tall Article Preview: Create a tall article preview card if you intend to show a little preview
- Wide Article Preview: Create a Wide Article Preview card displaying a persona, image, title, caption, and buttons.
- Profile: Create a profile card to display information about a user.
- Stat / Small: Create a stat card displaying a single value.
- Stat / Large: Create a stat card displaying a primary value, an auxiliary value and a caption.
- Stat / Gauge / Wide: Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.
- Stat / Gauge / Tall: Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.
- Stat / Bar / Wide: Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.
- Stat / Pie / Wide: Create a wide stat pie card displaying a pie chart.
- Stat / Bar / Large: Create a large captioned card displaying a primary value, an auxiliary value and a progress bar,
- Stat / Series / Small / Area: Create a small stat card displaying a primary value and a series plot.
- Stat / Series / Small / Interval: Create a small stat card displaying a primary value and a series plot.
- Stat / Series / Wide / Area: Create a wide stat card displaying a primary value, an auxiliary value and a series plot.
- Stat / Series / Wide / Interval: Create a wide stat card displaying a primary value, an auxiliary value and a series plot.
- Stat / Series / Tall / Area: Create a tall stat card displaying a primary value, an auxiliary value and a series plot.
- Stat / Series / Tall / Interval: Create a tall stat card displaying a primary value, an auxiliary value and a series plot.
- Stat / Table: Create a card displaying title, subtitle, and tabular data.
- Tall stat: Create a vertical label-value pairs collection.
- Layout / Position: How to adjust the position of cards on a page.
- Layout / Size: How to adjust the size of cards on a page.
- Layout / Responsive: How to create a responsive layout.
- Chatbot: Use this card for chatbot interactions.
- Chatbot / Stream: Use this card for chatbot interactions, supports text streaming.
- Chatbot / Events/ Stop: Use this card for chatbot interactions. Streaming can be stopped by the user.
- Chatbot / Events/ Scroll: Infinite scroll for previous messages.
- Chatbot / Events/ Feedback: Use thumbs up/down to provide feedback on the chatbot response.
- Chatbot / Events/ Suggestions: Use suggestions to simplify user interaction.
- Chatbot / Value: Use this card for chatbot interactions.
- Form: Use a form to collect data or show textual information.
- Form / Visible: Use "visible" property to control whether form element should be shown / hidden.
- Form / Text: Use markdown in a text component to display formatted content within a form.
- Form / Copyable Text: Use copyable text component to enable user quick text copy pasting.
- Form / Text / Sizes: Use text size variants to display formatted text using predefined font sizes.
- Form / Text / Alignment: Use text align to control alignment of text.
- Form / TextAnnotator: Use text annotator when you need to highlight text phrases.
- Form / Label: Use labels to give a name to a component or a group of components in a form.
- Form / Link: Use link to allow navigation to internal and external URLs.
- Form / Links: Use links to allow navigation to multiple internal and external URLs.
- Form / Progress: Use a progress bar to indicate completion status of an operation.
- Form / Progress / Updating: Update a progress bar's completion status periodically.
- Form / Message Bar: Use message bars to indicate relevant status information.
- Form / Textbox: Use a textbox to allow users to provide text inputs.
- Form / Textbox / Trigger: To handle live changes to a textbox, enable the `trigger` attribute.
- Form / Button: Use buttons to enable a user to commit a change or complete steps in a task.
- Form / Buttons: Use the `ui.buttons()` function to group related buttons.
- Form / Checkbox: Use checkboxes to switch between two mutually exclusive options.
- Form / Checklist: Use a checklist to group a set of related checkboxes.
- Form / Checklist / Inline: Use a checklist to group a set of related checkboxes.
- Form / Picker: Use pickers to allow users to select one or more choices, such as tags or files, from a list.
- Form / Picker / Selection: Pre-select choices while displaying a picker.
- Form / Dropdown: Use dropdowns to allow users to choose between available choices.
- Form / Choice Group: Use choice groups to let users select one option from two or more choices.
- Form / Combobox: Use comboboxes to allow users to either choose between available choices or indicate a choice by free-form editing.
- Form / Toggle: Use a toggle to present users with two mutually exclusive options (to turn settings on and off).
- Form / Spinbox: Use a spinbox to allow users to incrementally adjust a value in small steps.
- Form / Spinbox / Trigger: Enable the `trigger` attribute in order to handle live changes to a spinbox.
- Form / Slider: Use a slider to allow users to set a value within a specific range.
- Form / Range Slider: Use a range slider to allow users to select a value range (from, to).
- Form / Date Picker: Use date pickers to allow users to pick dates.
- Form / Date Picker / Trigger: To handle live changes to a date picker, enable the `trigger` attribute.
- Form / TimePicker: Use time pickers to allow users to pick times.
- Form / Color Picker: Use a color picker to allow a user to select a color.
- Form / Swatch Picker: Use a swatch picker to allow users to choose a from a specific set of colors.
- Form / Persona: Create an individual's persona or avatar, a visual representation of a person across products.
- Form / Facepile: A face pile displays a list of personas. Each circle represents a person and contains their image or initials.
- Form / Tabs: Use tabs within a form to navigate between two or more distinct content categories.
- Form / Separator: Use a separator to visually separate content into groups.
- Form / File Upload: Use a file upload component to allow users to upload files.
- Form / File Upload / Compact: Use a compact file upload component to take less form space.
- Form / Frame: Use a frame component in a form card to display HTML content inline.
- Form / Frame / Path: Use a frame component in a form card to display external web pages.
- Form / Template: Use a template component to render dynamic content using a HTML template.
- Form / Markup: Use a markup component to display formatted content using HTML.
- Form / Stepper: Use Stepper to show progress through numbered steps.
- Table / Markdown / Pandas: Display a pandas dataframe as a markdown table.
- Table: Use a table to display tabular data.
- Table / Sort: Allow sorting a table by specific columns.
- Table / Search: Enable searching a table across specific columns.
- Table / Filter: Enable filtering values for specific columns.
- Table / Filter / Backend: Filter table using Python.
- Table / Download: Allow downloading a table's data as CSV file.
- Table / Group by: Allow grouping a table by column values.
- Table / Groups: Manage data in custom groups
- Table / Events / Group: Register the `group_change` event to emit Wave event when group collapses or opens.
- Table / Preselection / Single: Use a table as an advanced single-select. To allow single selection,
- Table / Preselection / Multiple: Use a table as an advanced multi-select. To allow multiple selection,
- Table / Events / Select: Register the `select` event to emit Wave event on each table row selection.
- Table / Tags: Use tags in order to emphasize a specific value. For multiple tags in a single row use `,` as a delimiter.
- Table / Pagination: Use a paginated table to display large (100k+ rows) tabular data.
- Table / Pagination / Pandas: Use a paginated table to display large (100k+ rows) tabular data using pandas dataframe.
- Table / Pagination / H2O-3 Dataframe: Use a paginated table to display large (100m+ rows) tabular data using a H2O-3 dataframe.
- Table / Pagination / Minimal: Use a table with pagination to display large (100k+ rows) tabular data.
- Table / Pagination / Sort: Use a table with pagination to display large (100k+ rows) tabular data and allow sorting along the way.
- Table / Pagination / Filter: Use a table with pagination to display large (100k+ rows) tabular data and allow filtering along the way.
- Table / Pagination / Search: Use a table with pagination to display large (100k+ rows) tabular data and allow searching along the way.
- Table / Pagination / Download: Use a table with pagination to display large (100k+ rows) tabular data and provide data download option.
- Table / Pagination / Groups: Use a paginated table to display large (100k+ rows) tabular data managed in custom groups.
- Table / Menu: Allow group of commands with context menu for each row.
- Table / Markdown: Creates a table with Markdown content.
- Table / Markdown / Overflow: Creates a table with Markdown content that overflows
- Tags: Display a set of tags in a row. Each tag consists of a box with text inside.
- Image: Use an image card to display an image by specifying its URL or a data URL in case of the base64-encoded image.
- Image / Popup: Display a popup with the large image after clicking on the image. It's recommended to use a smaller image for `path` and larger (higher quality) image for the `path_popup`.
- Form / Image Annotator: Use when you need to annotate images.
- Form / Image Annotator / Events / Click: Register the `click` event to emit Wave event with cursor coordinates when the image is clicked.
- Form / Image Annotator / Events / Tool Change: Register a `tool_change` event to emit Wave event when the drawing function is changed.
- Form / Audio Annotator: Use when you need to annotate audio.
- Inline: Create an inline (horizontal) list of components.
- Image / Stream: Display an image and continuously update it in real time.
- Frame: Use a frame card to display HTML content.
- Frame / Path: Use a frame card to display external web pages.
- Template: Use a template card to render dynamic content using a HTML template.
- Template / Data: Update a template card's data periodically.
- Markdown: Use a markdown card to display formatted content using markdown.
- Markdown / Table: Display a table using markdown. That's different than having a table with Markdown content.
- Markdown / Data: Display dynamic formatted content using markdown.
- Markdown / Submit / Text: Use "?" to prefix the desired q.args.key that you want to have submitted after clicking a phrase.
- Markdown Code Theme: Pick from more than 100 themes for your code blocks.
- Markup: Use a markup card to display formatted content using HTML.
- Nav: Use nav cards to display sidebar navigation.
- Toolbar: Use toolbars to provide commands that operate on the content of a page.
- Tab: This example demonstrates how you can observe and handle changes to the browser's
- Tabs / Navigation: Navigate between two or more tabs.
- Breadcrumbs: Breadcrumbs should be used as a navigational aid in your app or site.
- Header: Use a header card to display a page header.
- Footer: Use a footer card to display a page footer.
- Routing: Use `on` and `run_on` to simplify query handling by routing queries to designated functions.
- Routing / Predicates: Use `on` and `run_on` with predicates to handle routing with custom conditions.
- Routing / Hash: Use the browser's [location hash](https://developer.mozilla.org/en-US/docs/Web/API/Location/hash)
- Routing / Hash / Parameters: Use the browser's [location hash](https://developer.mozilla.org/en-US/docs/Web/API/Location/hash)
- Routing / Toolbar: This example demonstrates how you can observe and handle changes to the browser's
- Context Menu: Display a context menu on a card.
- Form / Menu: Create a contextual menu component. Useful when you have a lot of links and want to conserve the space.
- Plot / Theme: Themeable plot showcase.
- Plot / Point: Make a scatterplot.
- Plot / Point / Shapes: Make a scatterplot with categories encoded as mark shapes.
- Plot / Point / Sizes: Make a scatterplot with mark sizes mapped to a continuous variable (a "bubble plot").
- Plot / Point / Map: Make a plot to compare quantities across categories. Similar to a heatmap,
- Plot / Point / Groups: Make a scatterplot with categories encoded as colors.
- Plot / Point / Annotation: Add annotations (points, lines and regions) to a plot.
- Plot / Point / Custom: Customize a plot's fill/stroke color, size and opacity.
- Plot / Interval: Make a column plot.
- Plot / Interval / Transpose: Make a bar plot.
- Plot / Interval / Groups: Make a grouped column plot.
- Plot / Interval / Groups / Transpose: Make a grouped bar plot.
- Plot / Interval / Labels: Make a column plot with labels on each bar.
- Plot / Interval / Range: Make a column plot with each bar representing high/low (or start/end) values.
- Plot / Interval / Transpose: Make a bar plot.
- Plot / Interval / Stacked: Make a stacked column plot.
- Plot / Interval / Stacked / Transpose: Make a stacked bar plot.
- Plot / Interval / Stacked / Grouped: Make a column plot with both stacked and grouped bars.
- Plot / Interval / Stacked / Grouped / Transpose: Make a bar plot with both stacked and grouped bars.
- Plot / Interval / Polar: Make a rose plot (a bar plot in polar coordinates).
- Plot / Interval / Polar / Stacked: Make a stacked rose plot (a stacked bar plot in polar coordinates).
- Plot / Interval / Theta: Make a "racetrack" plot (a bar plot in polar coordinates, transposed).
- Plot / Interval / Theta / Stacked: Make a stacked "racetrack" plot (a bar plot in polar coordinates, transposed).
- Plot / Interval / Helix: Make a bar plot in helical coordinates.
- Plot / Interval / Annotation: Add annotations to a column plot.
- Plot / Interval / Annotation / Transpose: Add annotations to a bar plot.
- Plot / Line: Make a line plot.
- Plot / Line / Groups: Make a multi-series line plot.
- Plot / Line / Smooth: Make a line plot using a smooth curve.
- Plot / Line / Step: Make a line plot with a step curve.
- Plot / Line / Step / After: Make a line plot with a step-after curve.
- Plot / Line / Step / Before: Make a line plot with a step-before curve.
- Plot / Line / Labels: Add labels to a line plot.
- Plot / Line / Labels / Custom: Add labels to a line plot.
- Plot / Line / Labels / Stroked: Customize label rendering: add a subtle outline to labels to improve readability.
- Plot / Line / Labels / Occlusion: Make a line plot with non-overlapping labels.
- Plot / Line / Annotation: Add annotations to a line plot.
- Plot / Path: Make a path plot.
- Plot / Path / Point: Make a path plot with an additional layer of points.
- Plot / Path / Smooth: Make a path plot with a smooth curve.
- Plot / Area: Make an area plot.
- Plot / Area / Groups: Make an area plot showing multiple categories.
- Plot / Area / Negative: Make an area plot showing positive and negative values.
- Plot / Area / Range: Make an area plot representing a range (band) of values.
- Plot / Area / Smooth: Make an area plot with a smooth curve.
- Plot / Area / Stacked: Make a stacked area plot.
- Plot / Area + Line: Make an area plot with an additional line layer on top.
- Plot / Area + Line / Smooth: Make a combined area + line plot using a smooth curve.
- Plot / Area + Line / Groups: Make an combined area + line plot showing multiple categories.
- Plot / Polygon: Make a heatmap.
- Plot / Histogram: Make a histogram.
- Plot / Schema: Make a box and whiskers plot.
- Plot / Schema / Transpose: Make a horizontal box and whiskers plot.
- Plot / Interaction / Zoom: Make a scatterplot with zoom enabled.
- Plot / Interaction / Brush: Make a scatterplot with brush enabled.
- Plot / Interaction / Drag move: Make a scatterplot with drag move enabled.
- Plot / Axis Titles: Display custom axis titles on a plot.
- Plot / Form: Display a plot inside a form.
- Plot / App: Make a plot from an app.
- Plot / Events: Handle events on a plot card.
- Plot / Events / Disabled: Customize for which marks on a plot card you do not wish to handle events .
- Plot / Events / Routing: Handle events on a plot card using routing.
- Plot / Pandas: Plot Pandas dataframes.
- Plot / Vega: Make a plot using Vega.
- Plot / Vega-lite: Make a plot using Vega-lite.
- Plot / Vega-lite / Update: Periodically update a Vega-lite plot.
- Plot / Vega-lite / Form: Display a Vega-lite plot inside a form card.
- Plot / Vega-lite / Flex: Place Vegalite plots in a flexible layout.
- Plot / Altair: Use Altair to create plot specifications for the Vega card.
- Plot / Bokeh: Use Bokeh to create plots.
- Plot / Bokeh / Script: Embed Bokeh components into a page using Javascript.
- Plot / Bokeh / Widgets: Embed Bokeh widgets with script callbacks
- Plot / Matplotlib: Use matplotlib to create plots. Also demonstrates how to provide live control over plots.
- Plot / Plotly: Use plotly to create plots. Also demonstrates how to provide live control over plots.
- Plot / D3.js: Create custom plots using D3.js.
- Pixel Art: A card that demonstrates collaborative editing in Wave.
- Uploads: Upload files to the Wave server.
- Uploads / Async: Upload files from an interactive app.
- Uploads / UI: Accept files from the user.
- Uploads / Download: Accept files from the user and downloads them locally.
- Uploads / Frame: To display content > 2MB in frame cards, first upload the content and then use it in a frame card.
- Meta / Inline Script: Execute arbitrary Javascript.
- Meta / Inline Script / Callback: Handle events from arbitrary Javascript
- Meta / Script: Load external Javascript libraries.
- Meta / Script / Callback: Handle events from external Javascript libraries.
- Meta / Stylesheet: Load external CSS resources if needed.
- Meta / Inline Stylesheet: Use inline CSS to style a Wave app in case of quirks. Prefer using native Wave components if possible.
- Meta / Dialog: Display a dialog.
- Meta / Dialog / Closable: Display a dialog having a close button, and detect when it's closed.
- Meta / SidePanel: Display a sidePanel.
- Meta / SidePanel / Closable: Display a sidePanel having a close button, and detect when it's closed.
- Meta / Title: Set the browser window title for a page.
- Meta / Icon: Set the browser window icon for a page.
- Meta / Notification: Display a desktop notification.
- Meta / Notification bar: Display a notification bar notification_bar. meta
- Meta / Notification bar / Closable: Display a notification_bar and detect when it's closed.
- Meta / Refresh: Turn off live updates for static pages to conserve server resources.
- Meta / Redirect: Redirect the page to a new URL or hash.
- Meta / Theme: Change the base color theme of the app.
- Theme generator: Use theme generator to quickly generate custom color schemes for your app.
- Meta / Tracking: Track user interactions on your app's pages.
- Background Tasks: Use q.run() to execute functions in the background, in-process.
- Background Tasks / Executor: Use q.exec() to execute background functions using a thread-pool or process-pool.
- Background Tasks / Progress: Execute background functions while incrementing a progress bar.
- Site / Async: Update any page on a site from within an app using an `AsyncSite` instance.
- HTTP / Client: Use any http client to communicate with RESTful APIs.
- Checkpoint: Set the H2O_WAVE_CHECKPOINT_DIR environment variable to enable saving and reloading application and session state.
- Graphics / Primitives: Use the graphics module to render and update shapes.
- Graphics / Spline: Use the graphics module to render splines.
- Graphics / Clock: Use the graphics API to make a clock.
- Graphics / Path: Use the graphics API to draw a red square.
- Graphics / Turtle: Use turtle graphics to draw paths.
- Graphics / Hilbert: Use turtle graphics recursively to draw Hilbert curves.
- Graphics / Background Image: Set a background image behind your graphics.
- Graphics / Glider Gun: Use the graphics API to play Conway's Game of Life - Gosper's Glider Gun
- WaveDB: How to use WaveDB, a simple sqlite3 database server that ships with Wave.
- WaveDB / To-do App: A multi-user To-do list application using WaveDB for data management.