WebStorm fiddle / playground?

What's the easiest way to get a “playground” environment, where I'm editing my HTML/JS/CSS code in WebStorm, and immediately seeing updates in a browser?

I know I can set this up, but I never do. Always seems too "fiddly", and I want the fiddle NOW. So I end up going to sites like https://jsfiddle.net/ or https://codesandbox.io/ , which have inferior dev experience.

Any ideas? Plugins?


You can preview/update your code in browser using the HTML preview: https://www.jetbrains.com/help/webstorm/editing-html-files.html#ws_html_preview_output_procedure

If you miss a JS playground like JSFiddle, please vote for WEB-10487


Yeah, I know about the live HTML preview. The whole thing is nearly there, but just lacks a few small pieces.

- Ability to run live server in a scratch file (live server only works on project files, it opens scratches using file:// protocol)
- Ability to quickly fill in fiddle-like file template (html, with a style tag and script)

Alternatively, webstorm should be able to *quickly* set up a “fiddle” style project, without having to choose the location on disk and all the other settings. This would also allow fiddles for compiled languages, like JSX react.

Voted on the issue.


Please sign in to leave a comment.