Skip to content

shinyreact

shinyreact lets you write the UI of a Shiny app as a React client you own, while the R server contains only reactive computation. It provides the bridge between the two and ships zero UI components itself. The same JavaScript bundle backs the Python package, so one React client works against an app.R or an app.py server. The full site covers all three.

Installation

shinyreact is not yet on CRAN. Install the development version from GitHub:

# install.packages("pak")
pak::pak("posit-dev/shinyreact/pkg-r")

Usage

page_react() discovers www/ui.js (and www/ui.css, if present) and serves them as the page. reactive_output() publishes any JSON-serializable value to the client’s useShinyOutputValue() hook:

library(shiny)
library(shinyreact)

server <- function(input, output, session) {
  output$greeting <- reactive_output({
    paste0("Hello, ", input$name, "!")
  })
}

shinyApp(page_react(), server)

The matching www/ui.js:

const { React, ReactDOM, useShinyInput, useShinyOutputValue } = window.shinyreact;
const h = React.createElement;

function App() {
  const [name, setName] = useShinyInput("name", "world");
  const greeting = useShinyOutputValue("greeting");
  return h(
    "div",
    null,
    h("input", { value: name, onChange: (e) => setName(e.target.value) }),
    h("p", null, greeting)
  );
}

ReactDOM.createRoot(document.body.appendChild(document.createElement("div"))).render(h(App));

Try a complete app without cloning:

shiny::runGitHub("posit-dev/shinyreact", subdir = "examples/01-hello")

Learn more