Overview

This article collects a few small but more cohesive example apps that bring together the package surfaces described elsewhere in the documentation.

The goal is not to present production-ready applications. Instead, these examples show how the generated wrappers, curated Shiny bindings, layout helpers, and command/browser-glue tools fit together in practice.

This small executed example prints the page scaffold emitted by a compact webawesomePage() composition:

library(shiny.webawesome)

example_page <- webawesomePage(
  title = "Example preview",
  wa_container(
    class = "wa-stack",
    wa_badge("Preview"),
    wa_card("Small executable example")
  )
)

cat(as.character(example_page), sep = "\n")

## <html>
##   <body>
##     <div class="wa-stack">
##       <wa-badge>Preview</wa-badge>
##       <wa-card>Small executable example</wa-card>
##     </div>
##   </body>
## </html>

Example 1

A simple dashboard-style page

This example uses webawesomePage(), wa_container(), and a handful of generated components to assemble a compact page with a little structure and visual hierarchy.

library(shiny)
library(shiny.webawesome)

ui <- webawesomePage(
  title = "Project overview",
  wa_container(
    class = "wa-stack",
    style = "max-width: 32rem; margin: 2rem auto;",
    wa_badge("Preview"),
    wa_card("Status: active"),
    wa_button(
      "refresh",
      "Refresh",
      appearance = "outlined",
      style = "width: 10rem;"
    ),
    wa_card("Recent activity")
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

This is a good pattern when you want a page built primarily from generated wrappers, with a small amount of package-level layout structure.

Example 2

A binding-focused interaction panel

This example combines a few bound components and displays the resulting Shiny state directly.

library(shiny)
library(shiny.webawesome)

ui <- webawesomePage(
  title = "Binding example",
  wa_container(
    class = "wa-stack",
    style = "max-width: 36rem; margin: 2rem auto;",
    wa_select(
      "favorite_letter",
      wa_option("A", value = "a"),
      wa_option("B", value = "b"),
      wa_option("C", value = "c")
    ),
    wa_switch("notifications_enabled", "Notifications"),
    wa_tree(
      "navigation_tree",
      selection = "multiple",
      wa_tree_item("Section A", id = "section_a"),
      wa_tree_item("Section B", id = "section_b"),
      wa_tree_item("Section C", id = "section_c")
    ),
    verbatimTextOutput("state")
  )
)

server <- function(input, output, session) {
  output$state <- renderPrint({
    list(
      favorite_letter = input$favorite_letter,
      notifications_enabled = input$notifications_enabled,
      navigation_tree = input$navigation_tree
    )
  })
}

shinyApp(ui, server)

This example is useful for understanding the package’s semantic binding model: the Shiny inputs reflect durable state rather than a raw browser event stream.

Example 3

A command-layer interaction example

This example uses generated components for the UI and the package’s command layer to drive browser-side behavior from the server.

library(shiny)
library(shiny.webawesome)

ui <- webawesomePage(
  title = "Command example",
  wa_container(
    class = "wa-stack",
    style = "max-width: 36rem; margin: 2rem auto;",
    actionButton("open_dialog", "Open dialog"),
    actionButton("show_details", "Show details"),
    wa_dialog(
      "dialog",
      label = "Example dialog",
      "Dialog body"
    ),
    wa_details(
      "details",
      summary = "More information",
      "Details body"
    )
  )
)

server <- function(input, output, session) {
  observeEvent(input$open_dialog, {
    wa_call_method("dialog", "show", session = session)
  })

  observeEvent(input$show_details, {
    wa_call_method("details", "show", session = session)
  })
}

shinyApp(ui, server)

This is a good pattern when the generated wrapper surface is sufficient for UI construction, but the server still needs to trigger a specific browser-side method directly.