WebComponents.dev: The modern IDE for web platform developers

Hello Product Hunters 👋! We are excited to launch WebComponents.dev today! 🎉 It’s our vision of a modern development environment for components on the Web Platform. Build components from plain ES Modules to fully interactive Custom-Elements that you can drop on any website or framework. In our experience, building reusable components is painful. It takes ages to have a good build setup and then we have to push on github and npm with the right configuration. We end up sharing less and copy/paste too much. Simply because 3h of project setup is not worthwhile. Even when you already have a “common” library, the full checkout-patch-release is cumbersome. Sharing progress with designers is not easy and done late - often too late - creating some awkward moments during the sprint demos 😉 WebComponents.dev removes all the boring setup and configuration. Click and start immediately coding your new or existing component with real-time feedback. Add tests and documentation if you want. It’s all ready to use. Everything is graphical: Your lists of components have thumbnails auto-generated and change review includes visual diff. You can share your progress with designers at any time, you don’t need to spawn a server. Finally, 1 or 2 buttons away your component is published on your registry ready to be imported in any project. We made a vanilla Product-Hunt-button with `lit-html`. You can check it out here: https://webcomponents.dev/edit/T... Fork it and start playing with it 🚀 No signup required We would love to have your feedback and answer any questions you may have! 😺❤️ Kind regards, Francois, Gregory and Georges --- # Supports Javascript ES2020 and TypeScript 3.8 out-of-the-box. # Features: - Modern code editor based on VS Code - Automatic bare named imports from NPM - Live update as you code - Stories in CSF Storybook format - Tests in Mocha BDD - GitHub commits + push - Visual Review of commits - Publish to NPM # 30+ Templates Comes with more than 30 templates to learn or kickstart your component in your technology of choice. If it’s hard to choose, check our blog post where we explore 25 different ways to do a Web Component 😎 https://webcomponents.dev/blog/a...

WebComponents.dev is a joy to work with, at open-wc we host all our code demos on WebComponents.dev (https://open-wc.org/developing/c...). Very easy to use and fast for quick prototyping, documentation, but also publishing. Definitely recommend! ❤️

6yr ago

figma.to.website

Maker

Thanks @pascal_schilp for the nice comment! 😍 We are big fans of https://open-wc.org, it's a pleasure to have you onboard 🤗