Developing web applications can be hard! And as result, it can be extremely valuable to experiment with HTML, JavaScript and CSS, and then visually iterate towards the solution you're looking for (e.g. a specific behavior or styling). Because this kind of "exploration" is so useful--and for many of us, happens regularly--it felt like it should be easy to create/share/fork new ideas, without having to leave your editor in order to do it.
To address this problem, I built the notion of "web playgrounds" into the GistPad extension, so that at any time, you can create new playgrounds within VS Code, and then edit HTML, JavaScript and CSS, alongside a live preview experience. Once you're done with the playground, simply close the preview panel and move on, without having had to switch contexts and/or losing the power of your VS Code editor + highly-personalized extensions 🔥
In order to make it easier to visually explore HTML/JS/CSS, directly in @code, GistPad (aka.ms/gistpad) now allows you to create "Web playgrounds" that are fully editable mini web apps, that provide a live preview, and are persisted as GitHub Gists 🚀17:43 PM - 19 Dec 2019
Behind the scenes, playgrounds are stored as GitHub Gists, which ensures the code is persisted and reusable in the future. Furthermore, since GitHub Gists can be shared and forked by others, this enables an entire ecosystem of playgrounds to form as new "base templates" are defined, which can increase productivity for specific types of playground scenarios (e.g. TypeScript, Angular, Vue.js).
This playground experience is very early, but I'm excited to begin engaging with the community, learn new use cases and requirements, and see how we can improve the experimentation experience for web development within VS Code 🚀
Top comments (6)
This is so brilliant, it's also prototyping heaven with the GitHub and gist integration : run a gist, gets stored, and then you want to try this (web asm) or that (supernativebutnotquite3dAPIFromHell), just fork, edit build run, saved as a gist which I assume is fully intrumentable
Run automated tests on mutliple configurations to get relevant statistîcs, etc.
Thank you, going to be taking a look asap
Thanks! I’ve been iterating on the experience quite a lot since I released this post, so it might be worth checking out my twitter stream 😁 @lostintangent .
Please let me know if you get a chance to check out the extension, and whether you have any feedback on how we could improve the experience further.
pretty good
If you get a chance to check it out, I’d love to hear what you think! 👍
This is 🔥 🔥 This extension deserves multiple 👍
Would love to see this for react-native!