React Preview for Visual Studio Code
React Preview gives you instant feedback in your IDE without writing any extra code.
React Preview automatically detects React components in any .js, .jsx or .tsx file.
You will see a preview link appear above each detected component:
Click on that link and let the magic happen! 🪄
📦 Wrapping components
By default, each component is rendered in a blank page.
If you rely on global CSS or React Context, you may want to wrap components instead. This can be done by creating a file called
Here is an example injecting a global stylesheet and providing a React Context:
You can customise the wrapper's location in
React Preview will infer import aliases from
If you want to customise this behaviour, you can create a configuration file named
Here is an example:
🎨 SVGR support
React Preview supports SVGR out of the box:
If you want to use default imports instead (for example if you're using
Feedback is appreciated, whether it's positive or negative. Don't hesitate to reach out (email@example.com).
If you enjoy React Preview, please consider writing a review and sharing it around. You'll make my day!