UK Grid Live

What it is

A single-page dashboard for Britain’s electricity grid: how carbon-intense it is right now, what’s generating it, what you’d be paying on a time-of-use tariff, and how all of that differs across the fourteen regional grids. A glossary and a live calculator sit alongside for anyone using it as a teaching aid.

Why I built it

I wanted to know when it was cleanest to put the kettle on. The Carbon Intensity API answers that, but everything I found built on top of it wanted to sell me a smart meter first.

It became a teaching tool almost by accident. The underlying question — where does this electricity actually come from, and does it matter when I use it — turns out to interest children about as much as adults.

How it works

Vanilla JavaScript with ES modules, no framework. Two public APIs do the real work: the Carbon Intensity API for anything to do with carbon or generation mix, and Octopus Energy for Agile prices, averaged across all fourteen DNO regions so the figure lines up with the national-level carbon view. Both are CORS-friendly and need no key, which is the only reason this can be a plain static site on cPanel with no backend at all.

Charts are Chart.js, with the annotation plugin drawing the “now” line. The regional map is a public-domain SVG silhouette of Great Britain with fourteen coloured dots on top, each one nudged by hand until it landed inside the right region. That was an evening I hadn’t planned on spending.

It refreshes every five minutes but only re-renders when the API’s to timestamp actually advances. The underlying data only changes every half hour, and there’s no sense making the charts thrash for nothing. Every timestamp goes through one module that normalises to Europe/London, because British Summer Time would otherwise bite twice a year.

What I’d change

It should show total generation in gigawatts, not just percentages. The data exists, but that endpoint doesn’t allow CORS, so I’d need a small server-side proxy. That would end the “no backend, no keys” story the whole thing is built on. Worth doing one day, not worth doing yet.

How to use it

Open the page. The big number at the top is the current carbon intensity in grams of CO₂ per kilowatt-hour, and lower is cleaner. The donut underneath shows what’s producing that power right now.

The chart below plots today’s actual and forecast intensity against the Agile price, so you can see whether cost and carbon are moving together. Frequently they aren’t. The map gives the same intensity figure for each of the fourteen regional grids.

If you want to know what a single appliance costs and emits, the Energy Calculator multiplies wattage by hours by the live intensity. The glossary covers anything on the page you didn’t recognise.