Components everywhere! From Component Library module to Fully Decoupled Layout Builder with Instant Preview

In this session you will learn how components can make theming Drupal easier, faster and include instant preview - both coupled and decoupled - and why they are still the future:

component_library empowers you to theme a coupled site completely from within the browser with just four steps: Select + Edit, Change, Preview, Save

spa_admin + jsonapi_field_formatter brings all the power of Drupal to your decoupled application: Layout Builder, Contextual Links, Admin Toolbar, View Modes - all work like if they were coupled - zero* changes necessary

lb_plus makes it faster to build complex layouts with drag and drop

Join me for a wild ride and breath-taking demonstrations.

## Description

3 years have passed since the idea of using Components Everywhere was first introduced and 1.5 years since you learned how to build templates via reusable components in the UI. What was back then just a vision has now become partial reality thanks to the power of JSON:API!

This session has three parts:

- Component Library takes over the (theming) world
- Re-thinking Decoupled - Creating a powerful admin experience with Instant Preview
- lb_plus (Layout Builder+) - Build complex pages in seconds

After this session you will have a plethora of new tools to make your life easier.

### Component Library takes over the (theming) world

Component Library is now able to take over the whole theme registry that means for the first time ever you are able to build a whole theme just in configuration, including Twig templates, CSS and JS.

Combine this with a framework like Tailwind CSS and Alpine or preact and you never need to go to the code anymore to build very complex web sites. No build step necessary.

You can even combine this further with the power of workspaces and you can re-design a full site within a workspace and then publish with a click.

This is a revolution for advanced content editors that know HTML, CSS and a little Twig, but don't have a PHP environment, etc.

### Re-thinking Decoupled - Creating a powerful admin experience with Instant Preview

On the fully Decoupled Front you will experience a way to keep all functionality that Drupal provides, but use them with a fully decoupled (p)react application using JSON:API.

Tools like layout builder, contextual links and admin toolbar - they just work as usual.

In fact in several demonstrations users did not even know they were within the space of the decoupled application - it just feels so integrated.

This is a game changer for Decoupled Drupal.

You will learn how to set up contextual links by adding one little data attribute, and setup a component resolver in the react application to make Drupal's layout builder just work: Edit block, Save, Decoupled application refreshes

You will see how you can use jsonapi_field_formatter to create opinionated fully spec compliant JSON:API responses that make use of the full power of Drupal's view modes. No more ?include=field_image,field_image.field_media_image.

Adding a new component takes just four steps:

1. Add a new block type with all fields
2. Setup the API view mode with the right formatters
3. Style the new component in react
4. Done.

I will also explore how Drupal can make use of Shadow DOM and web-components to isolate its Admin UI from a decoupled application running within it.

### lb_plus (Layout Builder+) - Build complex pages in seconds

At last you will experience a demo of lb_plus an experiment on how layout builder can use Template blocks, which can be placed on the page with simple drag and drop. Building pages with layout builder - both coupled and decoupled - has never been easier or more fun.