StormQR is a powerful and elegant Hugo shortcode built by Ruben Storm. It generates animated, theme-aware QR codes with crypto icon overlays, clipboard functionality, and branding support — all in a clean, modern UI.
Perfect for sharing Lightning addresses, crypto wallets, email links, or any string of data in a stylish, interactive way.
-
Download the shortcode file
Placestormqr.htmlinto:
layouts/shortcodes/stormqr.html -
(Optional) Add your branding logo:
Place your SVG logo at:
static/images/stormqr-logo.svg
(or change the path inside the shortcode) -
Use it in your Hugo content files:
{{< stormqr data="https://example.com" >}}
| Feature | Description |
|---|---|
| QR code rendering | Converts any text or URL to QR |
| Copy to clipboard | Clickable icon to copy content |
| Crypto icons | Trust Wallet CDN or Lightning zap icon |
| Lightning animation | Pulse effect for zap-enabled QR |
| Dark mode support | Theme-aware appearance |
| Glassmorphism design | Sleek, modern UI |
| Custom branding | SVG logo or fallback text |
| Responsive alignment | Align left, center, or right |
| Toast notification | Visual feedback when copied |
| Parameter | Description | Default |
|---|---|---|
data |
QR content to encode | (none) |
| Parameter | Description | Default |
|---|---|---|
title |
Tooltip on icon (on hover/tap) | Copy QR |
identifier |
Blockchain or type (lightning, btc, eth, tron, etc.) |
none |
logo |
Show branding logo (true / false) |
true |
align |
Position block: left, center, right |
center |
{{< stormqr data="https://example.com" >}}
{{< stormqr data="lnurl1dp68gurn8ghj7mrww4exctnrdakj7tmxx43k2" identifier="lightning" >}}
{{< stormqr data="bc1qxyz..." identifier="bitcoin" >}}
{{< stormqr data="0xabc123..." identifier="ethereum" >}}
{{< stormqr data="0xabc123..." identifier="arbitrum" >}}
{{< stormqr data="TXYZ123abc..." identifier="tron" >}}
{{< stormqr data="info@example.com" title="Copy email address" >}}
{{< stormqr data="LEFT" align="left" >}}
{{< stormqr data="RIGHT" align="right" >}}
These align the QR block to the left and right, respectively.
When not set, the default alignment is center.
{{< stormqr data="123456" logo="false" >}}
Shows text: Powered by Ruben Storm instead of the logo.
{{< stormqr data="static content" identifier="false" >}}
No icon, just the QR image.
stormqr/
├── layouts/
│ └── shortcodes/
│ └── stormqr.html
├── static/
│ └── images/
│ └── stormqr-logo.svg
├── README.md
└── LICENSE.md
StormQR is licensed under the MIT License. You are free to use it in personal or commercial projects.
Built by Ruben Storm to add elegant, Lightning-friendly QR codes to his nomadic websites.
Inspired by minimalist design, Web3 aesthetics, and a love for open-source.
- GitHub: github.com/rubenstorm/stormqr
- Forks and pull requests are welcome ❤️
If StormQR is useful to you, zap me some sats ⚡ Every ⚡ helps fund more open-source experiments.
Danke schön 🙏