With its built-in code editor, Experience Builder lets you create JavaScript components right in your browser. This session will start with this feature's essentials before delving into techniques for taking full advantage of components developed outside of Drupal with a modern JavaScript stack, such as React or Vue.

Prerequisite
Attendees will get the most out of this session if they're already familiar with Experience Builder's core purpose and have basic knowledge of modern JavaScript frameworks (such as React or Vue).

Outline
The session will begin by exploring Experience Builder's built-in code editor and its capabilities for creating JavaScript components directly in your browser. You'll learn how Preact/React components work within Experience Builder and how they become available for use in your projects.

Then, we'll demonstrate methods for integrating components developed outside of Experience Builder using any modern JavaScript framework. We'll also examine various server-side rendering approaches, comparing Drupal-first versus frontend-first methodologies.

Throughout the session, we'll reinforce concepts with practical examples, showcasing real-world implementations such as Lupus Decoupled.

Learning Objectives
- Attendees will understand how Experience Builder works with JavaScript components.
- Attendees will walk away with the necessary skills to build JavaScript-focused projects with Experience Builder.
- Attendees will learn how to ensure JavaScript-heavy pages stay fast.
- Attendees will have an overview of varying approaches and when to use what.

Experience level
Beginner