https://edge-functions-examples.netlify.app/

1
2<!DOCTYPE html>
3<html lang="en">
4  
5    <head>
6    <meta charset="UTF-8" />
7    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
8    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
10    <!-- Meta -->
11    <title>Home | Edge Functions on Netlify</title>
12    <meta name="description" content="Explore our library of Edge Function examples and deploy your own to Netlify." />
13
14    <!-- Fonts -->
15    <link rel="preload" href="https://example-styles.netlify.app/fonts/PacaembuVar-latin.woff2" as="font" type="font/woff2" crossorigin />
16    <link rel="preload" href="https://example-styles.netlify.app/fonts/MulishVar-latin.woff2" as="font" type="font/woff2" crossorigin/>
17
18    <!-- Netlify demo styles -->
19    <link rel="stylesheet" href="https://example-styles.netlify.app/styles.css">
20
21
22    <!-- Favicons -->
23    <meta name="theme-color" content="#ffffff" />
24    <link rel="icon" href="/favicon.svg" />
25    <link rel="mask-icon" href="/mask-icon.svg" color="#000000" />
26    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
27    <link rel="manifest" href="/manifest.json" />
28  
29
30    <!-- Open Graph -->
31    <meta name="twitter:card" content="summary_large_image" />
32    <meta name="twitter:site" content="@netlify" />
33    <meta name="twitter:creator" content="@netlify" />
34
35    <meta property="og:url" content="https://edge-functions-examples.netlify.app/" />
36    <meta property="og:type" content="website" />
37    <meta property="og:title" content="Home" />
38    <meta property="og:description" content="Explore our library of Edge Function examples and deploy your own to Netlify." />
39    <meta property="og:locale" content="en_US" />
40
41    <meta property="og:image" content="https://res.cloudinary.com/netlify/image/upload/c_fit,g_west,h_400,co_rgb:FFFFFFFF,l_text:netlify.com:Pacaembu-Bold.ttf_57:Netlify%20Edge%20Functions:%0AHome,w_1053,x_46/v1619123320/netlify.com/default-og-background-learn-more.png" />
42    <meta property="og:image:alt" content="A Netlify branded open graph image representing Home" />
43    <meta property="og:image:width" content="1200" />
44    <meta property="og:image:height" content="630" />
45    <meta property="og:site_name" content="Edge Functions on Netlify" />
46
47    

47<script src="/lib/highlight.min.js"></script>

47
48    

48<script>hljs.highlightAll();</script>

48
49    <!-- Google tag (gtag.js) -->

49
50    <script async src="https://www.googletagmanager.com/gtag/js?id=

50G-X2FMMZSSS9

50"></script>
51    

51<script>
52      

52window.dataLayer = window.dataLayer || [];
53      function gtag(){dataLayer.push(arguments);}
54      gtag('js', new Date());
55      gtag('config', '

55G-X2FMMZSSS9

55');
56    

56</script>

56
57  </head>
58  
59  <body>
60  
61    <header>
62      <nav>
63        <a href="https://www.netlify.com/">
64          <img src="https://example-styles.netlify.app/images/logo-netlify-small-monochrome-darkmode.svg" alt="Netlify" class="nf-logo">
65        </a>
66        <ul>
67           
68          <ul><a href="/">Edge Functions Examples</a></li>
69        </ul>
70      </nav>
71      <section>
72        <h1>Edge Functions on Netlify</h1>
73        <p>Reference examples for learning about Edge Functions on Netlify.</p>
74      </section>
75    </header>
76    <hr>
77  
78  <main>
79    
80    
81<hr>
82<section>
83  <h2>What are Edge Functions?</h2>
84  <p>Using JavaScript and TypeScript, <a href="https://www.netlify.com/products/?utm_campaign=devex&utm_source=edge-functions-examples&utm_medium=web&utm_content=Edge%20Functions%20Product%20Page#netlify-edge-functions" target="_blank" rel="noopener">Netlify Edge Functions</a> give you the power to modify network requests to localize content, serve relevant ads, authenticate visitors, A/B test content, and much more! 
85  <p>
86  This all happens at the <strong>Edge</strong> — directly from the worldwide location closest to each user.</p>
87  </p>
88
89  <blockquote>
90  <p>To use Edge Functions on Netlify, add JavaScript or TypeScript files to a <code>/netlify/edge-functions</code> directory in your project.</p>
91  <p><a href="https://docs.netlify.com/edge-functions/overview/?utm_campaign=devex&utm_source=edge-functions-examples&utm_medium=web&utm_content=Edge%20Functions%20Docs" target="_blank" rel="noopener">Learn more in the docs</a>.</p>
92  </blockquote>
93  </section>
94  
95
96    <section>  
97    
98    <hr>
99    <section>
100    <h2>Examples</h2>
101    <p>
102      Explore the examples below, or over in the <a href="https://github.com/netlify/examples/tree/main/examples/edge-functions" target="_BLANK" rel="noopener">GitHub repository</a> for this site.
103    </p>
104
105      <h3>Responses</h3>
106      <ul>
107        <li><a href="/example/hello">Hello world</a></li>
108        <li><a href="/example/json">Return JSON</a></li>
109        <li><a href="/example/image">Return an image</a></li>
110      </ul>
111
112    <h3>Rewrites and proxies</h3>
113    <ul>
114    <li><a href="/example/rewrite">Rewrite responses from another URL</a></li>
115    <li><a href="/example/proxy-requests">Proxy requests to another source</a></li>
116    </ul>
117
118    <h3>HTTP Headers and Methods</h3>
119    <ul>
120    <li><a href="/example/set-request-header">Set custom HTTP request headers</a></li>
121    <li><a href="/example/set-response-header">Set custom HTTP response headers</a></li>
122    <li><a href="/example/method">Configure HTTP methods</a></li>
123    </ul>
124
125      <h3>Transforming responses</h3>
126      <ul>
127        <li><a href="/example/transform">Text transformations</a></li>
128        <li><a href="/example/htmlrewriter">HTML transformations</a></li>
129        <li><a href="/example/include">Content includes</a></li>
130      </ul>
131
132      <h3>Geolocation</h3>
133      <ul>
134        <li><a href="/example/geolocation">Determine a user's location</a></li>
135        <li><a href="/example/country-block">Block content according to country</a></li>
136        <li><a href="/example/localized-content">Serve localized content</a></li>
137      </ul>
138
139      <h3>Cookies</h3>
140      <ul>
141        <li><a href="/example/cookies-set">Set cookies</a></li>
142        <li><a href="/example/cookies-read">Read cookies</a></li>
143        <li><a href="/example/cookies-delete">Delete cookies</a></li>
144        <li><a href="/example/abtest">Set up an A/B test using cookies</a></li>
145      </ul>
146
147      <h3>Streams</h3>
148      <ul>
149        <li><a href="/example/long-running">Long-running edge functions</a></li>
150        <li><a href="/example/server-sent-events">Server-sent events (SSE)</a></li>
151      </ul>
152
153      <h3>WebAssembly</h3>
154      <ul>
155        <li><a href="/example/wasm">Edge WebAssembly</a></li>
156      </ul>
157
158      <h3>Environment and debugging</h3>
159      <ul>
160        <li><a href="/example/log">Write to the logs</a></li>
161        <li><a href="/example/environment">Use environment variables</a></li>
162        <li><a href="/example/uncaught-exceptions">Read logs for uncaught exceptions</a></li>
163        <li><a href="/example/context-site">Access site information</a></li>
164      </ul>
165    </section>
166  
167    <p>
168    
169    </p>
170    </section>
171
172    
173    <hr/>
174    <section>
175      <h3>Deploy this site to Netlify</h3>
176      <p>
177        Try out Edge Functions on Netlify today! Click the button below to deploy this site with all of its demos to your Netlify account.
178      </p>
179      <p>
180  <a href="https://app.netlify.com/start/deploy?repository=https://github.com/netlify/examples/&create_from_path=examples/edge-functions/&utm_campaign=dx-examples&utm_source=edge-functions-examples&utm_medium=web&utm_content=Deploy%20Edge%20Functions%20Examples%20to%20Netlify"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify"></a>
181  </p>
182    </section>
183
184  </main>
185  
186
187  <footer>
188  <div class="flex-btwn">
189    <a href="https://www.netlify.com/"><img src="https://example-styles.netlify.app//images/logo-netlify-small-monochrome-lightmode.svg" class="nf-logo" alt="Netlify logo"></a>
190    <div class="social-icons">
191      <a href="https://youtube.com/Netlify"><img src="https://example-styles.netlify.app/icons/youtube.svg" alt="YouTube"></a>
192      <a href="https://github.com/netlify/examples"><img src="https://example-styles.netlify.app/icons/github.svg" alt="GitHub"></a>
193      <a href="https://x.com/Netlify"><img src="https://example-styles.netlify.app/icons/twitter.svg" alt="X"></a>
194      <a href="https://linkedin.com/company/Netlify"><img src="https://example-styles.netlify.app/icons/linkedin.svg" alt="LinkedIn"></a>
195      <a href="https://answers.netlify.com"><img src="https://example-styles.netlify.app/icons/discourse.svg" alt="Netlify Answers"></a>
196    </div>
197  </div>
198  <div class="links-container">
199    <section>
200      <h3>Developers</h3>
201      <ul role="list">
202        <li><a href="https://developers.netlify.com/">Netlify Developers</a></li>
203        <li><a href="https://developers.netlify.com/sdk/">

203Netlify SDK</a></li>
204        <li><a href="https://developers.netlify.com/cli/">Netlify CLI</a></li>
205        <li><a href="https://developers.netlify.com/feed/">Activity Feed</a></li>
206        <li><a href="https://docs.netlify.com">Documentation</a></li>
207        <li><a href="https://netlify.com/conference/">Compose Conference</a></li>
208      </ul>
209    </section>
210    <section>
211      <h3>Company</h3>
212      <ul role="list">
213        <li><a href="https://netlify.com/blog/">Blog</a></li>
214        <li><a href="https://netlify.com/about/">About</a></li>
215        <li><a href="https://netlify.com/careers/">Careers</a></li>
216
217        <li><a href="https://netlify.com/press/">Press</a></li>
218        <li><a href="https://swag.netlify.com/">Netlify Store</a></li>
219        <li><a href="https://netlify.com/sustainability/">Sustainability</a></li>
220      </ul>
221    </section>
222    <section>
223      <h3>Contact Us</h3>
224      <ul role="list">
225        <li><a id="cta-footer-sales" href="https://netlify.com/enterprise/contact/">Sales</a></li>
226        <li><a id="cta-footer-support" href="https://netlify.com/support/">Support</a></li>
227        <li><a id="cta-footer-status" href="https://netlifystatus.com/">Status</a></li>
228        <li><a id="cta-footer-answers" href="https://answers.netlify.com/">Forums</a></li>
229        <li><a id="cta-footer-agencyDirectory" href="https://netlify.com/agency-directory/">Hire an Agency</a></li>
230      </ul>
231    </section>
232  </div>
233  <small>
234    <ul>
235      <li><a href="https://netlify.com/trust-center/">Trust Center</a></li>
236      <li><a href="https://netlify.com/privacy/">Privacy</a></li>
237      <li><a href="https://netlify.com/security/">Security</a></li>
238      <li><a href="https://netlify.com/gdpr-ccpa/">GDPR/CCPA</a></li>
239      <li><a href="mailto:[email protected]?subject=Abuse%20report&body=Please%20include%20the%20site%20URL%20and%20reason%20for%20your%20report%2C%20and%20we%20will%20reply%20promptly.">Abuse</a></li>
240      </ul>
241      <div>© 2025 Netlify</div>
242    </small>
243  </footer>
244  
245  </body>
246</html>