Vibe Code an Author Experience for Edge Delivery Services

L613 Workbook Guide
Wednesday 11:00am - 12:30pm

Lab Introduction

Your authors move fast; your tools should move faster. In this hands-on lab you will use an AI-assisted IDE alongside the Adobe Experience Manager Edge Delivery Services Author SDK to build a custom authoring app from scratch. Starting from the out-of-the-box Edge Delivery Services authoring model, you will iteratively design and refine a fully functional event-creator application — turning prompts into working code one step at a time. Along the way you will discover practical patterns that reduce the time to ship features your content teams will love, and get honest advice on the dos and don'ts when building for Edge Delivery Services.

Context for beginners

Edge Delivery Services (EDS)

The delivery layer for the site. It turns your content and code into the web pages people actually visit.

Edge Delivery Authoring (DA)

The authoring and admin experience. It gives authors and developers a place to create, edit, and manage content and tools.

For this lab, a simple way to think about it is: DA is where authors work, EDS is how the site is delivered, and the code repo contains all the code that lights up your visitor and author experiences.

Mental model

Use this flow as your map during the lab:

GitHub repo - stores the code for the functionality and presentation of your site. It can optionally contain tools, plugins, and apps to help your authors create content in DA.
DA.live - stores the content for you site. Where your authors go to create and update content.
IDE - Where you leverage your developer tools to build new features and fix bugs.
AEM CLI - lets you test changes on your computer at http://localhost:3000
AEM.page - View staged content against any GitHub branch.
AEM.live - View published content against any GitHub branch.

Goals

After completing this lab, you will walk away with the following knowledge:

What out-of-the-box authoring tools are available for Edge Delivery Services.
See how quickly you can go from a blank canvas to a working app by pairing AI with Edge Delivery Serivces and the DA SDK.
Turn natural-language prompts into real, production-quality code — and learn when to trust the AI and when to take the wheel.
Build a complete authoring tool that your content team would actually want to use — from form to published page in one click.
Walk away with patterns and confidence you can apply to your own Edge Delivery Services projects the very next day.

Prerequisites

No prior Edge Delivery Services experience is required. To get the most out of this lab you should have:

Basic familiarity with HTML, CSS, and JavaScript
A laptop with a modern browser (Chrome or Edge recommended)
Comfort working in a code editor — we will use an AI-assisted IDE during the exercises

What You Will Build

You are part of a team running a community events site powered by Edge Delivery Services. Today the only way to publish a new event is to manually create a page in the DA editor with a template.

Your leadership team has decided to allow event coordinators to make their own events, but do not want to give them access to the full capabilities of Edge Delivery Authoring.

Your job is to biuld an Event Creator app that runs inside DA as a fullscreen authoring tool.

The finished app will let an author:

Enter an event title, rich-text description, date, and time.
Optionally upload an event image.
Save the event as a valid Edge Delivery Services page under /events.
Land directly in the DA editor on the newly created page, ready to publish.

You will learn the fundamentals of Edge Delivery Authoring, build the app step by step — starting with a minimal DA app shell, adding the form UI, layering in validation, connecting to the DA Source API for persistence, and finishing with the redirect that completes the author journey.