Choose to view the demo for:

Grid Aware Website using Grid Intensity

This page uses grid intensity data from Electricity Maps and CO2.js to determine if the energy grid in your location is "dirtier" than average. 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 average, 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 intensity 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 grid intensity 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: