README.md

shinyreact

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

Installation

pip install shinyreact

Or install the development version from GitHub:

pip install "git+https://github.com/posit-dev/shinyreact.git"

Usage

set_react_page() discovers www/ui.js (and www/ui.css, if present) next to the app file and serves them as the page. @reactive_output publishes any JSON-serializable value to the client's useShinyOutputValue() hook:

from shiny.express import input
from shinyreact import reactive_output, set_react_page

set_react_page()


@reactive_output
def greeting():
    return f"Hello, {input.name()}!"

In Core mode, page_react() is the ui argument instead:

from shiny import App
from shinyreact import page_react, reactive_output


def server(input, output, session):
    @reactive_output
    def greeting():
        return f"Hello, {input.name()}!"


app = App(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:

git clone https://github.com/posit-dev/shinyreact
shiny run shinyreact/examples/01-hello/app.py

Learn more

• Get started 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.
• Client hooks lists everything at window.shinyreact.
• Testing covers shiny's local_server pytest fixture for driving a server with no browser, and WireTap for wire payloads in Playwright 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.