Name: React Day Berlin 2026
Start: 2026-12-04T07:00:00.000Z
End: 2026-12-07T19:00:00.000Z

Karyna Bunta

Seungho Park

Aleksei Podgaev

Vishnudhasan Govindarajan

Lera

Daria Shabala

Houda Mouttalib

Shubh Gawhade

Hunor Márton Borbély

Filip Michalowski

Boris Karaivanov

Michael Geiss

khouchane Mahmoud

Arash Sarfehjou

Pascal Lemmen

Vitor Barbosa

Dominika Wojewska

Mathieu Habegger

Stavros

Fathima Fasna

Vladyslav Abramov

Emilie Follin

Martin Asenov Mladenov

Anastasia Tikhonova

eran

Victor Jolissaint

Amy Rae Som

Pavel Petrov

Maria-Fontica Marinescu

Yakovlev Eugen

Nicolas Schaber

Varun

Svetlana Smirnova

From Vibe Coding to Vibe Engineering

Kitze

Vibe coding feels productive until you have to maintain it. Behind the agent "thinking..." you ignore and the code you never opened lies a growing pile of wasted tokens, nondeterministic behavior, and compounding errors hiding in plain sight. This talk pushes back on the status quo: elaborate agent architectures, "prompting astrology", overnight automation loops burning through context windows and credit cards. We'll look at why determinism, state machines, and explicit guardrails aren't "old-school"... they're the only sustainable way forward. We'll look at why vibe coding compounds technical debt faster than any era before it, and how modeling behavior explicitly lets you ship AI features you actually understand, maintain, and trust.

Goodbye Slop; Welcome Determinism

David Khourshid

We've entered the era of "just add AI." Slap a prompt box on it, ship it, call it intelligent. But the products people love don't feel like AI demos. They feel obvious, fast, and considered. They have taste. Taste isn't subjective fluff. It's the difference between a streaming response that renders progressively and one that dumps text in a single repaint. It's choosing to compose rich, interactive UI instead of defaulting to a chat window. In this code-heavy session, we'll explore what taste actually means when building with AI: performance patterns, rendering decisions, and the product instincts that separate forgettable AI wrappers from tools people reach for every day.

Taste: How React Leads to AI

Tejas Kumar

Most agents fail in production for reasons the model can't fix. In this workshop, we start from an agent that fails and lies about it, then harness it step by step until it does the job reliably, without a single change to the prompt. Workshop outline: 1. The failing agent: why it breaks, and why it claims success anyway 2. The agent loop, built up from an empty loop 3. A tool registry and context management 4. Guardrails, context compression and retries that hold whichever model sits underneath 5. Deterministic verification, so the agent fails honestly instead of claiming success 6. Moving secrets and fragile steps, like login, out of the model and into the harness 7. A harness plan for the agents you're building

Build a Production Agent Harness

The European Accessibility Act (EAA) is now the new normal, but for many organizations, the real work is only beginning. As we move through 2026, companies across Europe are trying to understand what the law means for their websites and digital products, and what can happen if they do not follow the rules. In this session, we’ll go beyond the basics of EAA compliance and look at the legal risks of inaccessible websites and applications. We’ll explore how the EAA connects to WCAG, how the rules can be enforced, and why accessibility is becoming an important legal, financial, and reputational topic for organizations. We’ll also look at accessibility lawsuits and common problems that can put companies at risk. This includes inaccessible websites, online shops, forms, navigation, and other digital experiences that create barriers for people with disabilities. Finally, we’ll connect the legal requirements to the development process. We’ll discuss what developers and engineering teams can do to reduce risk, show that accessibility is being taken seriously, and build accessibility into the way digital products are created and maintained. By the end, you’ll have a better understanding of the EAA, the risks of non-compliance, and how developers can help their organizations stay compliant and build better experiences for everyone.

Life After EAA: Maintaining Accessibility at Scale

Louëlla Creemers

I built a software factory: a Kanban board where dragging a card starts an agent, tasks that unblock each other as they finish, agents with their own roles and prompts, and an adversarial reviewer that goes through the code before I ever see it. It worked. I barely used it. The problem wasn't the factory, it was that I kept working the way I always had: sitting with an agent, pushing it forward, jumping to the next one, course correcting. Everything interactive. A factory can only take work you've already made the decisions for, and almost none of my work arrived that way. You'll leave this talk with a concrete way to split your work into online work that needs your continuous attention and offline work an agent can run with for hours, and with the rebuilt factory I actually use now: tasks I arm during the day, fire in the evening, and verify and push forward the next morning.

I Built a Software Factory. I Barely Used It. Here's How I Fixed It.

Juri Strumpflohner

Launched in February 2026 under the Linux Foundation, the React Foundation now stewards React, React Native and related projects, funds maintainers and community work, and drives technical decisions with contributors. If you're curious about what is happening inside the foundation, and how to get involved, you don't want to miss this lightning talk.

Going From github.com/facebook/react to github.com/react/react Wasn’t Just a Repository Move

Nicola Corti

Nerdy alert! This talk isn't about APIs. It's about how things work and why they were built that way. Behind the components we write every day, React now includes its own scheduler, streaming engine, network protocol, server execution model, compiler, and application architecture patterns. Many developers use these features without fully realizing what's happening under the hood. In this talk we'll uncover the hidden systems that power modern React and explore how the library is transforming into a full application platform.

The Secret Life of React

Krasimir Tsonev

Every repo has them now: CLAUDE.md, AGENTS.md, a folder of markdown rule files written to steer the AI. Write the rule once, get the code you want. Except these files are advisory, not enforced, as every major vendor says so in their own docs. The research backs it up. Adding them doesn't always improve results, and it can raise the costs by more than 20%. Adherence fades as files grow and conversations run long. This talk is about how to minimize and fix this problem. First, how the tools really work: how Cursor, Claude Code, and Codex load and rank rule files, why precedence between them is often undefined, and how to check what actually reached the model on a given run. Then how to govern rules like real code: scope each one so it fires only where it should, put the non-negotiables up top where the model pays attention, and prune the files before they rot or start contradicting each other. And for the rules that truly cannot fail, move them out of prose and into hooks and CI, where the action is guaranteed every time. Do all that, and each rule earns a second job. Beyond steering the AI, a written-down rule is the standard you measure the finished code against. And that gap, between the app you described and the app you got, is where trust actually lives. You'll leave knowing which of your rules do real work and which just sit there looking like they do, and how to verify that instead of assuming it.

Why Agents Ignore Your Rules

Filip Hric

You don't need a design system to think like a design system team. This talk is a tactical tour of the tooling habits that design system teams rely on daily, and that any product developer can steal, even working in an app with zero shared components. I'll cover writing a Storybook story for every state as you build, not after, so loading, error, empty, and edge cases exist by default instead of by accident. I'll show why visual regression testing isn't a design system nice-to-have, but the fastest way to catch UI bugs that code review structurally cannot see. I'll make the case for building on accessible-by-default primitives (Radix, React Aria, Base UI, shadcn/ui) instead of hand-rolling focus management from scratch. And I'll connect this directly to 2026: a growing share of UI code is AI-generated, and these are exactly the habits and tools, including the new Storybook MCP server, that keep AI-assisted UI from turning into slop. You'll leave with a toolkit you can adopt this week, no design system required.

Design System Tools Every Developer Should Use

Will Klein

"Where we're going, we don't need roads"... but we absolutely need better security. The 2025 incident caught us off guard because we had forgotten past lessons. In this talk, we revisit the evolution of threats, moving from the "XSS Hell" of 2013 to the intricate data leaks of the Server Component era. We will break down exactly what happens when the boundary between server and client dissolves. We will discover when React still has our backs and when we’re the last line of defence. Instead of waiting for a crash, we will focus on prevention, using a "Shift Left" approach to find bugs early. We will implement concrete patterns like React Taint APIs and Defense in Depth. Join us to build a full toolkit and ensure history doesn't repeat itself in your application.

Don't Panic! React Security After 2025

Ramona Schwering

Rich text editing on the web is a solved problem. On mobile, it's a battlefield. At Digg, we built a rich text editor in React Native anyway. This talk covers what we built, what broke, and the one architectural decision that made everything else possible: a universal content format that every platform, from the editor to the backend to moderation, agrees on. You'll walk away with a practical framework for designing cross-platform content formats, useful well beyond rich text for any unified system.

Building a Rich Text Editor in React Native

Rubén Sospedra

<div>Join us for a hands-on workshop built for developers who want to move from idea to working software faster, using Claude Code, Anthropic's agentic coding tool. Unlike a typical autocomplete-style assistant, Claude Code lives in your terminal, IDE, or desktop app, reads and understands your entire codebase, and can take direct action: editing files, running commands, and handling git workflows, all through natural language.</div><div> </div><div>In this workshop, you'll initialize a Next.js project from scratch and use Claude Code to plan, build, and iterate on a real, working application. You'll set up a `CLAUDE.md` file to give Claude persistent project context and conventions, so you're not repeating yourself in every prompt, and use Plan Mode to review an agent's approach before it touches any code, keeping you in control of multi-step changes. Along the way, you'll write effective prompts, delegate multi-step coding tasks, and let Claude Code handle the repetitive work of scaffolding, wiring up components, and debugging, so you can focus on product decisions and architecture instead of boilerplate.</div><div> </div><div>By the end of the session, you'll have shipped a functioning Next.js application and gained a practical workflow for using Claude Code on your own projects, whether you're prototyping quickly or working within an existing codebase.</div><div> </div><div>No prior experience with Claude Code is required. Some familiarity with React or Next.js is helpful but not essential; we'll cover what you need to know as we go.</div>

Ship a Next.js App with Claude Code

Maurice de Beijer

The promise of TanStack Query is enticing: "Delete your global state management and let the cache handle it." For many teams, this works—until it doesn't. While building a highly interactive, multi-user Kanban platform, we took this advice to the extreme. We bypassed traditional state management entirely, treating our backend as the "Single Source of Truth" for every UI interaction.It worked beautifully in development. But as we scaled to hundreds of concurrent users, our "simple" architecture turned into a self-inflicted DDoS attack on our own database.In this talk, we’ll go under the hood of TanStack Query to explore why the "Invalidate and Refetch" pattern fails in high-interaction environments. We will break down the architectural shift from reactive refetching to Optimistic UI, discuss the nuances of managing granular query keys, and define the clear boundary where Server State ends and Client State must begin. You’ll leave with a blueprint for building collaborative, high-performance UIs that are kind to your infrastructure.

How Not to Use Tanstack Query

Neciu Dan

React has changed a lot in the last year: React 19, 19.1 and now 19.2 brought a stable React Compiler, new hooks like useEffectEvent, the &lt;Activity /&gt; API, and better SSR primitives such as Partial Pre rendering. And more. In this talk we’ll take a demo React app that’s full of effects, memoization and “old school” patterns, and modernize it step by step.

Modernizing Your React App: Compiler, useEffectEvent, Activity & Friends

Vitor Alencar

AI can generate a React feature in minutes, but getting it to production quality is a different story. In this advanced, hands-on workshop we go beyond simple prompting and build a real React application with Cursor AI, the way professional teams do it. You will learn how to: - Set up Cursor for a real codebase with project rules, context and reusable prompts - Plan and build features with Cursor's Agent while keeping full control over architecture and code quality - Generate and maintain tests, types and documentation with AI - Review AI-generated code for security issues, performance problems and hidden bugs - Refactor and scale an existing React codebase safely with AI assistance - Prepare the application for production with CI checks, linting and deployment best practices By the end of the workshop you will have a practical workflow for using AI to ship React features faster without sacrificing quality, security or maintainability. Level: intermediate to advanced. Basic React and TypeScript knowledge is recommended.

Building Production-Ready React Applications with Cursor AI

Kristiyan Velkov

Beyond the Prompt: Building Production-Ready AI Features in Full-Stack React

AI has made writing code cheaper, but the hardware doesn’t get any cheaper. I build React apps used worldwide, many running inside WebViews on affordable Android phones. These devices often represent the slowest 10% of user experiences. Even when all CI checks pass, performance issues can still slip through review. AI has also made another part of this process harder. We can release more code, but reviewers still have the same time. With more changes in each PR, reviews get crowded, and it’s easier to miss performance problems. To help with this, I built a loop around a coding agent. It reads runtime traces, runs the same benchmark every time, and compares the results with what we see from real devices in the field. I find this setup is useful, but it’s not all about success; it brings new ways to make mistakes in different forms: the benchmark gives better numbers, but the user experience gets worse. LLMs say the changeset is a win, but the trace shows the opposite. While LLMs are working on performance improvements, I’m working on guardrails and more deterministic tools for LLMs to make this loop more successful. In this talk, I’ll walk you through the setup I landed on: runtime traces, benchmarking, and the guardrails I put around the agent. I’ll also share a few places where my first assumptions turned out to be wrong. Twenty minutes is not enough to cover everything about performance engineering, but it is enough to share questions that helped me build this loop. I hope this gives you a helpful starting point for your own projects.

Continuous Performance Engineering in the LLM Era

Halil Emre Özen

How do you change a 13-year-old React application serving tens of millions of monthly users when five developers are spread across three squads, there is no dedicated QA, no automated testing, and limited observability? This technical case study explores how we navigate Smallpdf across multiple React paradigms, deprecated code paths, undocumented assumptions, infrastructure costs, and an enormous potential blast radius. We will examine how to build a useful mental model, introduce AI assistance without overwhelming it with context, assess risk, and migrate progressively without attempting a rewrite or disrupting the users and revenue depending on the system.

No Rewrite, No Safety Net: Navigating 13 Years of React at Scale

Faris Aziz

Zattoo has shipped streaming apps for over two decades, adding platforms one by one: Web in React, Android in Kotlin, Apple in Swift. Every new platform multiplied the work instead of extending it. The same feature built three times, in three stacks, by three siloed teams. Then Amazon invited us to build for Vega, their new Linux-based OS where React Native is the primary UI framework, not an add-on. That became our catalyst to rethink everything: one React Native codebase across Web, Android TV, Apple TV, and Vega, held together by build-time overrides instead of runtime branches, organized by product domain instead of by platform. This is the honest story of that migration. What carried over unchanged, what cost us sleepless nights with the Metro resolver, why Vega and Web turned out closer than they look, and where the React Native ecosystem still treats "iOS and Android" as the whole world when it isn't. A year of production data later, the surprises landed on the side of less work, not more.

The Fourth Platform: How Vega Got Us Surprisingly Close to "Write Once, Run Everywhere"

Bogdan Plieshka

AI has fundamentally changed how engineers work, but most hiring processes haven't changed at all. Coding assistants can generate solutions in seconds. System design answers can be refined with prompts. Candidates walk into interviews with powerful AI tools at their side. Yet many companies are still evaluating engineers as if AI didn't exist. So how do you actually assess engineering ability in this new reality? After interviewing hundreds of engineers at Elementor, I redesigned my hiring process for the AI era. Instead of trying to prevent candidates from using AI, I changed what we evaluate. Today we test how engineers think, how they collaborate with AI, and how they apply judgment when AI-generated solutions are incomplete, incorrect, or misleading. In this talk, I'll share what changed in our hiring process and what actually works in practice: how we evaluate coding ability when AI is involved, which system design questions reveal AI orchestration skills, and what behavioral signals distinguish high-impact engineers from candidates who rely on AI to mask gaps. Whether you're hiring engineers, preparing for interviews, or leading an engineering organization, you'll leave with a practical framework for evaluating engineering talent in the AI era.

Most Engineering Interviews Are Broken: Here's What Actually Matters in the AI Era

Dennis Nerush

Many mobile teams reach a point where maintaining duplicate implementations across iOS and Android becomes unsustainable. React Native promises a unified approach - but for mature apps, a full rewrite is rarely an option. It’s expensive, risky, and difficult to align with continuous product development. In practice, for mature products, most migration efforts are discarded as infeasible. React Native Brownfield is the solution - a set of tools for embedding your React Native app in native apps as a self-contained library, which allows for a gradual adoption of React Native in native applications.In this talk, we will do a deep dive into the internals of Brownfield: how are RN apps packaged, what tooling is needed to cover all use cases (navigation stack, JS-native state sharing, CLI), why we had to implement a custom Gradle Plugin, a few things about real-life problems with transitive dependency handling, SO stripping, how Hermes V1 is handled on Android, how prebuilt RN core on iOS (0.81+) is handled with backwards compatibility, and finally - how the integration of this complex library with Expo is handled using just 1 line of code for the end user, thanks to an Expo config plugin.

React Native Brownfield Deep Dive: How RN Moves in to Native Applications

Artur Morys-Magiera

For decades we've argued that accessibility is the right thing to do. The argument just got a lot easier, because your next customer probably isn't human. Whether you like it or not AI agents from are now browsing, comparing, and interacting on behalf of users. And here's the twist: they consume your site through the exact same accessibility tree screen readers do. Semantic HTML, proper labels, ARIA states, keyboard support, the same patterns that serve disabled users determine whether an agent can efficiently complete a checkout, fill a form, or even find your product. In this talk we'll look at how agents actually use the web, where they fail (and why those failures map to WCAG violations), and what web development teams should do today. If you've been waiting for a business case for accessibility that lands with execs, this is it.

Your Biggest New Customer Can't See Pixels

Tim Damen

This talk introduces Effect-TS as the toolkit that turns chaotic React async logic into typed, predictable code that's as reliable for humans to maintain as it is for AI agents to generate correctly.

Controlling Async Chaos in React with Effect-TS

Violina Popova

React is no longer just for web applications. Some of today’s prominent AI developer tools, including Claude Code, Gemini CLI, and GitHub Copilot CLI, bring React into a rather different environment: the terminal. At the center of this development is Ink, a React renderer for building interactive command-line interfaces using components, hooks, and Flexbox-like layouts.But the bigger shift is not just from browser to terminal. AI applications are moving from sim- ple chat interfaces toward harnesses: systems that connect models with tools, context, workflows, and humans. This talk explores how React and Ink can become the interaction layer for these systems, covering patterns for streaming output, long-running jobs, tool execution, persistent UI regions, keyboard interaction, and asynchronous state

Beyond the Browser: Advanced React Patterns for AI Harnesses with Ink

Pawel Sawicki

AI agents now open pull requests full of React. Some of it is excellent. Some of it quietly ships extra re-renders, broken effects, and abstractions no human chose. The hard part is no longer getting an agent to write a component — it's knowing whether you should merge it. This talk is about the React craft that survives when you're not the one typing: the React Compiler as your safety net, modern primitives that make intent explicit, and contract-level tests that catch what code review misses. You'll watch an agent build a component live, see exactly where it goes wrong, and leave with a concrete checklist for reviewing React you didn't write.

Your Next Pull Request Was Written by a Robot — Is Your React Ready?

 Vinicios Neves

We had more incoming requirements than our team could review, so we built a multi-agent pipeline in CI that takes raw requirements and turns them into reviewed, scored, spec-ready work items. Each requirement gets scored across five dimensions with a hard pass threshold. The ones that pass go through four parallel AI reviewers covering Feasibility, Testability, Scope, and Architecture. Each reviewer writes its findings back to Jira as markdown that engineers actually pick up and use. I'll walk through the rubric design, how the parallel reviewers work, and why calibrating the pass/fail threshold was harder than building the pipeline.

Score, Review, Spec: Multi-Agent Quality Gates in CI

Dipanshu Gupta

If React can orchestrate an open-world 3D C++ game engine at a locked 120 FPS without dropping a single frame, it can handle your heaviest web workload. In this technical case study, we deconstruct how we ported GTA Vice City to WebAssembly and offloaded execution entirely to a background Web Worker. Learn how we bridged compiled C++ with React using SharedArrayBuffer, bypassed traditional Virtual DOM bottlenecks using ref-based micro-updates, and unlocked true off-main-thread UI architecture. You’ll leave with a battle-tested blueprint to make any React application virtually immune to thread freezing and input lag.

If React Can Run 120 FPS GTA Vice City, It Can Run Anything

In my work at MTN Irancell, we are building a Camunda-based workflow platform on top of bpmn-io Form-JS, a form engine that is rendered in Preact. The first time I had to bring a React component inside that Preact tree, it took me 2 weeks. I faced the famous "h is undefined" error one hundred times, two copies of React in memory, hooks failing, and re-render fights between Preact and React owning the same DOM. In this talk I will show the bridge I designed to solve all of this in production, with a live demo on stage where I mount a React component inside a Preact form engine in front of you.

How I Brought React Into a Preact Form Engine: A Production Bridge Pattern

Saman Abbasi

React Compiler entered public beta alongside React 19 at the end of 2024 and reached 1.0 in October 2025. So how did it go two years after the hype?

React Compiler: Two Years in Review

Sascha Becker

Shipping a new feature is easy. Knowing if it actually improved anything? That's the hard part. In production React applications, small UI changes can have a big impact on user behaviour. A new form, validation change, onboarding step, checkout flow, or performance improvement might reduce friction - or quietly make the experience worse. Many teams still ship these changes based on intuition rather than evidence. Without measurement, it is impossible to know whether users succeeded more often, where they dropped off, or whether the change created unintended consequences. This talk makes the case that experimentation is part of frontend engineering. Engineers are not only responsible for building the interface; we also help define what success looks like, add the instrumentation that makes behaviour visible, and release changes in a way that lets teams learn safely. In this talk, we’ll walk through the experimentation lifecycle from a React engineering perspective: forming a hypothesis, defining success and guardrail metrics, instrumenting meaningful user behaviour, gathering data through feature flags or staged rollouts, and learning from the results. Attendees will leave with a practical framework for embedding experimentation into React feature delivery, so teams can build confidence in the true impact of what they ship.

Change Is Only Good When Measured: Building Confidence Through Experimentation

Fadila Fidina

State management has traditionally focused on synchronizing UI interactions, frontend stores, and backend persistence. But AI agents introduce a new type of actor into modern applications: autonomous workflows that can read, execute, and modify application state alongside human users. In this session, we explore how frontend state management concepts can evolve into shared full-stack architectures where both humans and AI agents collaborate on the same data model. Using Angular-based application examples, we will examine sandboxed agent execution with forked state snapshots, deterministic merge strategies, concurrent updates between users and agents, and observable agent actions. Rather than treating AI as an external API call, this talk presents agents as first-class participants in application state transitions. We will extend familiar concepts such as stores, signals, reducers, and event streams beyond the frontend into backend orchestration systems that keep human and agent state consistent. Attendees will leave with practical architectural patterns for building collaborative human + AI applications using ideas FE developers already know.

Human + AI Shared State Management: Extending Frontend Patterns into Agentic Systems

Austin Zhang

The engineers who make it to staff level aren't the ones who wrote the cleverest code. They're the ones who figured out that code was never the point. Most of us learn this too late — after burning hours on solutions no one asked for, defending implementations no one remembers, wondering why technical excellence isn't translating into career growth. Agentic AI just made this lesson impossible to ignore. But for engineers feeling anxious about that, there's good news: what actually drives growth at every level — senior, staff, and beyond — has always been more human than technical. How you communicate. How you understand a problem before you solve it. How clearly you can articulate what kind of engineer you are. Scott Batson (Staff Engineer at Medium, with 15 years building at Netflix, PBS NewsHour, and beyond) makes the case that the engineers thriving in the agentic era were already thinking this way. This talk is about getting there.

The Code Isn't Precious: What Every Staff Engineer Figured Out That You Haven't Yet

Scott Batson

We built a successful marketplace over the past 7 years. 50+ engineers left their mark on the codebase, and most of them are no longer with the company, so every time we looked under the hood, we were afraid. AI made the problem less noticeable for a brief moment, and then we hit the wall. Every update any team shipped made our React app feel more sluggish, harder to maintain, and impossible to upgrade. We were stagnating, and the frustration across product, management, and engineering kept growing. So we went back to the drawing board to understand what made our business successful in the first place, peeling back the layers and focusing on the domains we actually wanted to invest in. This talk dives into how we rebuilt from the ground up with a completely new lens on how we architect features. I'll break down the patterns, the research, and the lessons we learned along the way.

Rebuilding a 7-Year-Old Marketplace From the Architecture Up

Luis Castro

Asking an AI to refactor 200 files across your React codebase burns tokens, takes minutes, and sometimes hallucinates. A codemod can do the job reliably (and for free). But if you're not familiar with writing codemods, that's a big step to climb. In this talk, you'll learn how to use AI to craft the codemods your team needs. Starting with a look inside the React 19 migration recipe, we'll build a custom codemod live for a pattern no recipe covers.

Where We’re Going, We Don’t Need Tokens: Ai-Assisted Codemods for React

Nicolas Carlo

A couple of weeks after shipping our part of a monolith React application, we learned it now needed to run in the Grammarly for Chrome browser extension—and fast. Dive with us into a story about what to expect from such a transition, the intricacies of cross-context communication, and the pitfalls of the extension lifecycle. Will the architecture, the design patterns, and a reactive approach save the day once again, or was the project doomed from the inception?

Splitting the Atom: Lessons From Dividing Our Codebase and Shipping It in a Browser Extension

Vladyslav Bozhko

AI can generate React E2E tests in seconds, but a green run does not prove that a test protects the behavior it claims to cover. I’ll dissect merged fixes I contributed to Ghost, MUI X, and Bruno, where assertions checked unresolved Promises or test handles instead of application state, and one visibility assertion was not awaited. Then, in a runnable React optimistic UI demo, I’ll remove `POST /api/like`. The interface still appears successful and a UI-only Playwright test stays green, while a request-aware test fails. A public Cypress `cy.prompt()` example will show how AI-generated steps can have the same gap between a test’s intent and what it actually verifies. Finally, I’ll share a three-step review method drawn from the 24-rule catalog in [`e2e-skills`](https://github.com/voidmatcha/e2e-skills): define the required evidence, inject a targeted fault, and confirm that the test fails for the expected reason. The method gives developers a repeatable way to review both human- and AI-generated E2E tests.

Green Isn’t Proof: Verifying AI-Generated React E2E Tests

Yongjae Lee (이용재)

AI can generate UI. But it rarely generates the UI your design system would approve. The issue isn’t capability — it’s missing structure. Design systems today are optimized for humans: tokens, components, documentation, and guidelines. But the knowledge that governs product logic, accessibility constraints, and brand intent lives in scattered places, invisible to machines. This talk introduces metadata as a semantic intelligence layer for frontend systems. I’ll show how an auto-synced metadata architecture — powered by extractors and webhooks — continuously transforms codebases and design assets into structured knowledge consumable by MCP (Model Context Protocol) and LLMs. We’ll explore the four knowledge layers required to make design systems machine-readable, why intent and context must be treated differently, and how this shift enables constraint-aware, accurate AI-generated UI. Through a live end-to-end demo, you’ll see how structured metadata flows into MCP, delivers intent-based context, and produces reliable UI output. We’ve spent years perfecting design systems for people. This session explores what changes when we build them for machines.

Agentic Design Systems: Making Design Systems Machine-Readable for MCP and LLMs

Preethi Selvam

Adding AI to a React application often means calling a cloud model through a backend or running a model you manage locally. Chrome offers another path: browser-managed AI capabilities exposed through web APIs. At the same time, WebMCP lets websites expose structured tools that agents can see and use. In this 20-minute, demo-led talk, I will use a small React learning project to show a few Chrome built-in AI capabilities and the practical constraints around them: availability, model downloads, device requirements, browser support, and experimental access. I will then introduce WebMCP, which is not another model API; instead, it is a way for websites to expose browser-visible tools to agents, either through declarative HTML or imperative JavaScript. The goal is to help developers explore what they can build, understand where these technologies differ, and think about what changes when an application needs to work well for both people and agents.

Chrome Built-in AI and WebMCP: New Paths for React Apps

Asad Ullah Khalid

Application modernization has always been hard. The hardest cases combine decades of complexity with missing knowledge, proprietary technology, hardware dependencies, unclear requirements, and systems that cannot simply be switched off. Agentic AI gives us a new chance to make these projects technically and economically viable. It can reconstruct knowledge, explore unfamiliar systems, and support modernization at a previously unrealistic scale. But producing modern code does not prove successful modernization.Agentic engineering is only as good as its verification mechanism. This talk shows how to assess a candidate, build the right context, define what good looks like, and modernize in controlled increments. We will examine a framework combining human judgment, AI based evaluation, and deterministic tests to create credible evidence that the new system actually works. The question is not whether agents can modernize a legacy system. It is whether we can prove that they did.

Agentic AI Can Modernize It. But can you Prove it Did?

Julia Kordick

Learn how to build A2UI interfaces in React and skip the traditional text-based chatbots.  Mitigate XSS risk by learning how to use Configuration Driven Forms architecture to translate declarative JSON blueprints from agents into a pre approved catalog of trusted components.

How to Build Secure A2UI Renderers in React Using Proven Form Architectures

Jasmeet Singh

Voice interfaces that actually do things, not just chat back, still aren't shipping. The reason is that our apps are built for hands and eyes, not for an agent. This talk makes the case that closing that gap is a front-end problem, and that React already gives you what you need to solve it. I'll walk through a real life case of voice surface, a layer that operates your React app as the signed-in user, and the three move-pattern behind it, all while the Developer is in full control of what and how.

The Voice Surface: Make Your React App Act, Not Answer

Ebrahim Mirsafian

A test that passes for the wrong reason is the worst failure in test code: it certifies a broken GPU driver and nothing alarms. I maintain the Khronos Vulkan Conformance Test Suite and run AI coding agents on it every day. This talk is the grading discipline that keeps that work honest: every agent result checked against a human-reviewed reference, so I can tell a correct fix from a lucky-looking one before it ships.

A Test That Passes for the Wrong Reason: Reliability for AI-Assisted Conformance Testing

Lorenzo Dal Col

In this workshop we'll dive into the latest advancements in React and best practices for building modern React apps. We'll take a look at modern NextJS and React Router 7 Framework along with React's "React Server Components". We'll also talk about improving the data-fetching strategies of your SPAs along with options for migrating your SPA to modern React Router.

Modern React Architecture

Brad Westfall

Stop prompting. Start orchestrating. In four intense hours you'll go from using Claude Code like a faster autocomplete to commanding it like a senior engineer commands a team: engineering its context, deploying fleets of subagents, locking it down with hooks, and turning it loose on work that runs without you.Every Claude Code user hits a ceiling where the easy wins run out. The agent handles small stuff beautifully, then loses the thread on anything real. The difference between that ceiling and real mastery isn't better prompts. It's control. This workshop is about control.You'll spend the whole four hours inside CLASH, a real full-stack application, handed to you fully built so nothing stands between you and the hard parts. A serious codebase is the point: it's the only place agentic engineering shows you whether it actually holds up.The throughline is context. Treated carelessly, the context window fills with noise until the agent drifts. Treated as a resource you engineer, it becomes the biggest lever you have. From there the toolkit opens up. Repeatable work becomes a reusable Skill. Noisy, exploratory work goes to subagents that run in their own isolated context, several at once when the job allows. Hard rules become hooks the agent cannot cross. Your own systems come into reach through MCP.Then you let go of the wheel, carefully. The same agent that pairs with you can run headless in a pipeline, drive a long task to a defined finish on its own, or live inside your software through the Agent SDK. We close by setting two greenfield methodologies, Spec Kit and BMAD, side by side, so you leave knowing not just how to drive the agent but which approach fits which problem.Two ideas hold it together: context is king, and you push it, you own it. This was never about generating code faster. It's about staying in command while the agent does more.This is an advanced session for engineers, tech leads, and architects who already use Claude Code every day and want to reach the top of the curve. We move fast, and we start in the deep end.

Claude Code: Black Belt

React Day Berlin

Take part in the exploration of the React universe! Focusing on in-depth talks, hands-on workshops, and developing new opportunities, the React Day Berlin conference provides space for everyone to make friends and collaborate on stellar apps.

React Day Berlin 2026

FocusReactive

Hygraph

Ag Grid

Sentry

Superhuman

Sentry is essential for monitoring application code quality. From Error tracking to Performance monitoring, developers can see clearer, solve quicker, and learn continuously about their applications — from frontend to backend.&nbsp;

FocusReactive is an&nbsp;<meta charset="utf-8" id="isPasted">engineering-led <a href="https://focusreactive.com/" target="_blank" rel="noopener noreferrer">Headless CMS Development Company</a>&nbsp;and&nbsp;<a href="https://focusreactive.com/next-js-expert-agency/">NextJS development experts</a>. Independent partners of Payload CMS, Sanity, Storyblok, Vercel and Shopify. Delivering&nbsp;<meta charset="utf-8" id="isPasted">Composable content platforms built for AI SEO, growing teams, and marketing velocity.