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.
install.packages("shinyreact")Or install the development version from GitHub:
# install.packages("pak")
pak::pak("posit-dev/shinyreact/pkg-r")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")vignette("shinyreact") walks through the
ui.tsx pattern: inputs, outputs, messages, and embedding
traditional Shiny renderers..tsx, JSX,
TypeScript, and what npm run build does.shiny::testServer() for driving a server with no
browser, and wire_tap() for wire payloads in shinytest2
tests.