What is reactcanvas?

ReactCanvas is a Visual Studio Code extension that lets you preview a single React component file and see it render live, without setting up a project, a build tool, or a development server first. You open a jsx or tsx file that exports a component, run the open preview command, and a panel appears next to your editor showing the component rendered, updating automatically as you type. Under the hood it converts your code in memory using esbuild, a fast tool for turning modern JavaScript into something a browser can run, with a fallback to another converter called Babel if needed, so nothing gets written to disk and no separate build process runs in the background. If your component imports other local files, such as a helper component or a matching stylesheet, ReactCanvas follows those imports and bundles them together automatically, and editing any file in that chain refreshes the preview. You can also switch between React versions seventeen, eighteen, and nineteen from a badge in the preview toolbar, since the library is loaded on demand from an online source called esm.sh rather than installed locally, which does mean the extension needs network access to work. The preview panel also includes its own console that mirrors things like console.log calls with the same formatting VS Code's own developer tools use, and it shows both code conversion errors and runtime errors directly in the preview rather than only in a hidden log. For quick experiments you do not even need an existing file, a command creates a fresh scratch component already wired up to the preview, and nothing is saved to your disk unless you choose to save it yourself. User code runs inside a sandboxed frame with security restrictions in place, and the preview follows whatever light or dark theme VS Code itself is using. You can install ReactCanvas from the VS Code Marketplace, from Open VSX for compatible editors like VSCodium, or from the command line. It currently does not support importing npm packages other than React itself, and errors from your code point to the converted version rather than your original source lines, both of which are listed as planned improvements. The project is released under the MIT license.