'%3e%3cpath fill='gray' d='M60.105 4.898A58.55 58.55 0 0 0 45.653.415a.22.22 0 0 0-.233.11 40.784 40.784 0 0 0-1.8 3.697c-5.456-.817-10.886-.817-16.23 0-.485-1.164-1.201-2.587-1.828-3.697a.228.228 0 0 0-.233-.11 58.386 58.386 0 0 0-14.451 4.483.207.207 0 0 0-.095.082C1.578 18.73-.944 32.144.293 45.39a.244.244 0 0 0 .093.167c6.073 4.46 11.955 7.167 17.729 8.962a.23.23 0 0 0 .249-.082 42.08 42.08 0 0 0 3.627-5.9.225.225 0 0 0-.123-.312 38.772 38.772 0 0 1-5.539-2.64.228.228 0 0 1-.022-.378 31.17 31.17 0 0 0 1.1-.862.22.22 0 0 1 .23-.03c11.619 5.304 24.198 5.304 35.68 0a.219.219 0 0 1 .233.027c.356.293.728.586 1.103.865a.228.228 0 0 1-.02.378 36.384 36.384 0 0 1-5.54 2.637.227.227 0 0 0-.121.315 47.249 47.249 0 0 0 3.624 5.897.225.225 0 0 0 .249.084c5.801-1.794 11.684-4.502 17.757-8.961a.228.228 0 0 0 .092-.164c1.48-15.315-2.48-28.618-10.497-40.412a.18.18 0 0 0-.093-.084Zm-36.38 32.427c-3.497 0-6.38-3.211-6.38-7.156 0-3.944 2.827-7.156 6.38-7.156 3.583 0 6.438 3.24 6.382 7.156 0 3.945-2.827 7.156-6.381 7.156Zm23.593 0c-3.498 0-6.38-3.211-6.38-7.156 0-3.944 2.826-7.156 6.38-7.156 3.582 0 6.437 3.24 6.38 7.156 0 3.945-2.798 7.156-6.38 7.156Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='white' d='M0 0h71v55H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e){kind=small}
The only online IDE for Web Components
Build components, push to Git and publish to npm
without all the hassle.
Free, no signup required
Select your Template
HTMLElement
0 dependencies
Atomico
JSX
Lit
TypeScript
Omi
JSX
FAST
TypeScript
Haunted
JavaScript
LWC
JavaScript
Preact
custom-element
Stencil
TSX
Svelte 3
custom-element
uce
JavaScript
Vue 3
Built-in wrapper
All the ways to make a web component
Compare coding style, bundle size and performance of 61 different ways to make a Web Component.
Feb 2022 Update
From the community
Spectrum Web Components
A collection of 40+ components from Sprectrum Web Components
by Adobe's Spectrum team
lit-html 2 (preview)
Explore the new capabilities of the upcoming lit-html 2
by Westbrook
lit-html by examples
Learn LitElement by examples
by open-wc
Haunted by examples
Learn Haunted by examples
by open-wc
Mention @webcomp_dev with your creations to be considered here
Spotlight on Organizations
Lightning Web Components
LWC Playground and demos of 70 base components
Adobe
Amazing showcase of Spectrum Web Components
FAST
The adaptive interface system for modern web experiences.
Open Web Components
50+ demos in LitElement and Haunted, from Basic to Advanced.
VanillaWC
A Collection of Vanilla Web Components with no dependencies.
You have the components, why not make it a full design system?
Go to Backlight