aem-eds-frontend-best-practices

What problem does it solve?

Provides production-grade frontend guidance to build high-performance Adobe Experience Manager Edge Delivery Services (EDS) frontends using vanilla JavaScript and modern CSS, enabling teams to ship edge-delivered content with minimal frameworks and robust performance patterns.

Core Features & Use Cases

• 17 rule files covering block development, CSS patterns, vanilla JS patterns, content modeling JSON, Universal Editor models, experimentation/personalization, forms and spreadsheets, Sidekick/SEO, testing, multi-site repoless, CDN configuration, performance optimization, edge compute, and third-party integrations.
• A portable, repeatable blueprint for creating high-performance blocks (Hero, Columns, Tabs, Accordion, Carousel, Fragment, Card grids, data-driven content, and more) that render at the edge with zero-runtime framework overhead.
• Real-world scenarios include data-driven blocks sourced from spreadsheets, API proxies at the edge, and CDN-driven content delivery with push-based invalidation to maintain freshness.

Quick Start

Begin by reading the 17 rules and start implementing EDS frontend patterns using vanilla JS and CSS, following the examples in each guide.