Choose to view the demo for:

Grid Aware Website using Power Breakdown

This page uses power consumption data from Electricity Maps to determine if the energy grid in your location is "dirtier" than a certain value. Based on that, some of the design and content loaded by this page will change.

Colours

You're seeing the page in light mode, which means either your local electricity grid is cleaner than a certain, or that no data was available for your region.

Fonts

You're also seeing a custom font (Depature Mono) used on this page.

Data

This page has been modified based on the below data:

How does it work?

This page uses the grid-aware-websites code library to get the current energy grid data from Electricity Maps. Based on the response, it will either return the regular site, or modify parts of the site to apply some low-impact web design practices (explained above).

All of this work takes part in a Cloudflare Worker, meaning there is JavaScript execution on the client device for any of this to happen.

High-level diagram

A diagram showing the flow of data via a web request from the browser, through an edge function, to the host server, and back.
A high-level diagram showing the ideas behind the `grid-aware-websites` project.

Edge worker diagram

A diagram showing the operations inside an edge worker. First a fetch request is made to get a webpage from the host. Then, a request is made to the Electricity Maps API to fetch power breakdown data for the electricity grid of the user. With this data, a check is performed to determine if grid-aware design changes should be applied.
A more detailed diagram showing the process that takes place inside the edge worker to determine if grid-aware design should be applied.

Code snippet running on

This is a simplified snippet from the that works on this page.

Choose to view the demo for: