With its built-in code editor, Drupal Canvas 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 Drupal Canvas core purpose and have basic knowledge of modern JavaScript frameworks (such as React or Vue).

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

Then, we'll demonstrate methods for integrating components developed outside of Drupal Canvas 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 Drupal Canvas works with JavaScript components.
- Attendees will walk away with the necessary skills to build JavaScript-focused projects with Drupal Canvas.
- 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