Client-Side 'React' Interface for 'Shiny'

Server-side plumbing for the 'ui.tsx' pattern in 'Shiny': the user interface is defined in a client 'React' (< https://react.dev/>) bundle, and the 'Shiny' server contains only reactive computation. Provides page builders that discover and serve the client bundle, a render function that publishes any JSON-serializable value to the client, and custom messages to 'React' components. Ships no user interface components, so the app author owns the whole front end. The 'React' runtime and the client hooks are bundled, so no JavaScript build step is required to get started.

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

install.packages("shinyreact")

Or 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

• vignette("shinyreact") walks through the ui.tsx pattern: inputs, outputs, messages, and embedding traditional Shiny renderers.
• TSX files and JavaScript build tools explains .tsx, JSX, TypeScript, and what npm run build does.
• Testing covers shiny::testServer() for driving a server with no browser, and wire_tap() for wire payloads in shinytest2 tests.
• Agent Skills explains the skills that ship with the package for coding agents.
• The examples catalog lists runnable apps from no-build to Vite + HMR.