react/compiler/apps/playground
Eugene Choi e7984651e4
[playground] Allow accordion tabs to open on error (#34844)
There was a bug where the other output passes (aside from the "Output"
tab) were unable to open on compiler error. This PR still allows for the
"Output" tab to automatically open on error, but also allows other tabs
to be opened.


https://github.com/user-attachments/assets/157bf5d6-c289-46fd-bafb-073c2e0ff52b
2025-10-14 15:07:27 -04:00
..
__tests__/e2e [playground] Fix syntax error from crashing the Compiler playground (#34623) 2025-10-09 12:02:55 -07:00
.vscode [rfc] Remove top level forget directory 2023-08-22 15:04:54 -04:00
app [playground] bug fixes & UX improvements (#34499) 2025-09-18 15:44:25 -04:00
components [playground] Allow accordion tabs to open on error (#34844) 2025-10-14 15:07:27 -04:00
hooks Compiler: unfork prettier config (#30205) 2024-07-18 17:00:24 -04:00
lib [playground] Fix syntax error from crashing the Compiler playground (#34623) 2025-10-09 12:02:55 -07:00
public Update references to Forget to React Compiler 2024-05-02 14:28:06 -07:00
scripts [compiler]: fix link compiler & 4 broken tests from path containing spaces (#33409) 2025-06-09 08:40:27 -07:00
styles [playground] Improve DiffEditor scrollbar + view (#34691) 2025-10-02 17:41:29 -04:00
.eslintrc.json [rfc] Remove top level forget directory 2023-08-22 15:04:54 -04:00
.gitignore Rename references to "forget" in playground 2024-04-10 17:46:35 -04:00
colors.js Compiler: unfork prettier config (#30205) 2024-07-18 17:00:24 -04:00
next-env.d.ts [playground] bug fixes & UX improvements (#34499) 2025-09-18 15:44:25 -04:00
next.config.js [playground] ViewTransition on config expand (#34595) 2025-09-29 14:09:37 -04:00
package.json [playground] Fix useEffect on tabify (#34594) 2025-09-25 14:56:41 -04:00
playwright.config.js [playground] Update the playground UI (#34468) 2025-09-12 11:43:04 -04:00
postcss.config.js [rfc] Remove top level forget directory 2023-08-22 15:04:54 -04:00
README.md [playground] Add support for "use no memo" (#31561) 2024-11-18 15:38:22 -05:00
tailwind.config.js Compiler: unfork prettier config (#30205) 2024-07-18 17:00:24 -04:00
tsconfig.json [playground] bug fixes & UX improvements (#34499) 2025-09-18 15:44:25 -04:00
vercel.json [rfc] Remove top level forget directory 2023-08-22 15:04:54 -04:00
yarn.lock [playground] Fix useEffect on tabify (#34594) 2025-09-25 14:56:41 -04:00

React Compiler Playground

An interactive playground to demonstrate, test, and have fun with React Compiler.

Setup

# Build React Compiler from source and install Playground dependencies.
$ yarn

# Or similarly
$ npm install

Development

# Start the local development server with
$ yarn dev

# Or
$ npm run dev

# Rerun the following (in a separate terminal window) when React Compiler
# is changed locally to keep Playground in sync.
$ yarn

Testing

# Install playwright browser binaries
$ npx playwright install --with-deps
# Run tests
$ yarn test

Deployment

This project has been deployed using Vercel. Vercel does the exact same thing as we would locally, by running yarn at the install step in the Playground directory to build React Compiler from source and symlink it as its dependency. This means that Playground is automatically deployed on every push and pull requests will reflect the behaviors of React Compiler of that commit.