Widgies
Zero-dependency web components that work anywhere. Add powerful widgets to any site in just 2 lines of code.
Just add these 2 lines:
<script src="https://unpkg.com/widgies@latest/dist/widgies.min.js"></script>
<widgies-calculator></widgies-calculator>
Works with React, Vue, Angular, or vanilla HTML. No build process required.
Live Widget Demo
Loading widgets...
Why Widgies?
⚡
Tiny & Fast
Minimal footprint with no external dependencies. Just pure, optimized JavaScript.
🔌
Framework Agnostic
Works with React, Vue, Angular, or plain HTML. Drop it anywhere.
🎯
Simple Integration
One script tag is all you need. No build process, no configuration.
Get Started
CDN (Fastest)
<script type="module" src="https://unpkg.com/widgies@latest/dist/widgies.min.js"></script>npm
npm install widgiesImport All Widgets
import 'widgies';
<!-- Now use any widget -->
<widgies-timer minutes="25"></widgies-timer>
<widgies-calculator></widgies-calculator>
<widgies-qr-code text="Hello World"></widgies-qr-code>
Import Individual Widgets (Tree-shaking)
import 'widgies/timer';
import 'widgies/calculator';
Available Widgets
| Widget | Description | Key Attributes |
|---|---|---|
| <widgies-affirmation> | Random positive messages | interval |
| <widgies-ambient> | Nature sounds player | sound |
| <widgies-calculator> | 4-function calculator | — |
| <widgies-color-palette> | Color palette generator | — |
| <widgies-currency-exchange> | Currency exchange calculator | — |
| <widgies-dad-jokes> | Random dad joke generator | — |
| <widgies-fortune-cookie> | Virtual fortune cookie | — |
| <widgies-magic-8-ball> | Classic Magic 8-Ball | — |
| <widgies-qr-code> | QR code generator | text |
| <widgies-random-image> | Random image display | — |
| <widgies-random-number> | Crypto-safe RNG | min, max |
| <widgies-timer> | Countdown timer | minutes, seconds |
| <widgies-tiny-planet> | Learn about random place on Earth | — |
| <widgies-unit-converter> | Multi-category unit converter | — |
Examples
Timer Widget
<!-- 25-minute Pomodoro timer -->
<widgies-timer minutes="25"></widgies-timer>
<!-- 90-second timer -->
<widgies-timer seconds="90"></widgies-timer>
QR Code Widget
<!-- Generate QR code for URL -->
<widgies-qr-code text="https://example.com"></widgies-qr-code>
<!-- With custom size -->
<widgies-qr-code text="Hello!"></widgies-qr-code>
Framework Integration
React/Next.js
import 'widgies';
<widgies-timer minutes={25} />
Vue
import 'widgies';
<!-- In template: -->
<widgies-timer :minutes="25" />
Vanilla HTML
<script src="..." type="module"></script>
<widgies-timer minutes="25"></widgies-timer>
Bundle Size
Full bundle: ~10 kB gzipped
Individual widgets: ~2-3 kB each
Dependencies: Zero
Browser Support
Chrome 67+, Firefox 63+
Safari 10.1+, Edge 79+
Requires: Web Components, ES6 modules