Use Eleventy Edge to deliver dynamic web sites on the Edge

I am very proud to introduce a brand new addition to Eleventy: Eleventy Edge.

Eleventy Edge is an exciting new way to add dynamic content to your Eleventy templates. With a simple Eleventy shortcode you can opt-in a part of your Eleventy template to run on an Edge server, allowing your site to use dynamic, user-specific content!

• Eleventy Edge Plugin documentation
• Eleventy Edge Demos
• demo-eleventy-edge Source Code on GitHub

A few ideas Jump to heading #

Here are a few ideas of things you could do with the new Eleventy Edge plugin:

• Any user personalized content (User accounts, premium-only content, AB testing)
• Accessing/setting HTTP Headers (e.g. Cookies, Save-Data, Client Hints, etc)
• Handling Forms
• Using Geolocation information to localize content
• A zero-clientside JavaScript Dark mode/Light mode toggle

Supplement your build Jump to heading #

You can use Eleventy Edge with your existing projects and templates—render just a portion of your build template on the Edge:

The content outside of the `edge` shortcode is generated with the Build.

{% edge %}
The content inside of the `edge` shortcode is generated on the Edge.

* Use a query param value here.
* Use a cookie value here.
* All without clientside JS.
{% endedge %}

This feature makes heavy use of Netlify’s new Edge Functions feature to run Eleventy in Deno on Edge servers. It continues Eleventy’s architectural dedication to markup-first zero-clientside JavaScript solutions to deliver the fast and scalable dynamic web sites. Check out our introductory demos and watch for more content to come discussing this exciting new feature.

More around the web Jump to heading #

• Netlify Docs: Edge Functions overview
• Netlify Edge Functions on Deno Deploy
• Netlify Edge Functions: A new serverless runtime powered by Deno

Read more blog posts: Jump to heading #

• Next: Three Million npm Downloads!
• Previous: New Eleventy YouTube Channel