Edge Functions on Netlify

Reference examples for learning about Edge Functions on Netlify.


Transform HTML responses with Netlify Edge Functions and HTMLRewriter

You can use Edge Functions with the HTMLRewriter library to transform HTML responses. HTMLRewriter uses WebAssembly to parse a response stream, so is very efficient. It can parse large HTML pages with minimal overhead, and is a better choice than using a string transform in most cases. It has an API that uses familiar CSS selectors to target elements, and can be used to add, remove, or modify elements.

In this example, we transform an HTML page, replacing the src of img tags with a placeholder image. We also add content with the user's location. This shows how to do user personalization when the pages may be static.

import { Config, Context } from "@netlify/edge-functions";
import { HTMLRewriter } from "https://ghuc.cc/worker-tools/html-rewriter/index.ts";

export default async function handler(request: Request, context: Context) {
  const url = new URL(request.url);
  // Only run if the catify query parameter is set
  if (!url.searchParams.has("catify")) {
    return;
  }

  const location = context?.geo?.city;

  const response = await context.next();
  const rewriter = new HTMLRewriter()
    .on("#location", {
      element: (element) => {
        element.setInnerContent(`Catified for a visitor in ${location}`);
      },
    })
    .on("img[catify]", {
      element: (element) => {
        const width = element.getAttribute("width") ?? 800;
        const height = element.getAttribute("height") ?? 600;
        element.setAttribute(
          "src",
          `https://placekitten.com/${width}/${height}`
        );
        element.setAttribute("alt", "A random cat");
      },
    });
  return rewriter.transform(response);
}

See this in action

Explore more examples


What are Edge Functions?

Using JavaScript and TypeScript, Netlify Edge Functions give you the power to modify network requests to localize content, serve relevant ads, authenticate visitors, A/B test content, and much more!

This all happens at the Edge — directly from the worldwide location closest to each user.

To use Edge Functions on Netlify, add JavaScript or TypeScript files to a /netlify/edge-functions directory in your project.

Learn more in the docs.


Deploy this site to Netlify

Try out Edge Functions on Netlify today! Click the button below to deploy this site with all of its demos to your Netlify account.

Deploy to Netlify