Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>React PlaygroundNew to Visual Studio Code? Get it now.

React Playground

Warren Mira

|
8,696 installs
| (0) | Free
React Components Playground and Live Preview
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

react-playground-vscode

This plugin helps in automatically providing a webview playground of your React Component.

Usage

Enter ctrl+shift+p and then type React Playground

Bug/Feature Reports

Appreciate any bug/feture reports via Github

Release Notes

0.0.11

  • Support loading of jsx extension

0.0.10

  • Enabling css loader to fix css loading issues

0.0.9

  • Closing and re-opening the extension should now work

Preview

Preview

Features

  • Live Edit a component
  • Set various props
  • Automatically create test snapshots ( TODO )

Extension Settings

Known Issues

  • Closing the Playground windowd does not seem to reopen it again.

FAQ

  • Do I need to setup webpack/babel on my workspace to have it working?

No. You can have an empty dir. Create your react component and use ctrl+shift+p to open the live preview.

  • I need to inspect the dom. How can I do that?

You open the webview inspector. Open Keyboard Shortcuts and edit keybindings.json. Add the following:

{ "key": "ctrl+shift+alt+b",  "command": "_webview.openDevTools"}     

Change the key as required. This should enable you to inspect the html.

  • I want to have Live Playground launch a non react component. How can I do that?

React Playground will inspect any React Element but it will also evaluate an export that starts with __Playground. So you can have the following be automatically evaluated in React Playground


export const __PlaygroundTestWithSomeStuff = () => {

    return (
        <SomeComponent attribute='someattr'>
            <AnotherComponent />
        </SomeComponent>
    );

}

You should be able to see this within the playground.

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2019 Microsoft