Public Widgets

This page lists all publicly available widgets in the Widget Storm system. Public widgets can be embedded freely into their own projects by any registered user.

Showcase — Widgets to try out

These widgets are live demos — they run right here on this page. Each widget is fully parameterizable and can be embedded into your own projects.

On any website — script tag, no PHP required
<script src="https://widget-storm.de/wgembed.php?w=wg_countdown&a=WidgetStormSystem&lang=en"></script>
Or as a PHP include (your own wgclient)
<?php include "wgclient.php"; $wg->get("wg_countdown", "WidgetStormSystem", '{"target":"2026-10-18T00:00:00","title":"Next milestone","wglang":"en"}', "php"); ?>
Countdown wg_countdown
Live countdown to any date. Updates every second.
Next milestone
--Days
:
--Hrs
:
--Min
:
--Sec
On any website — script tag, no PHP required
<script src="https://widget-storm.de/wgembed.php?w=wg_dice&a=WidgetStormSystem&lang=en"></script>
Or as a PHP include (your own wgclient)
<?php include "wgclient.php"; $wg->get("wg_dice", "WidgetStormSystem", '{"sides":6,"wglang":"en"}', "php"); ?>
Dice wg_dice
Interactive dice with animation. Click or button to roll.
On any website — script tag, no PHP required
<script src="https://widget-storm.de/wgembed.php?w=wg_flipcard&a=WidgetStormSystem&lang=en"></script>
Or as a PHP include (your own wgclient)
<?php include "wgclient.php"; $wg->get("wg_flipcard", "WidgetStormSystem", '{"front":"What is this?","back":"Widgets for the web — since 2008.","fronticon":"★","wglang":"en"}', "php"); ?>
Flip Card wg_flipcard
Card with a front and a back. Click to flip.
★
What is this?
Click to flip
Widgets for the web — since 2008.
On any website — script tag, no PHP required
<script src="https://widget-storm.de/wgembed.php?w=wg_progress&a=WidgetStormSystem&lang=en"></script>
Or as a PHP include (your own wgclient)
<?php include "wgclient.php"; $wg->get("wg_progress", "WidgetStormSystem", '{"percent":78,"label":"Project progress","animate":true,"wglang":"en"}', "php"); ?>
Progress Bar wg_progress
Animated progress bar with label and percentage.
Project progress 0%
On any website — script tag, no PHP required
<script src="https://widget-storm.de/wgembed.php?w=wg_typing&a=WidgetStormSystem&lang=en"></script>
Or as a PHP include (your own wgclient)
<?php include "wgclient.php"; $wg->get("wg_typing", "WidgetStormSystem", '{"text":"Widget Storm — building blocks for the web, since 2008.","speed":50,"loop":true,"wglang":"en"}', "php"); ?>
Typewriter wg_typing
Typewriter effect — text is typed out letter by letter.
|

Free widgets with real value (they meet our enterprise guidelines)

Widgets with built-in security, persistence and authentication — ready for production use. Try the demos ↓

On any website — script tag, no PHP required
<script src="https://widget-storm.de/wgembed.php?w=wg_todo&a=WidgetStormSystem&lang=en"></script>
Or as a PHP include (your own wgclient)
<?php include "wgclient.php"; $wg->get("wg_todo", "WidgetStormSystem", '{"key":"YOUR_KEY","title":"My tasks","wglang":"en"}', "php"); ?>
To-Do List wg_todo
Persistent task list with built-in authentication, AES-256 encryption and brute-force protection — entirely without a backend.
  • AES-256 encryption — data stored encrypted on disk
  • Key-based authentication with brute-force protection
  • SQLite or filesystem — detected automatically
  • Preflight checks — verifies permissions and dependencies before setup
  • No backend, no framework, no database configuration
Tasks 2 open, 1 done
  • ☐ Adjust the parameters
  • ☐ Embed the widget
  • ☑ Discover Widget Storm

With the admin key you can edit this list directly in the browser — no separate backend needed. Without the key it stays protected on the server.

🔒 Read-only SQLite + AES-256
On any website — script tag, no PHP required
<script src="https://widget-storm.de/wgembed.php?w=wg_guestbook&a=WidgetStormSystem&lang=en"></script>
Or as a PHP include (your own wgclient)
<?php include "wgclient.php"; $wg->get("wg_guestbook", "WidgetStormSystem", '{"key":"YOUR_KEY","title":"My guestbook","wglang":"en"}', "php"); ?>
Guestbook wg_guestbook
Moderated guestbook with visitor interaction, honeypot spam protection, IP rate limiting and AES-256 encryption.
  • AES-256 encryption — data encrypted on disk
  • Moderation mode — entries visible only after approval
  • Honeypot spam protection — an invisible field catches bots
  • IP-based rate limiting — max. 3 entries per hour, IP stored only as a hash
  • Brute-force protection for admin access with lockout
  • No backend, no framework, no database configuration
Guestbook 2 entries
  • Widget-Storm 10.07.2026 01:42
    Welcome to the guestbook! Feel free to leave an entry.
  • Visitor 10.07.2026 01:42
    Great website — keep it up!
✓ Moderated SQLite + AES-256

Demos — See how widgets can work

Explore some of our widgets that meet the enterprise guidelines right here on the page in an opened-up variant — from initial setup through edit mode to the visitor view.

To-Do List wg_demo_todo

On the right you can see all three states of the to-do widget:

1. Initial setup — On first load the widget generates an admin key and sets up the encrypted storage. The key is shown once.

2. Edit mode — With the key you can add, check off and delete tasks. All changes are stored AES-256 encrypted.

3. Visitor view — Without the key the list is write-protected. Via the lock icon the admin can unlock it directly in the browser.

Everything happens in the widget itself — no backend, no framework, no configuration.

1. Initial setup
Demo tasks — Setup

Widget set up. Your admin key:

a1b2c3d4e5f6a7b8c9d0e1f2

How to use the key:

<?php $wg->get("wg_todo", "WidgetStormSystem",
  '{"uid":"meine_liste","key":"a1b2c3d4e5f6a7b8c9d0e1f2","title":"My tasks"}'); ?>

Or simply append it as a URL parameter:

https://your-site.com/page?wg_todo_key=a1b2c3d4e5f6a7b8c9d0e1f2

With key → edit mode.
Without key → read-only view.

Storage: SQLite or file + AES-256 encryption.

2. Edit mode (with admin key)
Demo tasks 2 open, 1 done
  • ☐Embed the widget
  • ☐Adjust the parameters
  • ☑Discover Widget Storm
✎ Edit mode SQLite + AES-256
3. Visitor view (without key)
Demo tasks 2 open, 1 done
  • ☐Embed the widget
  • ☐Adjust the parameters
  • ☑Discover Widget Storm

With the admin key you can edit this list right in the browser — no separate backend needed. Without the key it stays protected server-side.

🔒 Read-only SQLite + AES-256
Guestbook wg_demo_guestbook

On the right you can see all three states of the guestbook widget:

1. Initial setup — The widget generates an admin key and explains spam protection, moderation and encryption.

2. Moderation view — The admin sees all entries, including pending ones. Approve or delete with a single click.

3. Visitor view — Visitors see only approved entries and can post their own. A honeypot and rate limiting protect against spam.

IP addresses are stored only as a SHA-256 hash — privacy is built in, not bolted on.

1. Initial setup
Demo guestbook — Setup

Guestbook set up. Your admin key:

f1e2d3c4b5a6f7e8d9c0b1a2

How to use the key:

<?php $wg->get("wg_guestbook", "WidgetStormSystem",
  '{"uid":"mein_gb","key":"f1e2d3c4b5a6f7e8d9c0b1a2","title":"Guestbook"}'); ?>

Or as a URL parameter:

https://your-site.com/page?wg_guestbook_key=f1e2d3c4b5a6f7e8d9c0b1a2

With key → moderation mode.
Without key → visitor view.

Storage: SQLite or file + AES-256.
Spam protection: Honeypot + rate limiting.
Moderation: Entries visible only after approval.

2. Moderation view (with admin key)
Demo guestbook 2 entries · 1 pending
  • New visitorpendingjust now
    Looking forward to more widgets!
  • Widget-Storm16.03.2026 01:00
    Welcome to the guestbook!
⚙ Moderation SQLite + AES-256
3. Visitor view (without key)
Demo guestbook 1 entry
  • Widget-Storm16.03.2026 01:00
    Welcome to the guestbook!

With the admin key you can moderate entries right in the browser — no separate backend needed. Without the key, moderation stays protected server-side.

✓ Moderated SQLite + AES-256

Tutorial Widgets

We use these widgets in our tutorial. You can use them just as freely in your own projects.

On any website — script tag, no PHP required
<script src="https://widget-storm.de/wgembed.php?w=wg_badge&a=WidgetStormSystem&lang=en"></script>
Or as a PHP include (your own wgclient)
<?php include "wgclient.php"; $wg->get("wg_badge", "WidgetStormSystem", '{"text":"New","variant":"success","wglang":"en"}', "php"); ?>
Badge wg_badge
Colored label for status, tags or hints.
New
On any website — script tag, no PHP required
<script src="https://widget-storm.de/wgembed.php?w=wg_button&a=WidgetStormSystem&lang=en"></script>
Or as a PHP include (your own wgclient)
<?php include "wgclient.php"; $wg->get("wg_button", "WidgetStormSystem", '{"text":"Click me","variant":"primary","size":"md","wglang":"en"}', "php"); ?>
Button wg_button
Configurable button in various variants and sizes.
Click me
On any website — script tag, no PHP required
<script src="https://widget-storm.de/wgembed.php?w=wg_card&a=WidgetStormSystem&lang=en"></script>
Or as a PHP include (your own wgclient)
<?php include "wgclient.php"; $wg->get("wg_card", "WidgetStormSystem", '{"title":"Example Card","description":"A card with a title and a description.","wglang":"en"}', "php"); ?>
Card wg_card
Content card with title, description and optional footer.
Example Card
A card with a title and a description.
On any website — script tag, no PHP required
<script src="https://widget-storm.de/wgembed.php?w=wg_codeview&a=WidgetStormSystem&lang=en"></script>
Or as a PHP include (your own wgclient)
<?php include "wgclient.php"; $wg->get("wg_codeview", "WidgetStormSystem", '{"lang":"php","caption":"PHP example","code":"<?php echo "Hello World"; ?>","wglang":"en"}', "php"); ?>
Codeview wg_codeview
Syntax-highlighted code display with language selection.
PHP 
<?php echo "Hello World"; ?>
PHP example
On any website — script tag, no PHP required
<script src="https://widget-storm.de/wgembed.php?w=wg_diagram&a=WidgetStormSystem&lang=en"></script>
Or as a PHP include (your own wgclient)
<?php include "wgclient.php"; $wg->get("wg_diagram", "WidgetStormSystem", '{"variant":"lifecycle","wglang":"en"}', "php"); ?>
Diagram wg_diagram
Simple diagram rendering for data visualization.
📝
Developer
PHP + CSS + JS
→
📤
wghandler
Upload & Encrypt
→
🗄
Server
DB + CodeVault
🌐
User-Website
Rendered Widget
←
🔗
wgclient
CSS | JS | PHP
←
⚡
Render
evaleval() führt hier den Widget-Code aus, der von authentifizierten Autoren in der Datenbank hinterlegt wurde. Kein User-Input erreicht eval() — es ist die Engine hinter der PHP-in-CSS Bridge und der dynamischen Widget-Komposition. + compose
On any website — script tag, no PHP required
<script src="https://widget-storm.de/wgembed.php?w=wg_liveeditor&a=WidgetStormSystem&lang=en"></script>
Or as a PHP include (your own wgclient)
<?php include "wgclient.php"; $wg->get("wg_liveeditor", "WidgetStormSystem", '{"code":"<b>Live</b> editing","lang":"html","wglang":"en"}', "php"); ?>
Live Editor wg_liveeditor
Interactive code editor with live preview.
Edit parameters
Live preview
Loading widget…
On any website — script tag, no PHP required
<script src="https://widget-storm.de/wgembed.php?w=wg_section&a=WidgetStormSystem&lang=en"></script>
Or as a PHP include (your own wgclient)
<?php include "wgclient.php"; $wg->get("wg_section", "WidgetStormSystem", '{"title":"Section","contenthtml":"Content of a styled area.","wglang":"en"}', "php"); ?>
Section wg_section
Styled content area with title and optional background color.

Section

Content of a styled area.
On any website — script tag, no PHP required
<script src="https://widget-storm.de/wgembed.php?w=wg_step&a=WidgetStormSystem&lang=en"></script>
Or as a PHP include (your own wgclient)
<?php include "wgclient.php"; $wg->get("wg_step", "WidgetStormSystem", '{"number":"1","title":"First step","contenthtml":"The guide starts here.","wglang":"en"}', "php"); ?>
Step wg_step
Numbered step for guides and tutorials.
1
First step
The guide starts here.
On any website — script tag, no PHP required
<script src="https://widget-storm.de/wgembed.php?w=wg_tabpanel&a=WidgetStormSystem&lang=en"></script>
Or as a PHP include (your own wgclient)
<?php include "wgclient.php"; $wg->get("wg_tabpanel", "WidgetStormSystem", '{"tabs":[{"id":"a","label":"Tab A","content":"Content A"},{"id":"b","label":"Tab B","content":"Content B"}],"wglang":"en"}', "php"); ?>
Tabpanel wg_tabpanel
Tab-based navigation between content areas.
Content A
Content B

Use widgets on your website

To embed widgets into your own website you need a wgclient — a personalized PHP file that acts as a bridge between your website and the Widget Storm system.

  1. Register for free at the Widget Storm Station
  2. Sign in with your credentials
  3. Download your personal wgclient.php
  4. Place the file together with wghandler.php on your web server
To the Station →