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 / 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.