DEV Community

Nevik Schmidt
Nevik Schmidt

Posted on

I built free embeddable widgets (speedtest + electricity price breakdown) — zero dependencies, one line to install

#webdev #javascript #tools #opensource

There's a gap between "here's a useful tool" and "here's something you can actually embed on your site." Most embeddable widgets are either:

  • Glorified link buttons that don't do anything
  • Heavy iframes that slow down your page
  • Paid SaaS with tracking and rate limits

I wanted real, fully functional tools that work with a single script tag. No build step, no npm install for the end user, no tracking.

What I built

Two widgets, both MIT licensed, both zero dependencies:

1. Internet Speedtest Widget

Actually measures download, upload, and ping using Cloudflare's speed endpoints. Not a redirect — the test runs inline on whatever page it's embedded on.

<div id="nevik-speedtest"></div>
<script src="https://dsl.nevik.de/embed/speedtest-widget.js"></script>
Enter fullscreen mode Exit fullscreen mode

Features:

  • Real download measurement via streaming reader (not a HEAD request estimate)
  • Upload measurement via POST to Cloudflare's __up endpoint
  • Ping with outlier detection (5 probes, highest discarded)
  • Circular gauge that fills in real-time with speed-adaptive coloring
  • Tarif rating: green ≥50 MBit/s, amber ≥16, red below
  • Dark/light themes via data-theme

The measurement logic is extracted from the npm package @nevik-de/dsl-speedtest — it's the same code that powers the standalone speedtest page, just wrapped in a self-rendering widget.

2. Electricity Price Breakdown Widget

An interactive calculator showing where every cent of Germany's electricity price goes. Users drag sliders for their annual consumption and price per kWh, and it breaks down all 8 legal components in real-time.

<div id="nevik-strompreis"></div>
<script src="https://strom.nevik.de/embed/strompreis-widget.js"></script>
Enter fullscreen mode Exit fullscreen mode

Data sources: Bundesnetzagentur, Statistisches Bundesamt, BMWK (2025 figures).

Why this matters

If you run a blog about personal finance, energy, or tech — giving your readers a working tool is worth more than 10 affiliate links. A speedtest that actually works keeps people on your page. A price breakdown that updates live is more engaging than a static table.

Both widgets:

  • Work with a single <div> + <script> tag
  • Have zero runtime dependencies (no React, no jQuery, no nothing)
  • Respect dark/light themes
  • Load asynchronously and don't block page rendering
  • Include a discreet "Powered by" link (removable in source)
  • Are MIT licensed — fork them, self-host them, strip the branding

How they work under the hood

The speedtest widget uses the Fetch API with streaming readers for download measurement:

const reader = response.body.getReader();
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  totalBytes += value.length;
  // Calculate current MBit/s from elapsed time
}
Enter fullscreen mode Exit fullscreen mode

For upload, it builds a random Uint8Array payload (to prevent compression skew) and POSTs it. Ping uses 5 small fetches with outlier removal.

The electricity widget stores all legal price components (Stromsteuer, Netzentgelt, Konzessionsabgabe, etc.) as constants and recomputes the breakdown on every slider input event.

Try them

Live demos and copy-paste installation:

dsl.nevik.de/widgets/

Feedback welcome. If you embed them on your site, let me know — I'd love to see them in the wild.

The widgets are part of nevik.de's comparison portal tools. The speedtest npm package is available as @nevik-de/dsl-speedtest. The electricity price calculator Python package is strompreis-rechner on PyPI.

Top comments (0)