We are happy to share that WebComponents.dev now fully supports LWC for both on-platform and off-platform development. We see a beautiful harmony when projects like this solve common problems for the greater good. This also allows us to put more time, energy, and resources into creating a better developer experience with our productivity tools such as the Salesforce CLI, VSCode Extensions, Code Builder, and LWC Local Development. With all the innovation WebComponents.dev brings to the LWC ecosystem this does mean that we will be phasing out our LWC Playground on February 1, 2021.
This enablement brings more features to the LWC community like the ability to save and share projects on GitHub, check common accessibility attributes, quickly preview on different screen sizes, and inspect common element info. As we’ve opened up more of our software via open source, the ecosystem has been able to easily respond with support like WebComponents.dev. We’ll continue to increase our efforts to bring more open source, and even our design discussions through our RFC process.
LWC in WebComponents.dev includes base components and SLDS so you can create prototypes that look and behave how they will once deployed to your org. You can easily share your projects publicly or privately with your team. You can even sync your projects to Github, making them even easier to share and discover. Visit this link to create your first project!
WebComponents.dev also includes a library of all of the base component examples so you can easily experiment and learn each component. You can even fork the components to create your own samples. The below screenshot shows all of the accordion samples.
For those of you that rely on Playground today, I encourage you to try it out and migrate your existing Playground projects to WebComponents.dev. For those of you that have a lot of projects to migrate, we are working with the WebComponent.dev team to provide import functionality so you can more easily move your work. We expect this import functionality to be available in the coming weeks.
Finally, if you’ve used playground heavily and have a lot of public URLs that point to projects, please see this Github repo for instructions on creating redirects for your existing URLs. We want to make this as painless as possible and will provide URL redirects for you so that your content remains available.
Summary
WebComponents.dev now fully supports LWC for both on-platform and off-platform development. You can now use this tool to create and share prototypes that look and behave how they will once deployed to your org. We encourage you to migrate from LWC Playground to WebComponents.dev before the February 1, 2021 retirement of Playground. We’re more excited than ever at the expanding ecosystem around Lightning Web Components and look forward to seeing what you’ll build next!
Happy developing!