diff --git a/apps/dart_quotes/lib/main.client.options.dart b/apps/dart_quotes/lib/main.client.options.dart
index 166cb5999..3de487955 100644
--- a/apps/dart_quotes/lib/main.client.options.dart
+++ b/apps/dart_quotes/lib/main.client.options.dart
@@ -40,8 +40,8 @@ ClientOptions get defaultClientOptions => ClientOptions(
   clients: {
     'quote_like_button': ClientLoader(
       (p) => _quote_like_button.QuoteLikeButton(
-        id: p['id'] as String,
-        initialCount: p['initialCount'] as int,
+        id: p.get<String>('id'),
+        initialCount: p.get<int>('initialCount'),
       ),
       loader: _quote_like_button.loadLibrary,
     ),
diff --git a/apps/dart_quotes_server/lib/main.client.options.dart b/apps/dart_quotes_server/lib/main.client.options.dart
index c785fd059..728d9c8c4 100644
--- a/apps/dart_quotes_server/lib/main.client.options.dart
+++ b/apps/dart_quotes_server/lib/main.client.options.dart
@@ -29,8 +29,8 @@ ClientOptions get defaultClientOptions => ClientOptions(
   clients: {
     'quote_like_button': ClientLoader(
       (p) => _quote_like_button.QuoteLikeButton(
-        id: p['id'] as int,
-        initialCount: p['initialCount'] as int,
+        id: p.get<int>('id'),
+        initialCount: p.get<int>('initialCount'),
       ),
       loader: _quote_like_button.loadLibrary,
     ),
diff --git a/apps/fluttercon/lib/main.client.options.dart b/apps/fluttercon/lib/main.client.options.dart
index 6122092ea..42855bdef 100644
--- a/apps/fluttercon/lib/main.client.options.dart
+++ b/apps/fluttercon/lib/main.client.options.dart
@@ -38,7 +38,7 @@ ClientOptions get defaultClientOptions => ClientOptions(
   clients: {
     'like_button': ClientLoader(
       (p) => _like_button.LikeButton(
-        session: _session.SessionCodex.decode(p['session'] as String),
+        session: _session.SessionCodex.decode(p.get<String>('session')),
       ),
       loader: _like_button.loadLibrary,
     ),
diff --git a/apps/website/lib/main.client.options.dart b/apps/website/lib/main.client.options.dart
index 1db1038e9..5a871a38d 100644
--- a/apps/website/lib/main.client.options.dart
+++ b/apps/website/lib/main.client.options.dart
@@ -37,7 +37,7 @@ import 'package:website/pages/home/5_community/components/sponsors_list.dart'
 ClientOptions get defaultClientOptions => ClientOptions(
   clients: {
     'header': ClientLoader(
-      (p) => _header.Header(showHome: p['showHome'] as bool),
+      (p) => _header.Header(showHome: p.get<bool>('showHome')),
       loader: _header.loadLibrary,
     ),
     'install_command': ClientLoader(
diff --git a/apps/website/lib/pages/home/0_hero/components/meet_jaspr_button.dart b/apps/website/lib/pages/home/0_hero/components/meet_jaspr_button.dart
index 11688b3ea..412623af1 100644
--- a/apps/website/lib/pages/home/0_hero/components/meet_jaspr_button.dart
+++ b/apps/website/lib/pages/home/0_hero/components/meet_jaspr_button.dart
@@ -54,7 +54,7 @@ class MeetJasprButtonState extends State<MeetJasprButton> {
   Component build(BuildContext context) {
     if (notifier.done) {
       return div(id: 'meet-jaspr-button', [
-        .wrapElement(
+        .apply(
           events: {
             'click': (event) {
               event.preventDefault();
@@ -77,7 +77,7 @@ class MeetJasprButtonState extends State<MeetJasprButton> {
     }
 
     return div(id: 'meet-jaspr-button', [
-      .wrapElement(
+      .apply(
         classes: touchTimer != null ? 'active' : null,
         events: {
           'mousemove': (event) {
diff --git a/apps/website/lib/pages/home/2_devex/components/counter_button.dart b/apps/website/lib/pages/home/2_devex/components/counter_button.dart
index 91edbdb7e..750f36f4d 100644
--- a/apps/website/lib/pages/home/2_devex/components/counter_button.dart
+++ b/apps/website/lib/pages/home/2_devex/components/counter_button.dart
@@ -51,7 +51,7 @@ class CounterButtonState extends State<CounterButton> {
   Component build(BuildContext context) {
     return div(classes: 'counter-container', [
       Particles(particles: particles),
-      .wrapElement(
+      .apply(
         events: {
           'click': (event) {
             event.preventDefault();
diff --git a/docs.json b/docs.json
index 0fda0c57a..5f9a157bf 100644
--- a/docs.json
+++ b/docs.json
@@ -154,6 +154,10 @@
           "title": "💙 Flutter Embedding",
           "href": "/going_further/flutter_embedding"
         },
+        {
+          "title": "🖥️ Server Components",
+          "href": "/going_further/server_components"
+        },
         {
           "title": "🪐 Custom Backend",
           "href": "/going_further/backend"
diff --git a/docs/api/utils/at_client.mdx b/docs/api/utils/at_client.mdx
index f5abffc1f..683a73b6b 100644
--- a/docs/api/utils/at_client.mdx
+++ b/docs/api/utils/at_client.mdx
@@ -102,6 +102,20 @@ Learn more about how to set up serialization for custom data types using the [`@
 
 With this setup you can use any class as the parameter of a `@client` component.
 
+### Server Components (Passing Components)
+
+Parameters can also be other components (type `Component`, including `List`s and `Map`s thereof). When you pass a component as a parameter to a `@client` component, it is treated as a **Server Component**:
+
+- It is rendered **only on the server**.
+- Its Dart code is **not** compiled to JavaScript and **never** executes on the client.
+- Its pre-rendered HTML structure is embedded directly into the `@client` component's output and is automatically mounted on the client during hydration.
+
+This is extremely useful when building layout components (like modals, sidebars, or tabs) that wrap large parts of your website that don't need client-side interactivity, thereby keeping your client bundle small.
+
+<Info>
+  For a detailed explanation of this design pattern, including advanced examples like Tab bars and component scope transitions, see the [Server Components Guide](/going_further/server_components).
+</Info>
+
 ## How it works
 
 The following happens when you use a `@client` component:
@@ -114,11 +128,10 @@ The following happens when you use a `@client` component:
 
 2. The component is built and pre-rendered normally.
 3. Jaspr adds a html marker (`<!--$<name> data=<serialized-parameters>-->`) around your components output.
-4. Jaspr adds the components js target as a `<script>` tag to the documents `<head>`.
 
 *on the client:*
 
-5. The browser loads the pre-rendered html and compiled js scripts.
-6. The used component is located based on the html marker.
-7. The parameters are deserialized and the component is mounted to the target element.
+4. The browser loads the pre-rendered html and compiled js scripts.
+5. The used component is located based on the html marker.
+6. The parameters are deserialized and the component is mounted to the target element.
 
diff --git a/docs/concepts/components.mdx b/docs/concepts/components.mdx
index 78ff95fc5..dc2b301e0 100644
--- a/docs/concepts/components.mdx
+++ b/docs/concepts/components.mdx
@@ -93,7 +93,7 @@ In every aspect, this component behaves the same as Flutter's `InheritedWidget`.
 
 ## Foundation Components
 
-Jaspr has three foundational component types, which are accessible through factory constructors on the `Component` class: `Component.element()`, `Component.text()` and `Component.fragment()`. Additionally, there are two more `Component.empty()` and `Component.wrapElement()` which are all explained below.
+Jaspr has three foundational component types, which are accessible through factory constructors on the `Component` class: `Component.element()`, `Component.text()` and `Component.fragment()`. Additionally, there are two more `Component.empty()` and `Component.apply()` which are all explained below.
 
 <Info>
 Unlike Flutter, Jaspr has a fixed number of foundational components which make up all other components and represent the core building blocks of HTML: element nodes and text nodes. Flutter is different because it allows you to write custom render objects with your own layouting and painting logic. This isn't possible in Jaspr because with HTML, the browser handles both layouting and painting. 
@@ -210,14 +210,14 @@ This is useful when you want to return "nothing" from a build method.
 final component = Component.empty();
 ```
 
-### Component.wrapElement()
+### Component.apply()
 
-A component which applies its attributes and parameters (like `classes`, `styles`,) etc.) to its direct child element(s).
+A component which applies its attributes and parameters (like `classes`, `styles`,) etc.) to its target element(s).
 
-This does not create a HTML element itself. All properties are merged with the respective child element's properties, with the child's properties taking precedence where there are conflicts.
+This does not create a HTML element itself. All properties are merged with the respective target element's properties, with the target's properties taking precedence where there are conflicts.
 
 ```dart
-final component = Component.wrapElement(
+final component = Component.apply(
   classes: 'wrapping-class',
   styles: Styles(backgroundColor: Colors.blue, padding: Padding.all(8.px)),
   child: div(
@@ -238,6 +238,28 @@ The above component renders the following HTML:
 </div>
 ```
 
+By default, `Component.apply()` targets all of its direct children. You can change this by using the `ApplyTarget target` parameter to target elements, either direct children or descendants, by tag, id or class names.
+
+```dart
+final component = Component.apply(
+  target: ApplyTarget.descendantWith(tag: 'p'),
+  styles: Styles(color: Colors.blue),
+  child: div([
+    p([
+      .text('Hello World'),
+    ]),
+  ]),
+);
+```
+
+The above component renders the following HTML:
+
+```html
+<div>
+  <p style="color: blue;">Hello World</p>
+</div>
+```
+
 ## Formatting Whitespace
 
 When pre-rendering your components in **server** and **static** mode, Jaspr will output cleanly formatted html on a best-effort basis. This means it will add newlines and indentations to your html element, while trying to not affect the way the html is rendered.
diff --git a/docs/going_further/server_components.mdx b/docs/going_further/server_components.mdx
new file mode 100644
index 000000000..d2db68ae5
--- /dev/null
+++ b/docs/going_further/server_components.mdx
@@ -0,0 +1,233 @@
+---
+title: "Server Components"
+description: Learn how to pass server-side components into client-side interactive boundaries to build high-performance layouts.
+---
+
+When building modern web applications, we want both rich, fluid interactivity and fast initial page loads. 
+
+Typically, once you make a parent component interactive by decorating it with `@client`, Jaspr must compile it and **all of its nested children** to JavaScript so they can run in the browser. Without Server Components, the moment a layout or parent container needs some client-side interactivity, every single child in its subtree gets pulled into the client-side JavaScript bundle—even if those children are completely static.
+
+**Server Components** solve this by enabling **surgical hydration**. They allow you to render server-side-only components inside parts of an interactive, hydrated client-side application. With this pattern, you can build interactive client-side wrappers (like expandable cards, navigation shells, sidebars, or tabs) while completely skipping compiling or shipping the static or heavy content inside them.
+
+As a result:
+- **Reduced Bundle Size:** The Dart code for server-only components is never compiled to JavaScript or shipped to the browser, significantly reducing the application's JavaScript footprint.
+- **Surgical Interactivity:** You only ship the parts of the code to the client that actually need to be interactive, skipping parts that are static.
+- **Faster Page Loading:** Less JavaScript to download, parse, and execute means much faster Time-to-Interactive (TTI) for your users.
+- **Access to Server Resources:** The server components within the client wrapper can safely fetch database records or read files using native APIs like `dart:io`.
+
+## How to use Server Component
+
+It is important to understand that **Server Components are not a separate API** in Jaspr. There is no special annotation, and you don't need to inherit from a special class.
+
+Instead, Server Components are a design paradigm enabled by Jaspr's compilation and hydration model. You achieve this simply by **passing components as parameters** (such as a `child` component, or lists/maps of components) to a component annotated with [`@client`](/api/utils/at_client).
+
+## A Simple Example: Expandable Card
+
+Let's build a client-side component called `ExpandableCard`. It features a button that lets users toggle the visibility of the card's content. To do this, the card must be interactive and annotated with `@client`. However, the content inside the card is static content that doesn't need client-side interactivity.
+
+Here is the interactive card component:
+
+```dart title="lib/components/expandable_card.dart"
+import 'package:jaspr/jaspr.dart';
+
+@client
+class ExpandableCard extends StatefulComponent {
+  const ExpandableCard({required this.title, required this.content, super.key});
+
+  final String title;
+  final Component content;
+
+  @override
+  State<ExpandableCard> createState() => _ExpandableCardState();
+}
+
+class _ExpandableCardState extends State<ExpandableCard> {
+  bool isExpanded = false;
+
+  @override
+  Component build(BuildContext context) {
+    return div(classes: 'card', [
+      div(classes: 'card-header', [
+        h3([.text(component.title)]),
+        button(
+          onClick: () => setState(() => isExpanded = !isExpanded),
+          [.text(isExpanded ? 'Collapse' : 'Expand')],
+        ),
+      ]),
+      // We toggle visibility using a CSS class (like display: none in styles).
+      // This ensures the server component is rendered during SSR,
+      // and can then be shown or hidden interactively on the client.
+      div(
+        classes: 'card-content ${isExpanded ? 'expanded' : 'collapsed'}',
+        [component.content],
+      ),
+    ]);
+  }
+}
+```
+
+Here is how you use the `ExpandableCard` component on the server, passing in a server-only component as a parameter:
+
+```dart title="lib/main.server.dart"
+import 'package:jaspr/server.dart';
+import 'components/expandable_card.dart';
+
+void main() {
+  Jaspr.initializeAll(options: defaultServerOptions);
+
+  runApp(
+    Document(
+      title: 'My Dashboard',
+      body: ExpandableCard(
+        title: 'Server Component Info',
+        content: div(classes: 'card-details', [
+          p([.text('This content is static and rendered entirely on the server.')]),
+          p([.text('It is not compiled to JavaScript or shipped to the browser.')]),
+        ]),
+      ),
+    ),
+  );
+}
+```
+
+### Where is each part rendered?
+
+Understanding where each component is built and executed is key to mastering this paradigm:
+
+- **`Document`**: The root component of the server application. It is built and rendered **only on the server**.
+- **`ExpandableCard` (@client Component)**: Built first on the server to generate the initial HTML, then **hydrated and executed on the client** to handle the expansion state and click events.
+- **`ExpandableCard.content` parameter (`div` with static content)**: Evaluated and rendered to HTML on the server. The client-side framework receives this pre-rendered HTML DOM structure and simply mounts it at the correct position inside the hydrated `ExpandableCard`. The client browser never builds the `div` component or any of its children.
+
+---
+
+## Component Scopes
+
+This rendering boundary behavior aligns directly with Jaspr's concept of **Component Scopes**. As described in [Server-Side Jaspr (Component Scopes)](/dev/server#component-scopes), your application is split into the **Server Scope** and the **Client Scope**.
+
+Usually, once a component is in the Client Scope (by being nested inside a `@client` component), its entire subtree is also in the Client Scope and compiled to JavaScript. However, passing a component as a parameter to a `@client` component breaks this inheritance. It lets you transition parts of the subtree back into the Server Scope, creating alternating boundaries:
+
+```mermaid
+graph TD
+    Root["main.server.dart<br><b>Server Scope</b>"] --> Card["ExpandableCard @client<br><b>Client Scope</b>"]
+    Card --> Content["content component (CardDetails)<br><b>Server Scope</b>"]
+    Content --> Button["InteractiveButton @client<br><b>Client Scope</b>"]
+```
+
+---
+
+## Advanced Example: Tab Bar (List of Components)
+
+You can also pass lists of components. For instance, a client-side `TabBar` that manages the active tab index, but renders the tab content panels entirely on the server.
+
+Define the tabs client component:
+
+```dart title="lib/components/tab_bar.dart"
+import 'package:jaspr/jaspr.dart';
+
+@client
+class TabBar extends StatefulComponent {
+  const TabBar({required this.children, super.key});
+
+  final List<Component> children;
+
+  @override
+  State<TabBar> createState() => _TabBarState();
+}
+
+class _TabBarState extends State<TabBar> {
+  int activeIndex = 0;
+
+  @override
+  Component build(BuildContext context) {
+    return div([
+      div(classes: 'tab-headers', [
+        button(onClick: () => setState(() => activeIndex = 0), [.text('Home')]),
+        button(onClick: () => setState(() => activeIndex = 1), [.text('Profile')]),
+        button(onClick: () => setState(() => activeIndex = 2), [.text('Settings')]),
+      ]),
+      div(classes: 'tab-content', [
+        // We render all children to ensure they are built and hydrated on the server,
+        // and toggle their visibility on the client using CSS classes.
+        for (var i = 0; i < component.children.length; i++)
+          div(
+            classes: 'tab-pane ${i == activeIndex ? 'active' : 'hidden'}',
+            [component.children[i]],
+          ),
+      ]),
+    ]);
+  }
+}
+```
+
+Used on the server:
+
+```dart title="lib/main.server.dart"
+TabBar(
+  children: [
+    HomeTabContent(),      // Renders on server
+    ProfileTabContent(),   // Renders on server
+    SettingsTabContent(),  // Renders on server
+  ],
+)
+```
+
+---
+
+## Hydration & How it Works
+
+The following happens behind the scenes to link these components:
+
+1. **Pre-Rendering**: The server renders the root component tree downwards. When it encounters a `@client` component, the `ClientComponentAdapter` takes any component parameters (such as `content`), renders them to HTML, and registers a `ServerComponentAdapter`.
+2. **Markers**: The server wraps the rendered output of the server component in HTML comment boundary markers:
+   ```html
+   <!--s@1-->
+   <div>Server-rendered Card Details</div>
+   <!--/s@1-->
+   ```
+3. **Serialization**: The parameters of the `@client` component are serialized into JSON in its start marker. The `content` parameter is encoded using the server component's ID: `data={"content":"s@1"}`.
+4. **Hydration**: The browser parses the HTML and loads the JavaScript bundle. The client-side framework locates the client markers, decodes the parameters, and reads the server component boundary comments as `ServerComponentAnchor` nodes.
+5. **Mounting**: When the client component builds and calls `params.mount('s@1')`, the framework matches the ID to the parsed anchor and returns a `SlottedChildView` pointing directly to the pre-rendered HTML DOM nodes, avoiding any client-side execution of the server component's build code.
+
+---
+
+## Nested Client Components
+
+Server components are not limited to static content. A component inside a Server Component subtree can itself be annotated with `@client`. 
+
+During hydration, Jaspr compiles and hydrates the nested client component as normal, letting you embed complex client-side interactivity inside server-rendered templates.
+
+---
+
+## Conditional Rendering during SSR
+
+Because Server Components are executed only on the server, **they must be pre-rendered during the initial Server-Side Rendering (SSR) phase**. 
+
+If a Server Component is passed to a client component but is not evaluated or rendered in the component's build method (for example, if it is placed inside an `if` block where the condition is `false` during the initial server render), it cannot be constructed later on the client:
+
+```dart
+@client
+class ConditionalCard extends StatefulComponent {
+  const ConditionalCard({required this.content, super.key});
+  final Component content;
+
+  @override
+  State<ConditionalCard> createState() => _ConditionalCardState();
+}
+
+class _ConditionalCardState extends State<ConditionalCard> {
+  bool showContent = false; // Evaluates to false on the server
+
+  @override
+  Component build(BuildContext context) {
+    return div([
+      button(onClick: () => setState(() => showContent = true), [Text('Reveal')]),
+      // WARNING: If showContent is false during SSR, 'widget.content' is not built on the server.
+      // When showContent becomes true on the client, it will render as EMPTY because 
+      // the client does not have the Dart code to construct the server component.
+      if (showContent) widget.content, 
+    ]);
+  }
+}
+```
+
+Always ensure that any Server Components passed as parameters are rendered/evaluated during the initial server-side build. If you need conditional visibility on the client, control it using CSS (e.g. `display: none`) or wrap the content in a client-side component instead.
diff --git a/examples/backend_dart_frog/lib/main.client.options.dart b/examples/backend_dart_frog/lib/main.client.options.dart
index 28e4bc67e..de5839c47 100644
--- a/examples/backend_dart_frog/lib/main.client.options.dart
+++ b/examples/backend_dart_frog/lib/main.client.options.dart
@@ -32,7 +32,7 @@ ClientOptions get defaultClientOptions => ClientOptions(
       loader: _counter.loadLibrary,
     ),
     'hello': ClientLoader(
-      (p) => _hello.Hello(name: p['name'] as String),
+      (p) => _hello.Hello(name: p.get<String>('name')),
       loader: _hello.loadLibrary,
     ),
   },
diff --git a/experiments/server-components/.gitignore b/experiments/server-components/.gitignore
new file mode 100644
index 000000000..3c8a15727
--- /dev/null
+++ b/experiments/server-components/.gitignore
@@ -0,0 +1,6 @@
+# Files and directories created by pub.
+.dart_tool/
+.packages
+
+# Conventional directory for build output.
+build/
diff --git a/experiments/server-components/README.md b/experiments/server-components/README.md
new file mode 100644
index 000000000..1ccfe63f5
--- /dev/null
+++ b/experiments/server-components/README.md
@@ -0,0 +1,3 @@
+# server_components
+
+A basic pure-dart web app with ssr & automatic client hydration.
diff --git a/experiments/server-components/analysis_options.yaml b/experiments/server-components/analysis_options.yaml
new file mode 100644
index 000000000..572dd239d
--- /dev/null
+++ b/experiments/server-components/analysis_options.yaml
@@ -0,0 +1 @@
+include: package:lints/recommended.yaml
diff --git a/experiments/server-components/lib/counter.dart b/experiments/server-components/lib/counter.dart
new file mode 100644
index 000000000..abee2caca
--- /dev/null
+++ b/experiments/server-components/lib/counter.dart
@@ -0,0 +1,45 @@
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+
+@client
+class Counter extends StatefulComponent {
+  const Counter({this.step = 1, this.child, super.key});
+
+  final int step;
+  final Component? child;
+
+  @override
+  State<StatefulComponent> createState() => CounterState();
+}
+
+class CounterState extends State<Counter>
+    with SyncStateMixin<Counter, Map<String, dynamic>> {
+  int count = 0;
+
+  @override
+  Map<String, dynamic> getState() {
+    return {'stepDouble': component.step * 2};
+  }
+
+  @override
+  void updateState(Map<String, dynamic> value) {
+    print("GOT SYNC: $value");
+  }
+
+  @override
+  Component build(BuildContext context) {
+    print("Building Counter with count=$count and step=${component.step}");
+    return div(classes: 'client', [
+      .text('$count '),
+      button(
+        onClick: () {
+          setState(() {
+            count += component.step;
+          });
+        },
+        [.text("Increase by ${component.step}")],
+      ),
+      if (component.child != null) component.child!,
+    ]);
+  }
+}
diff --git a/experiments/server-components/lib/main.client.dart b/experiments/server-components/lib/main.client.dart
new file mode 100644
index 000000000..5d108107d
--- /dev/null
+++ b/experiments/server-components/lib/main.client.dart
@@ -0,0 +1,26 @@
+// The entrypoint for the **client** environment.
+//
+// The [main] method will only be executed on the client after loading the page.
+
+// Client-specific Jaspr import.
+import 'package:jaspr/client.dart';
+
+// This file is generated automatically by Jaspr, do not remove or edit.
+import 'main.client.options.dart';
+
+void main() {
+  // Initializes the client environment with the generated default options.
+  Jaspr.initializeApp(
+    options: defaultClientOptions,
+  );
+
+  // Starts the app.
+  //
+  // [ClientApp] automatically loads and renders all components annotated with @client.
+  //
+  // You can wrap this with additional [InheritedComponent]s to share state across multiple 
+  // @client components if needed.
+  runApp(
+    const ClientApp(),
+  );
+}
diff --git a/experiments/server-components/lib/main.client.options.dart b/experiments/server-components/lib/main.client.options.dart
new file mode 100644
index 000000000..050bbff8a
--- /dev/null
+++ b/experiments/server-components/lib/main.client.options.dart
@@ -0,0 +1,42 @@
+// dart format off
+// ignore_for_file: type=lint
+
+// GENERATED FILE, DO NOT MODIFY
+// Generated with jaspr_builder
+
+import 'package:jaspr/client.dart';
+
+import 'package:server_components/counter.dart' deferred as _counter;
+import 'package:server_components/minicounter.dart' deferred as _minicounter;
+
+/// Default [ClientOptions] for use with your Jaspr project.
+///
+/// Use this to initialize Jaspr **before** calling [runApp].
+///
+/// Example:
+/// ```dart
+/// import 'main.client.options.dart';
+///
+/// void main() {
+///   Jaspr.initializeApp(
+///     options: defaultClientOptions,
+///   );
+///
+///   runApp(...);
+/// }
+/// ```
+ClientOptions get defaultClientOptions => ClientOptions(
+  clients: {
+    'counter': ClientLoader(
+      (p) => _counter.Counter(
+        step: p.get<int>('step'),
+        child: p.mountOrNull(p.get<String?>('child')),
+      ),
+      loader: _counter.loadLibrary,
+    ),
+    'minicounter': ClientLoader(
+      (p) => _minicounter.MiniCounter(),
+      loader: _minicounter.loadLibrary,
+    ),
+  },
+);
diff --git a/experiments/server-components/lib/main.server.dart b/experiments/server-components/lib/main.server.dart
new file mode 100644
index 000000000..170f0e14d
--- /dev/null
+++ b/experiments/server-components/lib/main.server.dart
@@ -0,0 +1,38 @@
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/server.dart';
+import 'main.server.options.dart';
+
+import 'counter.dart';
+import 'minicounter.dart';
+
+void main() {
+  Jaspr.initializeApp(options: defaultServerOptions);
+
+  runApp(
+    Document(
+      title: 'server_components',
+      body: Builder(
+        builder: (context) {
+          var time = DateTime.now();
+          return div(classes: 'server', [
+            p([.text('Server Time: $time')]),
+            Counter(step: time.second, child: null),
+            MiniCounter(),
+          ]);
+        },
+      ),
+    ),
+  );
+}
+
+@css
+List<StyleRule> get styles => [
+  css('.server').styles(
+    padding: Padding.all(2.px),
+    border: Border.all(color: Colors.red),
+  ),
+  css('.client').styles(
+    padding: Padding.all(2.px),
+    border: Border.all(color: Colors.green),
+  ),
+];
diff --git a/experiments/server-components/lib/main.server.options.dart b/experiments/server-components/lib/main.server.options.dart
new file mode 100644
index 000000000..45c1a02e9
--- /dev/null
+++ b/experiments/server-components/lib/main.server.options.dart
@@ -0,0 +1,45 @@
+// dart format off
+// ignore_for_file: type=lint
+
+// GENERATED FILE, DO NOT MODIFY
+// Generated with jaspr_builder
+
+import 'package:jaspr/server.dart';
+import 'package:server_components/counter.dart' as _counter;
+import 'package:server_components/main.server.dart' as _main$server;
+import 'package:server_components/minicounter.dart' as _minicounter;
+
+/// Default [ServerOptions] for use with your Jaspr project.
+///
+/// Use this to initialize Jaspr **before** calling [runApp].
+///
+/// Example:
+/// ```dart
+/// import 'main.server.options.dart';
+///
+/// void main() {
+///   Jaspr.initializeApp(
+///     options: defaultServerOptions,
+///   );
+///
+///   runApp(...);
+/// }
+/// ```
+ServerOptions get defaultServerOptions => ServerOptions(
+  clientId: 'main.client.dart.js',
+  clients: {
+    _counter.Counter: ClientTarget<_counter.Counter>(
+      'counter',
+      params: __counterCounter,
+    ),
+    _minicounter.MiniCounter: ClientTarget<_minicounter.MiniCounter>(
+      'minicounter',
+    ),
+  },
+  styles: () => [..._main$server.styles],
+);
+
+Map<String, Object?> __counterCounter(_counter.Counter c) => {
+  'step': c.step,
+  'child': c.child,
+};
diff --git a/experiments/server-components/lib/minicounter.dart b/experiments/server-components/lib/minicounter.dart
new file mode 100644
index 000000000..f80bec215
--- /dev/null
+++ b/experiments/server-components/lib/minicounter.dart
@@ -0,0 +1,29 @@
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+
+@client
+class MiniCounter extends StatefulComponent {
+  const MiniCounter({super.key});
+
+  @override
+  State<StatefulComponent> createState() => MiniCounterState();
+}
+
+class MiniCounterState extends State<MiniCounter> {
+  int count = 0;
+
+  @override
+  Component build(BuildContext context) {
+    return span(classes: 'client', [
+      button(
+        
+        onClick: () {
+          setState(() {
+            count++;
+          });
+        },
+        [.text("Count: $count")],
+      ),
+    ]);
+  }
+}
diff --git a/experiments/server-components/pubspec.lock b/experiments/server-components/pubspec.lock
new file mode 100644
index 000000000..147f426ee
--- /dev/null
+++ b/experiments/server-components/pubspec.lock
@@ -0,0 +1,691 @@
+# Generated by pub
+# See https://dart.dev/tools/pub/glossary#lockfile
+packages:
+  _fe_analyzer_shared:
+    dependency: transitive
+    description:
+      name: _fe_analyzer_shared
+      sha256: "5b7468c326d2f8a4f630056404ca0d291ade42918f4a3c6233618e724f39da8e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "92.0.0"
+  analyzer:
+    dependency: transitive
+    description:
+      name: analyzer
+      sha256: "70e4b1ef8003c64793a9e268a551a82869a8a96f39deb73dea28084b0e8bf75e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "9.0.0"
+  archive:
+    dependency: transitive
+    description:
+      name: archive
+      sha256: "2fde1607386ab523f7a36bb3e7edb43bd58e6edaf2ffb29d8a6d578b297fdbbd"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.0.7"
+  args:
+    dependency: transitive
+    description:
+      name: args
+      sha256: d0481093c50b1da8910eb0bb301626d4d8eb7284aa739614d2b394ee09e3ea04
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.7.0"
+  async:
+    dependency: transitive
+    description:
+      name: async
+      sha256: "758e6d74e971c3e5aceb4110bfd6698efc7f501675bcfe0c775459a8140750eb"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.13.0"
+  bazel_worker:
+    dependency: transitive
+    description:
+      name: bazel_worker
+      sha256: "87cae9150fcf9942b8057e5f51c4848a3efde1289e97411e1c8f01e350120999"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.5"
+  boolean_selector:
+    dependency: transitive
+    description:
+      name: boolean_selector
+      sha256: "8aab1771e1243a5063b8b0ff68042d67334e3feab9e95b9490f9a6ebf73b42ea"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.2"
+  build:
+    dependency: transitive
+    description:
+      name: build
+      sha256: c1668065e9ba04752570ad7e038288559d1e2ca5c6d0131c0f5f55e39e777413
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.0.3"
+  build_config:
+    dependency: transitive
+    description:
+      name: build_config
+      sha256: "4f64382b97504dc2fcdf487d5aae33418e08b4703fc21249e4db6d804a4d0187"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.0"
+  build_daemon:
+    dependency: transitive
+    description:
+      name: build_daemon
+      sha256: bf05f6e12cfea92d3c09308d7bcdab1906cd8a179b023269eed00c071004b957
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.1.1"
+  build_modules:
+    dependency: transitive
+    description:
+      name: build_modules
+      sha256: "8a605a996691e79c5d81d9051e849680917157e27bd655b9cd2c5bb8019a432e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.1.5"
+  build_runner:
+    dependency: "direct dev"
+    description:
+      name: build_runner
+      sha256: "110c56ef29b5eb367b4d17fc79375fa8c18a6cd7acd92c05bb3986c17a079057"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.10.4"
+  build_web_compilers:
+    dependency: "direct dev"
+    description:
+      name: build_web_compilers
+      sha256: "37b1e61ae004124bfbb49079f73ee548d216acc901a58e65b0ffe02baa21cb96"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.4.6"
+  built_collection:
+    dependency: transitive
+    description:
+      name: built_collection
+      sha256: "376e3dd27b51ea877c28d525560790aee2e6fbb5f20e2f85d5081027d94e2100"
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.1.1"
+  built_value:
+    dependency: transitive
+    description:
+      name: built_value
+      sha256: "426cf75afdb23aa74bd4e471704de3f9393f3c7b04c1e2d9c6f1073ae0b8b139"
+      url: "https://pub.dev"
+    source: hosted
+    version: "8.12.1"
+  checked_yaml:
+    dependency: transitive
+    description:
+      name: checked_yaml
+      sha256: "959525d3162f249993882720d52b7e0c833978df229be20702b33d48d91de70f"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.4"
+  cli_config:
+    dependency: transitive
+    description:
+      name: cli_config
+      sha256: ac20a183a07002b700f0c25e61b7ee46b23c309d76ab7b7640a028f18e4d99ec
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.2.0"
+  clock:
+    dependency: transitive
+    description:
+      name: clock
+      sha256: fddb70d9b5277016c77a80201021d40a2247104d9f4aa7bab7157b7e3f05b84b
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.2"
+  code_builder:
+    dependency: transitive
+    description:
+      name: code_builder
+      sha256: "6a6cab2ba4680d6423f34a9b972a4c9a94ebe1b62ecec4e1a1f2cba91fd1319d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.11.1"
+  collection:
+    dependency: transitive
+    description:
+      name: collection
+      sha256: "2f5709ae4d3d59dd8f7cd309b4e023046b57d8a6c82130785d2b0e5868084e76"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.19.1"
+  convert:
+    dependency: transitive
+    description:
+      name: convert
+      sha256: b30acd5944035672bc15c6b7a8b47d773e41e2f17de064350988c5d02adb1c68
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.2"
+  coverage:
+    dependency: transitive
+    description:
+      name: coverage
+      sha256: "5da775aa218eaf2151c721b16c01c7676fbfdd99cebba2bf64e8b807a28ff94d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.15.0"
+  crypto:
+    dependency: transitive
+    description:
+      name: crypto
+      sha256: c8ea0233063ba03258fbcf2ca4d6dadfefe14f02fab57702265467a19f27fadf
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.7"
+  csslib:
+    dependency: transitive
+    description:
+      name: csslib
+      sha256: "09bad715f418841f976c77db72d5398dc1253c21fb9c0c7f0b0b985860b2d58e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.2"
+  dart_style:
+    dependency: transitive
+    description:
+      name: dart_style
+      sha256: a9c30492da18ff84efe2422ba2d319a89942d93e58eb0b73d32abe822ef54b7b
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.3"
+  ffi:
+    dependency: transitive
+    description:
+      name: ffi
+      sha256: "289279317b4b16eb2bb7e271abccd4bf84ec9bdcbe999e278a94b804f5630418"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.4"
+  file:
+    dependency: transitive
+    description:
+      name: file
+      sha256: a3b4f84adafef897088c160faf7dfffb7696046cb13ae90b508c2cbc95d3b8d4
+      url: "https://pub.dev"
+    source: hosted
+    version: "7.0.1"
+  fixnum:
+    dependency: transitive
+    description:
+      name: fixnum
+      sha256: b6dc7065e46c974bc7c5f143080a6764ec7a4be6da1285ececdc37be96de53be
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.1"
+  frontend_server_client:
+    dependency: transitive
+    description:
+      name: frontend_server_client
+      sha256: f64a0333a82f30b0cca061bc3d143813a486dc086b574bfb233b7c1372427694
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.0.0"
+  glob:
+    dependency: transitive
+    description:
+      name: glob
+      sha256: c3f1ee72c96f8f78935e18aa8cecced9ab132419e8625dc187e1c2408efc20de
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.3"
+  graphs:
+    dependency: transitive
+    description:
+      name: graphs
+      sha256: "741bbf84165310a68ff28fe9e727332eef1407342fca52759cb21ad8177bb8d0"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.3.2"
+  hotreloader:
+    dependency: transitive
+    description:
+      name: hotreloader
+      sha256: bc167a1163807b03bada490bfe2df25b0d744df359227880220a5cbd04e5734b
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.3.0"
+  html:
+    dependency: transitive
+    description:
+      name: html
+      sha256: "6d1264f2dffa1b1101c25a91dff0dc2daee4c18e87cd8538729773c073dbf602"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.15.6"
+  http:
+    dependency: transitive
+    description:
+      name: http
+      sha256: "87721a4a50b19c7f1d49001e51409bddc46303966ce89a65af4f4e6004896412"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.6.0"
+  http_multi_server:
+    dependency: transitive
+    description:
+      name: http_multi_server
+      sha256: aa6199f908078bb1c5efb8d8638d4ae191aac11b311132c3ef48ce352fb52ef8
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.2.2"
+  http_parser:
+    dependency: transitive
+    description:
+      name: http_parser
+      sha256: "178d74305e7866013777bab2c3d8726205dc5a4dd935297175b19a23a2e66571"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.1.2"
+  io:
+    dependency: transitive
+    description:
+      name: io
+      sha256: dfd5a80599cf0165756e3181807ed3e77daf6dd4137caaad72d0b7931597650b
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.5"
+  jaspr:
+    dependency: "direct main"
+    description:
+      path: "../../packages/jaspr"
+      relative: true
+    source: path
+    version: "0.22.1"
+  jaspr_builder:
+    dependency: "direct dev"
+    description:
+      path: "../../packages/jaspr_builder"
+      relative: true
+    source: path
+    version: "0.22.1"
+  jaspr_riverpod:
+    dependency: "direct main"
+    description:
+      name: jaspr_riverpod
+      sha256: "1ae9044bcc7a38a7353d94b97eac65f566e8f8305bd1f9859ef3f969d8206a86"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.4.3"
+  json_annotation:
+    dependency: transitive
+    description:
+      name: json_annotation
+      sha256: "1ce844379ca14835a50d2f019a3099f419082cfdd231cd86a142af94dd5c6bb1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.9.0"
+  lints:
+    dependency: "direct dev"
+    description:
+      name: lints
+      sha256: c35bb79562d980e9a453fc715854e1ed39e24e7d0297a880ef54e17f9874a9d7
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.1.1"
+  logging:
+    dependency: transitive
+    description:
+      name: logging
+      sha256: c8245ada5f1717ed44271ed1c26b8ce85ca3228fd2ffdb75468ab01979309d61
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.0"
+  matcher:
+    dependency: transitive
+    description:
+      name: matcher
+      sha256: "12956d0ad8390bbcc63ca2e1469c0619946ccb52809807067a7020d57e647aa6"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.12.18"
+  meta:
+    dependency: transitive
+    description:
+      name: meta
+      sha256: "23f08335362185a5ea2ad3a4e597f1375e78bce8a040df5c600c8d3552ef2394"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.17.0"
+  mime:
+    dependency: transitive
+    description:
+      name: mime
+      sha256: "41a20518f0cb1256669420fdba0cd90d21561e560ac240f26ef8322e45bb7ed6"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.0"
+  node_preamble:
+    dependency: transitive
+    description:
+      name: node_preamble
+      sha256: "6e7eac89047ab8a8d26cf16127b5ed26de65209847630400f9aefd7cd5c730db"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.2"
+  package_config:
+    dependency: transitive
+    description:
+      name: package_config
+      sha256: f096c55ebb7deb7e384101542bfba8c52696c1b56fca2eb62827989ef2353bbc
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.0"
+  path:
+    dependency: transitive
+    description:
+      name: path
+      sha256: "75cca69d1490965be98c73ceaea117e8a04dd21217b37b292c9ddbec0d955bc5"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.9.1"
+  pool:
+    dependency: transitive
+    description:
+      name: pool
+      sha256: "978783255c543aa3586a1b3c21f6e9d720eb315376a915872c61ef8b5c20177d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.5.2"
+  posix:
+    dependency: transitive
+    description:
+      name: posix
+      sha256: "6323a5b0fa688b6a010df4905a56b00181479e6d10534cecfecede2aa55add61"
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.0.3"
+  protobuf:
+    dependency: transitive
+    description:
+      name: protobuf
+      sha256: "75ec242d22e950bdcc79ee38dd520ce4ee0bc491d7fadc4ea47694604d22bf06"
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.0.0"
+  pub_semver:
+    dependency: transitive
+    description:
+      name: pub_semver
+      sha256: "5bfcf68ca79ef689f8990d1160781b4bad40a3bd5e5218ad4076ddb7f4081585"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.0"
+  pubspec_parse:
+    dependency: transitive
+    description:
+      name: pubspec_parse
+      sha256: "0560ba233314abbed0a48a2956f7f022cce7c3e1e73df540277da7544cad4082"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.5.0"
+  riverpod:
+    dependency: transitive
+    description:
+      name: riverpod
+      sha256: "16ff608d21e8ea64364f2b7c049c94a02ab81668f78845862b6e88b71dd4935a"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.0"
+  scratch_space:
+    dependency: transitive
+    description:
+      name: scratch_space
+      sha256: "3417e014d20b12cebc5bfb1c0b1f63806054177158596cc31cc4d9aaca767a60"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.0"
+  shelf:
+    dependency: transitive
+    description:
+      name: shelf
+      sha256: e7dd780a7ffb623c57850b33f43309312fc863fb6aa3d276a754bb299839ef12
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.4.2"
+  shelf_gzip:
+    dependency: transitive
+    description:
+      name: shelf_gzip
+      sha256: "4f4b793c0f969f348aece1ab4cc05fceba9fea431c1ce76b1bc0fa369cecfc15"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.1.0"
+  shelf_packages_handler:
+    dependency: transitive
+    description:
+      name: shelf_packages_handler
+      sha256: "89f967eca29607c933ba9571d838be31d67f53f6e4ee15147d5dc2934fee1b1e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.2"
+  shelf_proxy:
+    dependency: transitive
+    description:
+      name: shelf_proxy
+      sha256: a71d2307f4393211930c590c3d2c00630f6c5a7a77edc1ef6436dfd85a6a7ee3
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.4"
+  shelf_static:
+    dependency: transitive
+    description:
+      name: shelf_static
+      sha256: c87c3875f91262785dade62d135760c2c69cb217ac759485334c5857ad89f6e3
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.3"
+  shelf_web_socket:
+    dependency: transitive
+    description:
+      name: shelf_web_socket
+      sha256: "3632775c8e90d6c9712f883e633716432a27758216dfb61bd86a8321c0580925"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.0"
+  source_gen:
+    dependency: transitive
+    description:
+      name: source_gen
+      sha256: "07b277b67e0096c45196cbddddf2d8c6ffc49342e88bf31d460ce04605ddac75"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.1.1"
+  source_map_stack_trace:
+    dependency: transitive
+    description:
+      name: source_map_stack_trace
+      sha256: c0713a43e323c3302c2abe2a1cc89aa057a387101ebd280371d6a6c9fa68516b
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.2"
+  source_maps:
+    dependency: transitive
+    description:
+      name: source_maps
+      sha256: "190222579a448b03896e0ca6eca5998fa810fda630c1d65e2f78b3f638f54812"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.10.13"
+  source_span:
+    dependency: transitive
+    description:
+      name: source_span
+      sha256: "254ee5351d6cb365c859e20ee823c3bb479bf4a293c22d17a9f1bf144ce86f7c"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.10.1"
+  sse:
+    dependency: transitive
+    description:
+      name: sse
+      sha256: fcc97470240bb37377f298e2bd816f09fd7216c07928641c0560719f50603643
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.1.8"
+  stack_trace:
+    dependency: transitive
+    description:
+      name: stack_trace
+      sha256: "8b27215b45d22309b5cddda1aa2b19bdfec9df0e765f2de506401c071d38d1b1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.12.1"
+  state_notifier:
+    dependency: transitive
+    description:
+      name: state_notifier
+      sha256: b8677376aa54f2d7c58280d5a007f9e8774f1968d1fb1c096adcb4792fba29bb
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.0"
+  stream_channel:
+    dependency: transitive
+    description:
+      name: stream_channel
+      sha256: "969e04c80b8bcdf826f8f16579c7b14d780458bd97f56d107d3950fdbeef059d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.4"
+  stream_transform:
+    dependency: transitive
+    description:
+      name: stream_transform
+      sha256: ad47125e588cfd37a9a7f86c7d6356dde8dfe89d071d293f80ca9e9273a33871
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.1"
+  string_scanner:
+    dependency: transitive
+    description:
+      name: string_scanner
+      sha256: "921cd31725b72fe181906c6a94d987c78e3b98c2e205b397ea399d4054872b43"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.4.1"
+  term_glyph:
+    dependency: transitive
+    description:
+      name: term_glyph
+      sha256: "7f554798625ea768a7518313e58f83891c7f5024f88e46e7182a4558850a4b8e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.2"
+  test:
+    dependency: transitive
+    description:
+      name: test
+      sha256: "77cc98ea27006c84e71a7356cf3daf9ddbde2d91d84f77dbfe64cf0e4d9611ae"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.28.0"
+  test_api:
+    dependency: transitive
+    description:
+      name: test_api
+      sha256: "19a78f63e83d3a61f00826d09bc2f60e191bf3504183c001262be6ac75589fb8"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.7.8"
+  test_core:
+    dependency: transitive
+    description:
+      name: test_core
+      sha256: f1072617a6657e5fc09662e721307f7fb009b4ed89b19f47175d11d5254a62d4
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.6.14"
+  typed_data:
+    dependency: transitive
+    description:
+      name: typed_data
+      sha256: f9049c039ebfeb4cf7a7104a675823cd72dba8297f264b6637062516699fa006
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.4.0"
+  universal_web:
+    dependency: transitive
+    description:
+      name: universal_web
+      sha256: "618a9d8659e9429875f69d4da0fb9c0c143d3d4cdab28b4545502088aa50ed62"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.1+1"
+  uuid:
+    dependency: transitive
+    description:
+      name: uuid
+      sha256: a11b666489b1954e01d992f3d601b1804a33937b5a8fe677bd26b8a9f96f96e8
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.5.2"
+  vm_service:
+    dependency: transitive
+    description:
+      name: vm_service
+      sha256: "45caa6c5917fa127b5dbcfbd1fa60b14e583afdc08bfc96dda38886ca252eb60"
+      url: "https://pub.dev"
+    source: hosted
+    version: "15.0.2"
+  watcher:
+    dependency: transitive
+    description:
+      name: watcher
+      sha256: f52385d4f73589977c80797e60fe51014f7f2b957b5e9a62c3f6ada439889249
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.0"
+  web:
+    dependency: transitive
+    description:
+      name: web
+      sha256: "868d88a33d8a87b18ffc05f9f030ba328ffefba92d6c127917a2ba740f9cfe4a"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.1"
+  web_socket:
+    dependency: transitive
+    description:
+      name: web_socket
+      sha256: "34d64019aa8e36bf9842ac014bb5d2f5586ca73df5e4d9bf5c936975cae6982c"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.1"
+  web_socket_channel:
+    dependency: transitive
+    description:
+      name: web_socket_channel
+      sha256: d645757fb0f4773d602444000a8131ff5d48c9e47adfe9772652dd1a4f2d45c8
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.3"
+  webkit_inspection_protocol:
+    dependency: transitive
+    description:
+      name: webkit_inspection_protocol
+      sha256: "87d3f2333bb240704cd3f1c6b5b7acd8a10e7f0bc28c28dcf14e782014f4a572"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.1"
+  yaml:
+    dependency: transitive
+    description:
+      name: yaml
+      sha256: b9da305ac7c39faa3f030eccd175340f968459dae4af175130b3fc47e40d76ce
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.3"
+sdks:
+  dart: ">=3.10.0 <3.12.0-z"
diff --git a/experiments/server-components/pubspec.yaml b/experiments/server-components/pubspec.yaml
new file mode 100644
index 000000000..e8fc7ef57
--- /dev/null
+++ b/experiments/server-components/pubspec.yaml
@@ -0,0 +1,25 @@
+name: server_components
+description: A basic pure-dart web app with ssr & automatic client hydration.
+version: 0.0.1
+
+environment:
+  sdk: ">=3.10.0 <4.0.0"
+
+dependencies:
+  jaspr: ^0.22.0
+  jaspr_riverpod: ^0.4.0
+
+dev_dependencies:
+  build_runner: ^2.10.4
+  build_web_compilers: ^4.4.6
+  jaspr_builder: ^0.22.0
+  lints: ^5.0.0
+
+jaspr:
+  mode: server
+
+dependency_overrides:
+  jaspr:
+    path: ../../packages/jaspr
+  jaspr_builder:
+    path: ../../packages/jaspr_builder
diff --git a/packages/jaspr/CHANGELOG.md b/packages/jaspr/CHANGELOG.md
index 429527e2b..5c7afc287 100644
--- a/packages/jaspr/CHANGELOG.md
+++ b/packages/jaspr/CHANGELOG.md
@@ -1,3 +1,10 @@
+## Unreleased breaking
+
+- Added **Server Components** to allow for more fine-grained control over the server-side rendered component trees.
+- **Breaking**: Renamed `Component.wrapElement()` to `Component.apply()` and added `ApplyTarget target` parameter used to target specific elements instead of only direct children.
+- **Breaking**: Removed support for `attachBetween` parameter in `ClientAppBinding.attachRootComponent()`, as it is no longer needed.
+- Added stateful server-side reload feature.
+
 ## 0.23.1
 
 - Fixed expression compilation when debugging a client-side application with an AOT installed CLI.
diff --git a/packages/jaspr/lib/client.dart b/packages/jaspr/lib/client.dart
index a1e53d37e..31ae4eca1 100644
--- a/packages/jaspr/lib/client.dart
+++ b/packages/jaspr/lib/client.dart
@@ -8,3 +8,4 @@ export 'src/client/client_binding.dart';
 export 'src/client/dom_render_object.dart';
 export 'src/client/options.dart';
 export 'src/client/run_app.dart';
+export 'src/client/slotted_child_view.dart';
diff --git a/packages/jaspr/lib/jaspr.dart b/packages/jaspr/lib/jaspr.dart
index 1c488bd7c..9a2e0542a 100644
--- a/packages/jaspr/lib/jaspr.dart
+++ b/packages/jaspr/lib/jaspr.dart
@@ -18,7 +18,7 @@ export 'src/foundation/object.dart';
 export 'src/foundation/scheduler.dart';
 export 'src/foundation/sync.dart';
 export 'src/foundation/synchronous_future.dart';
-export 'src/framework/framework.dart';
+export 'src/framework/framework.dart' hide GlobalComponentsBinding, DomRenderObjectElement, ApplyParams;
 export 'src/stub/app_context_stub.dart'
     if (dart.library.js_interop) 'src/client/app_context.dart'
     if (dart.library.io) 'src/server/app_context.dart'
diff --git a/packages/jaspr/lib/src/client/app_context.dart b/packages/jaspr/lib/src/client/app_context.dart
index 61f261bf2..1024c8fba 100644
--- a/packages/jaspr/lib/src/client/app_context.dart
+++ b/packages/jaspr/lib/src/client/app_context.dart
@@ -1,4 +1,4 @@
-import '../framework/framework.dart';
+import '../../client.dart';
 
 extension AppContext on BuildContext {
   /// The currently visited url.
diff --git a/packages/jaspr/lib/src/client/client_app.dart b/packages/jaspr/lib/src/client/client_app.dart
index edabf43a3..ef92abead 100644
--- a/packages/jaspr/lib/src/client/client_app.dart
+++ b/packages/jaspr/lib/src/client/client_app.dart
@@ -30,34 +30,37 @@ final class ClientApp extends Component {
 class _ClientAppElement extends BuildableElement {
   _ClientAppElement(ClientApp super.component);
 
-  final List<ClientComponentAnchor> anchors = [];
   final List<ChildSlot> slots = [];
 
   bool mounted = true;
 
-  FutureOr<ClientBuilder> getClientByName(String name) {
-    final clients = Jaspr.options.clients;
-    assert(clients.containsKey(name), "No client component registered with name '$name'.");
-    return clients[name]!.loadedBuilder;
+  @override
+  void didMount() {
+    loadSlots();
+    super.didMount();
   }
 
   @override
-  void didMount() {
+  void onReload() {
+    slots.clear();
+    loadSlots();
+    super.onReload();
+  }
+
+  void loadSlots() {
     final parent = parentRenderObjectElement!.renderObject;
     final nodes = parent is HydratableDomRenderObject ? parent.toHydrate : <web.Node>[];
-    final anchors = extractClientAnchors(getClientByName, nodes: nodes);
+    final anchors = extractAnchors(nodes: nodes);
 
     for (final anchor in anchors) {
       if (anchor.builder is ClientBuilder) {
-        this.anchors.add(anchor);
-        slots.add(createSlotForAnchor(anchor));
+        slots.add(anchor.createSlot());
       } else {
         anchor
             .resolve()
             .then((b) {
               if (mounted) {
-                this.anchors.add(anchor);
-                slots.add(createSlotForAnchor(anchor));
+                slots.add(anchor.createSlot());
                 markNeedsBuild();
               }
             })
@@ -66,15 +69,6 @@ class _ClientAppElement extends BuildableElement {
             });
       }
     }
-    super.didMount();
-  }
-
-  ChildSlot createSlotForAnchor(ClientComponentAnchor anchor) {
-    return _AnchorChildSlot(
-      start: anchor.startNode,
-      end: anchor.endNode,
-      child: anchor.build(),
-    );
   }
 
   @override
@@ -88,22 +82,3 @@ class _ClientAppElement extends BuildableElement {
     super.unmount();
   }
 }
-
-class _AnchorChildSlot extends ChildSlot {
-  _AnchorChildSlot({required this.start, required this.end, required this.child});
-
-  final web.Node start;
-  final web.Node end;
-  @override
-  final Component child;
-
-  @override
-  ChildSlotRenderObject createRenderObject(SlottedDomRenderObject parent) {
-    return ChildSlotRenderObject.between(parent, start, end);
-  }
-
-  @override
-  bool canUpdate(ChildSlot oldComponent) {
-    return oldComponent is _AnchorChildSlot && oldComponent.start == start && oldComponent.end == end;
-  }
-}
diff --git a/packages/jaspr/lib/src/client/client_binding.dart b/packages/jaspr/lib/src/client/client_binding.dart
index 4044abbb9..6bd31fc50 100644
--- a/packages/jaspr/lib/src/client/client_binding.dart
+++ b/packages/jaspr/lib/src/client/client_binding.dart
@@ -1,15 +1,25 @@
 import 'dart:async';
+import 'dart:convert';
 
+import 'package:http/http.dart' as http;
+import 'package:sse/client/sse_client.dart';
 import 'package:universal_web/js_interop.dart';
 import 'package:universal_web/web.dart' as web;
 
 import '../foundation/basic_types.dart';
 import '../foundation/binding.dart';
+import '../foundation/constants.dart';
 import '../framework/framework.dart';
 import 'dom_render_object.dart';
 
 /// Global component binding for the client.
 class ClientAppBinding extends AppBinding with ComponentsBinding {
+  ClientAppBinding() {
+    if (kDebugMode) {
+      _debugInitializeEvents();
+    }
+  }
+
   @override
   bool get isClient => true;
 
@@ -31,22 +41,16 @@ class ClientAppBinding extends AppBinding with ComponentsBinding {
   }
 
   late String _attachTarget;
-  (web.Node, web.Node)? _attachBetween;
 
   @override
-  void attachRootComponent(Component app, {String attachTo = 'body', (web.Node, web.Node)? attachBetween}) {
+  void attachRootComponent(Component app, {String attachTo = 'body'}) {
     _attachTarget = attachTo;
-    _attachBetween = attachBetween;
     super.attachRootComponent(app);
   }
 
   @override
   RenderObject createRootRenderObject() {
-    if (_attachBetween case (final start, final end)) {
-      return RootDomRenderObject.between(start, end);
-    } else {
-      return RootDomRenderObject(web.document.querySelector(_attachTarget)!);
-    }
+    return RootDomRenderObject(web.document.querySelector(_attachTarget)!);
   }
 
   @override
@@ -66,4 +70,60 @@ class ClientAppBinding extends AppBinding with ComponentsBinding {
   void reportBuildError(Element element, Object error, StackTrace stackTrace) {
     web.console.error('Error while building ${element.component.runtimeType}:\n$error\n\n$stackTrace'.toJS);
   }
+
+  SseClient? _debugEventsClient;
+
+  void _debugInitializeEvents() {
+    if (_debugEventsClient != null) return;
+
+    _debugEventsClient = SseClient(r'/$jasprEventsHandler');
+    _debugEventsClient!.stream.listen(
+      (event) {
+        final data = jsonDecode(event);
+        if (data case ['ReloadRequest']) {
+          _reloadPage();
+        }
+      },
+      onDone: () {
+        _debugEventsClient!.close();
+        _debugEventsClient = null;
+      },
+    );
+    _debugEventsClient!.sink.add(jsonEncode(['RouteInfo', web.window.location.pathname]));
+  }
+
+  void _reloadPage([String? path]) async {
+    final response = await http.get(
+      Uri.parse(web.window.location.href).replace(path: path),
+      headers: {'X-Jaspr-Reload': 'true'},
+    );
+    if (response.statusCode != 200) {
+      web.console.error('[Jaspr] Failed to reload page: ${response.statusCode} ${response.reasonPhrase}'.toJS);
+      return;
+    }
+
+    final doc = web.Document.parseHTMLUnsafe(response.body.toJS);
+    final body = doc.body;
+
+    if (body == null) {
+      web.console.error('[Jaspr] Failed to reload page: No body found'.toJS);
+      return;
+    }
+
+    final sw = Stopwatch()..start();
+
+    final newNode = _attachTarget == 'body' ? body : body.querySelector(_attachTarget)!;
+
+    final rootRenderObject = rootElement!.renderObject as RootDomRenderObject;
+    rootRenderObject.setRootNode(newNode);
+    rootElement!.owner.performReload(rootElement!);
+
+    web.document.body!.replaceWith(body);
+
+    sw.stop();
+
+    if (kVerboseMode) {
+      print('Page reloaded in ${sw.elapsedMilliseconds}ms');
+    }
+  }
 }
diff --git a/packages/jaspr/lib/src/client/component_anchors.dart b/packages/jaspr/lib/src/client/component_anchors.dart
index fc353f985..63cd5640e 100644
--- a/packages/jaspr/lib/src/client/component_anchors.dart
+++ b/packages/jaspr/lib/src/client/component_anchors.dart
@@ -3,50 +3,154 @@ import 'dart:convert';
 
 import 'package:universal_web/web.dart' as web;
 
-import '../../jaspr.dart';
+import '../../client.dart';
 import '../dom/validator.dart';
-import 'options.dart';
 
 sealed class ComponentAnchor {
-  ComponentAnchor(this.name, this.startNode);
+  ComponentAnchor(this.name, this.key, this.startNode);
 
   final String name;
+  final String key;
   final web.Node startNode;
   late final web.Node endNode;
 }
 
+final Expando<ClientComponentAnchor> _clientAnchorExpando = Expando();
+
+extension ClientAnchorExtension on web.Node {
+  ClientComponentAnchor? get clientAnchor => _clientAnchorExpando[this];
+
+  set clientAnchor(ClientComponentAnchor? anchor) {
+    _clientAnchorExpando[this] = anchor;
+  }
+}
+
 class ClientComponentAnchor extends ComponentAnchor {
-  ClientComponentAnchor._(super.name, super.startNode, this.data);
+  ClientComponentAnchor._(super.name, super.key, super.startNode, this.data);
 
-  final String? data;
+  String? data;
   late FutureOr<ClientBuilder> builder;
+  final Map<String, ServerComponentAnchor> serverAnchors = {};
+
+  void Function(void Function())? _setState;
 
   late final Map<String, Object?> params = data != null
       ? jsonDecode(const DomValidator().unescapeMarkerText(data!)) as Map<String, Object?>
       : {};
 
   Future<void> resolve() async {
-    final r = await builder;
-    builder = r;
+    final (clientBuilder, _) = await (
+      Future.value(builder),
+      serverAnchors.values.map((a) => a.resolve()).wait,
+    ).wait;
+    builder = clientBuilder;
   }
 
   Component build() {
     assert(builder is ClientBuilder, 'ClientComponentAnchor was not resolved before calling build()');
-    return (builder as ClientBuilder)(params);
+    return StatefulBuilder(
+      key: GlobalObjectKey(key),
+      builder: (context, setState) {
+        _setState = setState;
+        final params = ClientParams(
+          data != null
+              ? jsonDecode(const DomValidator().unescapeMarkerText(data!)) as Map<String, Object?>
+              : <String, Object?>{},
+          serverAnchors,
+        );
+        return (builder as ClientBuilder)(params);
+      },
+    );
+  }
+
+  void rebuild(String? data, Map<String, ServerComponentAnchor> serverAnchors) {
+    assert(_setState != null, 'ClientComponentAnchor was not built before calling rebuild()');
+    _setState!(() {
+      this.data = data;
+      this.serverAnchors.clear();
+      this.serverAnchors.addAll(serverAnchors);
+    });
+  }
+
+  ChildSlot createSlot() {
+    return _AnchorChildSlot(
+      key: UniqueKey(),
+      start: startNode,
+      end: endNode,
+      child: build(),
+    );
+  }
+}
+
+class _AnchorChildSlot extends ChildSlot {
+  _AnchorChildSlot({required this.start, required this.end, required this.child, super.key});
+
+  final web.Node start;
+  final web.Node end;
+  @override
+  final Component child;
+
+  @override
+  ChildSlotRenderObject createRenderObject(SlottedDomRenderObject parent) {
+    return ChildSlotRenderObject.between(parent, start, end);
+  }
+
+  @override
+  bool canUpdate(ChildSlot oldComponent) {
+    return oldComponent is _AnchorChildSlot && oldComponent.start == start && oldComponent.end == end;
   }
 }
 
-final _clientStartRegex = RegExp('^${DomValidator.clientMarkerPrefixRegex}(\\S+)(?:\\s+data=(.*))?\$');
+class ServerComponentAnchor extends ComponentAnchor {
+  ServerComponentAnchor(super.name, super.key, super.startNode);
+
+  final List<ClientComponentAnchor> clientAnchors = [];
+
+  Future<void> resolve() async {
+    await [for (final anchor in clientAnchors) anchor.resolve()].wait;
+  }
+
+  Component build() {
+    final List<web.Node> nodes = [];
+
+    web.Node? curr = startNode;
+    while (curr != null && curr != endNode) {
+      final next = curr.nextSibling;
+      nodes.add(curr);
+      curr = next;
+    }
+    nodes.add(endNode);
+
+    return SlottedChildView.withNodes(
+      key: UniqueKey(),
+      nodes: nodes,
+      slots: [
+        for (final client in clientAnchors) client.createSlot(),
+      ],
+    );
+  }
+}
+
+final _clientStartRegex = RegExp('^${DomValidator.clientMarkerPrefixRegex}(\\S+)(?:\\s+#(\\S*))?(?:\\s+data=(.*))?\$');
 final _clientEndRegex = RegExp('^/${DomValidator.clientMarkerPrefixRegex}(\\S+)\$');
 
-List<ClientComponentAnchor> extractClientAnchors(
-  FutureOr<ClientBuilder> Function(String) byName, {
+final _serverStartRegex = RegExp('^s${DomValidator.clientMarkerPrefixRegex}(\\d+)(?:\\s+#(\\S*))?\$');
+final _serverEndRegex = RegExp('^/s${DomValidator.clientMarkerPrefixRegex}(\\d+)\$');
+
+FutureOr<ClientBuilder> getClientByName(String name) {
+  final clients = Jaspr.options.clients;
+  assert(clients.containsKey(name), "No client component registered with name '$name'.");
+  return clients[name]!.loadedBuilder;
+}
+
+List<ClientComponentAnchor> extractAnchors({
   List<web.Node>? nodes,
 }) {
   nodes ??= [?web.document.body];
 
   final List<ComponentAnchor> anchors = [];
   final List<ClientComponentAnchor> clientAnchors = [];
+  final Map<String, int> clientKeyCounters = {};
 
   web.Comment? currNode;
   for (final rootNode in nodes) {
@@ -59,14 +163,23 @@ List<ClientComponentAnchor> extractClientAnchors(
       // Find client start anchor.
       if (_clientStartRegex.firstMatch(value) case final match?) {
         assert(
-          anchors.isEmpty,
-          'Found nested client component anchor, which is not allowed.',
+          anchors.isEmpty || anchors.last is ServerComponentAnchor,
+          'Found directly nested client component anchor, which is not allowed.',
         );
 
         final name = match.group(1)!;
-        final data = match.group(2);
+        final key = match.group(2);
+        final data = match.group(3);
 
-        anchors.add(ClientComponentAnchor._(name, currNode, data));
+        final resolvedKey = key != null
+            ? '@$name#$key'
+            : (() {
+                final count = clientKeyCounters[name] ?? -1;
+                clientKeyCounters[name] = count + 1;
+                return '@$name-${anchors.length}-$count';
+              })();
+
+        anchors.add(ClientComponentAnchor._(name, resolvedKey, currNode, data));
         continue;
       }
 
@@ -84,12 +197,57 @@ List<ClientComponentAnchor> extractClientAnchors(
         assert(start.parentNode == currNode.parentNode, 'Found client component anchors with different parent nodes.');
 
         comp.endNode = currNode;
-        comp.builder = byName(name);
+        comp.builder = getClientByName(name);
 
         // Remove the data string.
         start.textContent = '${DomValidator.clientMarkerPrefix}${comp.name}';
 
-        clientAnchors.add(comp);
+        start.clientAnchor = comp;
+        if (anchors.isEmpty) {
+          clientAnchors.add(comp);
+        } else {
+          (anchors.last as ServerComponentAnchor).clientAnchors.add(comp);
+        }
+        continue;
+      }
+
+      // Find server start anchor.
+      if (_serverStartRegex.firstMatch(value) case final match?) {
+        assert(anchors.isNotEmpty, 'Found non-nested server component anchor, which is not allowed.');
+        assert(
+          anchors.last is ClientComponentAnchor,
+          'Found directly nested server component anchor, which is not allowed.',
+        );
+
+        final name = match.group(1)!;
+        final key = match.group(2);
+
+        final count = (anchors.last as ClientComponentAnchor).serverAnchors.length;
+        final resolvedKey = key != null ? 's#$key' : 's-${anchors.length}-$count';
+
+        anchors.add(ServerComponentAnchor(name, resolvedKey, currNode));
+
+        continue;
+      }
+
+      // Find server end anchor.
+      if (_serverEndRegex.firstMatch(value) case final match?) {
+        final name = match.group(1)!;
+        assert(
+          anchors.isNotEmpty && anchors.last.name == name,
+          'Found server component end anchor without matching start anchor.',
+        );
+
+        final comp = anchors.removeLast() as ServerComponentAnchor;
+
+        final start = comp.startNode;
+        assert(start.parentNode == currNode.parentNode, 'Found server component anchors with different parent nodes.');
+
+        comp.endNode = currNode;
+
+        assert(anchors.isNotEmpty, 'Found server component without ancestor client component.');
+        (anchors.last as ClientComponentAnchor).serverAnchors[name] = comp;
+
         continue;
       }
     }
diff --git a/packages/jaspr/lib/src/client/dom_render_object.dart b/packages/jaspr/lib/src/client/dom_render_object.dart
index d354e90e7..a843078ef 100644
--- a/packages/jaspr/lib/src/client/dom_render_object.dart
+++ b/packages/jaspr/lib/src/client/dom_render_object.dart
@@ -304,7 +304,7 @@ class DomRenderFragment extends DomRenderObject
   web.Node? get firstChildNode {
     if (_firstChild case final firstChild?) {
       if (firstChild is DomRenderFragment) {
-        return firstChild.lastChildNode;
+        return firstChild.firstChildNode;
       }
 
       return firstChild.node;
@@ -442,28 +442,22 @@ class DomRenderFragment extends DomRenderObject
 }
 
 class RootDomRenderObject extends DomRenderObject with MultiChildDomRenderObject, HydratableDomRenderObject {
-  RootDomRenderObject(this.node, [List<web.Node>? nodes]) {
-    toHydrate = [...nodes ?? node.childNodes.toIterable()];
-    beforeStart = toHydrate.firstOrNull?.previousSibling;
-  }
-
-  factory RootDomRenderObject.between(web.Node start, web.Node end) {
-    final nodes = <web.Node>[];
-    web.Node? curr = start.nextSibling;
-    while (curr != null && curr != end) {
-      nodes.add(curr);
-      curr = curr.nextSibling;
-    }
-    return RootDomRenderObject(start.parentElement!, nodes);
+  RootDomRenderObject(this._node) {
+    toHydrate = [..._node.childNodes.toIterable()];
   }
 
+  web.Element _node;
   @override
-  final web.Element node;
-  late final web.Node? beforeStart;
+  web.Element get node => _node;
+
+  void setRootNode(web.Element newNode) {
+    _node = newNode;
+    toHydrate = [...newNode.childNodes.toIterable()];
+  }
 
   @override
   void attach(DomRenderObject child, {DomRenderObject? after}) {
-    attachChild(child, after, startNode: beforeStart);
+    attachChild(child, after);
   }
 
   @override
diff --git a/packages/jaspr/lib/src/client/options.dart b/packages/jaspr/lib/src/client/options.dart
index 58d60bdcb..17da57ea0 100644
--- a/packages/jaspr/lib/src/client/options.dart
+++ b/packages/jaspr/lib/src/client/options.dart
@@ -1,6 +1,8 @@
 import 'dart:async';
 
 import '../../jaspr.dart';
+import '../dom/validator.dart';
+import 'component_anchors.dart';
 
 /// Main class for initializing the Jaspr framework on the client.
 ///
@@ -67,4 +69,34 @@ final class ClientLoader {
 ///
 /// **DO NOT USE DIRECTLY.**
 /// Use the generated `defaultClientOptions` instead.
-typedef ClientBuilder = Component Function(Map<String, dynamic> params);
+typedef ClientBuilder = Component Function(ClientParams params);
+
+final class ClientParams {
+  ClientParams(this._params, this.serverComponents);
+
+  final Map<String, Object?> _params;
+  final Map<String, ServerComponentAnchor> serverComponents;
+
+  Component mount(String sId) {
+    assert(sId.startsWith('s${DomValidator.clientMarkerPrefixRegex}'));
+    final serverAnchor = serverComponents[sId.substring(2)];
+    if (serverAnchor != null) {
+      return serverAnchor.build();
+    } else {
+      return const Component.text('');
+    }
+  }
+
+  Component? mountOrNull(String? sId) {
+    if (sId == null) return null;
+    return mount(sId);
+  }
+
+  T get<T>(String key) {
+    final value = _params[key];
+    if (value is! T) {
+      throw StateError('$key is not $T: $value');
+    }
+    return value;
+  }
+}
diff --git a/packages/jaspr/lib/src/client/run_app.dart b/packages/jaspr/lib/src/client/run_app.dart
index fad0d7207..0afca3a38 100644
--- a/packages/jaspr/lib/src/client/run_app.dart
+++ b/packages/jaspr/lib/src/client/run_app.dart
@@ -3,5 +3,7 @@ import 'client_binding.dart';
 
 /// Main entry point for the browser app.
 ClientAppBinding runApp(Component app, {String attachTo = 'body'}) {
-  return ClientAppBinding()..attachRootComponent(app, attachTo: attachTo);
+  final binding = ClientAppBinding();
+  binding.attachRootComponent(app, attachTo: attachTo);
+  return binding;
 }
diff --git a/packages/jaspr/lib/src/client/slotted_child_view.dart b/packages/jaspr/lib/src/client/slotted_child_view.dart
index 6f4216413..8aa1046e6 100644
--- a/packages/jaspr/lib/src/client/slotted_child_view.dart
+++ b/packages/jaspr/lib/src/client/slotted_child_view.dart
@@ -8,9 +8,9 @@ import 'utils.dart';
 /// A slot that attaches a child component to a specific DOM node within
 /// a [SlottedChildView].
 abstract class ChildSlot extends Component {
-  const ChildSlot();
+  const ChildSlot({super.key});
 
-  factory ChildSlot.fromQuery(String query, {required Component child}) = QueryChildSlot;
+  factory ChildSlot.fromQuery(String query, {required Component child, Key? key}) = QueryChildSlot;
 
   Component get child;
 
@@ -24,7 +24,7 @@ abstract class ChildSlot extends Component {
 /// A [ChildSlot] that attaches its child to the first DOM element matching
 /// the given CSS [query].
 class QueryChildSlot extends ChildSlot {
-  QueryChildSlot(this.query, {required this.child});
+  const QueryChildSlot(this.query, {required this.child, super.key});
 
   final String query;
   @override
@@ -78,8 +78,12 @@ class ChildSlotElement extends MultiChildRenderObjectElement {
   @override
   ChildSlotRenderObject createRenderObject() {
     final slot = component as ChildSlot;
-    final parent = parentRenderObjectElement!.renderObject as SlottedDomRenderObject;
-    return slot.createRenderObject(parent);
+    final parent = parentRenderObjectElement!.renderObject as DomRenderObject;
+    assert(
+      parent is SlottedDomRenderObject,
+      'ChildSlot must be used as a direct child of SlottedDomRenderObject.',
+    );
+    return slot.createRenderObject(parent as SlottedDomRenderObject);
   }
 
   @override
@@ -94,8 +98,7 @@ class ChildSlotElement extends MultiChildRenderObjectElement {
 class SlottedChildView extends Component {
   SlottedChildView({required this.slots, super.key}) : nodes = null;
 
-  // ignore: unused_element - for future use by server components.
-  SlottedChildView._withNodes({required List<web.Node> this.nodes, required this.slots});
+  SlottedChildView.withNodes({required List<web.Node> this.nodes, required this.slots, super.key});
 
   final List<web.Node>? nodes;
   final List<ChildSlot> slots;
@@ -104,7 +107,7 @@ class SlottedChildView extends Component {
   Element createElement() => SlottedChildViewElement(this);
 }
 
-class SlottedChildViewElement extends MultiChildRenderObjectElement {
+class SlottedChildViewElement extends DomRenderObjectElement {
   SlottedChildViewElement(SlottedChildView super.component);
 
   @override
@@ -120,18 +123,178 @@ class SlottedChildViewElement extends MultiChildRenderObjectElement {
   }
 
   @override
-  List<Component> buildChildren() {
+  List<Component> buildOwnChildren() {
     return component.slots;
   }
 
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    updateRenderObject(renderObject as SlottedDomRenderObject);
+  }
+
   @override
   RenderObject createRenderObject() {
     final parent = parentRenderObjectElement!.renderObject;
-    return SlottedDomRenderObject.fromNodes(component.nodes, parent as DomRenderObject);
+    final renderObject = SlottedDomRenderObject.fromNodes(component.nodes, parent as DomRenderObject);
+    updateRenderObject(renderObject);
+    return renderObject;
   }
 
+  final Map<web.HTMLElement, _AppliedParams> _appliedParams = {};
+
   @override
-  void updateRenderObject(RenderObject renderObject) {}
+  void updateRenderObject(SlottedDomRenderObject renderObject) {
+    for (final element in _appliedParams.keys) {
+      resetElementParams(element);
+    }
+    _appliedParams.clear();
+
+    if (inheritedDomParams case final inheritedDomParams?) {
+      web.Node? current = renderObject.firstChildNode;
+      while (current != null) {
+        if (current.isElement) {
+          for (final param in inheritedDomParams.reversed) {
+            final elements = findMatchingElements(current as web.Element, param.target);
+
+            for (final element in elements) {
+              updateElementParams(element as web.HTMLElement, param);
+            }
+          }
+        }
+
+        if (current == renderObject.lastChildNode) {
+          break;
+        }
+        current = current.nextSibling;
+      }
+    }
+  }
+
+  List<web.Element> findMatchingElements(web.Element root, ApplyTarget target) {
+    final elements = <web.Element>[];
+
+    if (isMatchingElement(target, root)) {
+      elements.add(root);
+    }
+
+    if (!target.onlyChildren) {
+      final results = root.querySelectorAll(target.query);
+      for (int i = 0; i < results.length; i++) {
+        elements.add(results.item(i) as web.Element);
+      }
+    }
+
+    return elements;
+  }
+
+  bool isMatchingElement(ApplyTarget target, web.Element element) {
+    if (target.tag case final expectedTag? when element.localName != expectedTag) return false;
+    if (target.id case final expectedId? when element.id != expectedId) return false;
+    if (target.classes case final expectedClasses? when !expectedClasses.every((c) => element.classList.contains(c))) {
+      return false;
+    }
+
+    return true;
+  }
+
+  void resetElementParams(web.HTMLElement element) {
+    final params = _appliedParams[element];
+    if (params == null) return;
+
+    if (params.id != null && element.id == params.id) {
+      element.id = '';
+    }
+
+    if (params.classes case final appliedClasses?) {
+      for (final c in appliedClasses) {
+        element.classList.remove(c);
+      }
+    }
+
+    if (params.styles case final appliedStyles?) {
+      for (final e in appliedStyles.entries) {
+        element.style.removeProperty(e.key);
+      }
+    }
+
+    if (params.attributes case final appliedAttributes?) {
+      for (final e in appliedAttributes.entries) {
+        element.removeAttribute(e.key);
+      }
+    }
+
+    if (params.eventBindings case final appliedEvents?) {
+      for (final e in appliedEvents.entries) {
+        e.value.clear();
+      }
+    }
+  }
+
+  void updateElementParams(web.HTMLElement element, ApplyParams newParams) {
+    final params = _appliedParams[element];
+
+    String? appliedId = params?.id;
+    List<String>? appliedClasses = params?.classes;
+    Map<String, String>? appliedStyles = params?.styles;
+    Map<String, String>? appliedAttributes = params?.attributes;
+    Map<String, EventBinding>? appliedEvents = params?.eventBindings;
+
+    if (newParams.id case final newId?) {
+      if (element.id.isEmpty) {
+        element.id = newId;
+        appliedId = newId;
+      }
+    }
+
+    if (newParams.classes case final newClasses?) {
+      appliedClasses ??= [];
+      for (final c in newClasses) {
+        if (!element.classList.contains(c)) {
+          element.classList.add(c);
+          appliedClasses.add(c);
+        }
+      }
+    }
+
+    if (newParams.styles case final newStyles?) {
+      appliedStyles ??= {};
+      for (final e in newStyles.entries) {
+        if (element.style.getPropertyValue(e.key).isEmpty) {
+          element.style.setProperty(e.key, e.value);
+          appliedStyles[e.key] = e.value;
+        }
+      }
+    }
+
+    if (newParams.attributes case final newAttributes?) {
+      appliedAttributes ??= {};
+      for (final e in newAttributes.entries) {
+        if (!element.hasAttribute(e.key)) {
+          element.setAttribute(e.key, e.value);
+          appliedAttributes[e.key] = e.value;
+        }
+      }
+    }
+
+    if (newParams.events case final newEvents?) {
+      appliedEvents ??= {};
+      for (final e in newEvents.entries) {
+        if (!appliedEvents.containsKey(e.key)) {
+          appliedEvents[e.key] = EventBinding(element, e.key, e.value);
+        }
+      }
+    }
+
+    _appliedParams[element] = _AppliedParams(
+      target: newParams.target,
+      id: appliedId,
+      classes: appliedClasses,
+      styles: appliedStyles,
+      attributes: appliedAttributes,
+      events: appliedEvents,
+    );
+  }
 
   @override
   void unmount() {
@@ -151,14 +314,23 @@ class SlottedChildViewElement extends MultiChildRenderObjectElement {
   }
 }
 
+class _AppliedParams extends ApplyParams {
+  _AppliedParams({
+    required super.target,
+    super.id,
+    super.classes,
+    super.styles,
+    super.attributes,
+    Map<String, EventBinding>? events,
+  }) : eventBindings = events;
+
+  final Map<String, EventBinding>? eventBindings;
+}
+
 class SlottedDomRenderObject extends DomRenderFragment {
-  SlottedDomRenderObject._(
-    DomRenderObject? parent, {
-    this.firstChildNode,
-    this.lastChildNode,
-  }) : super(parent, []);
+  SlottedDomRenderObject._(DomRenderObject parent, {this.firstChildNode, this.lastChildNode}) : super(parent, []);
 
-  factory SlottedDomRenderObject.fromNodes(List<web.Node>? nodes, DomRenderObject? parent) {
+  factory SlottedDomRenderObject.fromNodes(List<web.Node>? nodes, DomRenderObject parent) {
     final nodesToAdd = nodes ?? [if (parent is HydratableDomRenderObject) ...parent.toHydrate];
 
     if (nodesToAdd.isEmpty) {
@@ -169,14 +341,14 @@ class SlottedDomRenderObject extends DomRenderFragment {
     final lastNode = nodesToAdd.last;
     assert(firstNode.parentNode == lastNode.parentNode, 'All nodes must share the same parent.');
     final object = SlottedDomRenderObject._(parent, firstChildNode: firstNode, lastChildNode: lastNode);
-    if (parent != null && parent.node.contains(firstNode)) {
-      if (parent is HydratableDomRenderObject) {
-        final startIndex = parent.toHydrate.indexOf(firstNode);
-        final endIndex = parent.toHydrate.indexOf(lastNode);
-        if (startIndex != -1 && endIndex != -1 && startIndex <= endIndex) {
-          parent.toHydrate.removeRange(startIndex, endIndex + 1);
-        }
+    if (parent is HydratableDomRenderObject) {
+      final startIndex = parent.toHydrate.indexOf(firstNode);
+      final endIndex = parent.toHydrate.indexOf(lastNode);
+      if (startIndex != -1 && endIndex != -1 && startIndex <= endIndex) {
+        parent.toHydrate.removeRange(startIndex, endIndex + 1);
       }
+    }
+    if (_realNodeOf(parent).contains(firstNode)) {
       object.isAttached = true;
     } else {
       for (final node in nodesToAdd) {
@@ -196,7 +368,7 @@ class SlottedDomRenderObject extends DomRenderFragment {
   void attach(covariant RenderObject child, {covariant RenderObject? after}) {
     if (child is ChildSlotRenderObject) {
       assert(
-        isAttached ? parent!.node.contains(child.node) : node.contains(child.node),
+        isAttached ? _realNodeOf(parent!).contains(child.node) : node.contains(child.node),
         'Cannot attach a child that is not already part of the component fragment.',
       );
       child.parent = this;
@@ -208,18 +380,29 @@ class SlottedDomRenderObject extends DomRenderFragment {
 
   @override
   void remove(covariant RenderObject child) {
+    if (child is ChildSlotRenderObject) {
+      child.parent = null;
+      return;
+    }
     throw UnsupportedError('SlottedDomRenderObject cannot have children removed from them.');
   }
+
+  static web.Node _realNodeOf(DomRenderObject object) {
+    if (object is DomRenderFragment) {
+      return _realNodeOf(object.parent!);
+    }
+    return object.node;
+  }
 }
 
 class ChildSlotRenderObject extends DomRenderObject with MultiChildDomRenderObject, HydratableDomRenderObject {
-  ChildSlotRenderObject(this.node, SlottedDomRenderObject parent, [List<web.Node>? nodes]) {
+  ChildSlotRenderObject(this.node, DomRenderObject parent, [List<web.Node>? nodes]) {
     this.parent = parent;
     toHydrate = [...nodes ?? node.childNodes.toIterable()];
     beforeStart = toHydrate.firstOrNull?.previousSibling;
   }
 
-  factory ChildSlotRenderObject.between(SlottedDomRenderObject parent, web.Node start, web.Node end) {
+  factory ChildSlotRenderObject.between(DomRenderObject parent, web.Node start, web.Node end) {
     final nodes = <web.Node>[];
     web.Node? curr = start.nextSibling;
     while (curr != null && curr != end) {
diff --git a/packages/jaspr/lib/src/components/document/document_server.dart b/packages/jaspr/lib/src/components/document/document_server.dart
index b3940832e..c4b806689 100644
--- a/packages/jaspr/lib/src/components/document/document_server.dart
+++ b/packages/jaspr/lib/src/components/document/document_server.dart
@@ -5,7 +5,7 @@ import 'package:html/parser.dart';
 
 import '/dom.dart';
 import '/server.dart';
-import '/src/server/adapters/document_adapter.dart';
+import '../../server/adapters/document_structure_helper.dart';
 
 abstract class Document implements Component {
   /// Sets up a basic document structure at the root of your app and renders the main `<html>`, `<head>` and `<body>` tags.
@@ -323,7 +323,7 @@ class AttachDocument extends StatelessComponent implements Document {
 
 final Expando<AttachAdapter> _attach = Expando();
 
-class AttachAdapter extends RenderAdapter with DocumentStructureMixin {
+class AttachAdapter extends RenderAdapter {
   static void register(BuildContext context, AttachDocument item) {
     final binding = context.binding;
     if (binding is! ServerAppBinding) {
@@ -348,7 +348,7 @@ class AttachAdapter extends RenderAdapter with DocumentStructureMixin {
 
   @override
   void apply(MarkupRenderObject root) {
-    final (html, head, body) = createDocumentStructure(root);
+    final (:html, :head, :body) = createDocumentStructure(root);
 
     String? keyFor(MarkupRenderObject n) {
       return switch (n) {
diff --git a/packages/jaspr/lib/src/foundation/sync.dart b/packages/jaspr/lib/src/foundation/sync.dart
index 45229a66f..0a486ed81 100644
--- a/packages/jaspr/lib/src/foundation/sync.dart
+++ b/packages/jaspr/lib/src/foundation/sync.dart
@@ -28,6 +28,12 @@ mixin SyncStateMixin<T extends StatefulComponent, U> on State<T> {
     initSyncState(this);
   }
 
+  @override
+  void onReload() {
+    initSyncState(this);
+    super.onReload();
+  }
+
   static void initSyncState(SyncStateMixin<StatefulComponent, Object?> mixin) => s.initSyncState(mixin);
 }
 
diff --git a/packages/jaspr/lib/src/framework/build_owner.dart b/packages/jaspr/lib/src/framework/build_owner.dart
index 518bcd0ea..afa124a30 100644
--- a/packages/jaspr/lib/src/framework/build_owner.dart
+++ b/packages/jaspr/lib/src/framework/build_owner.dart
@@ -194,4 +194,36 @@ class BuildOwner {
     }
     assert(_debugStateLockLevel >= 0);
   }
+
+  bool _isReload = false;
+
+  void performReload(Element element) {
+    assert(!isFirstBuild);
+
+    assert(_debugStateLockLevel >= 0);
+    assert(!_debugBuilding);
+
+    assert(() {
+      _debugStateLockLevel += 1;
+      _debugBuilding = true;
+      return true;
+    }());
+
+    try {
+      _isReload = true;
+      element.onReload();
+    } finally {
+      lockState(_inactiveElements._unmountAll);
+      _isReload = false;
+
+      assert(_debugBuilding);
+      assert(() {
+        _debugBuilding = false;
+        _debugStateLockLevel -= 1;
+        return true;
+      }());
+    }
+
+    assert(_debugStateLockLevel >= 0);
+  }
 }
diff --git a/packages/jaspr/lib/src/framework/components.dart b/packages/jaspr/lib/src/framework/components.dart
index ef57fe3cf..5cdc2f39d 100644
--- a/packages/jaspr/lib/src/framework/components.dart
+++ b/packages/jaspr/lib/src/framework/components.dart
@@ -30,28 +30,15 @@ class DomComponent extends Component {
 
 typedef EventCallback = void Function(web.Event event);
 
-class DomElement extends MultiChildRenderObjectElement {
+class DomElement extends DomRenderObjectElement {
   DomElement(DomComponent super.component);
 
   @override
   DomComponent get component => super.component as DomComponent;
 
-  InheritedElement? _wrappingElement;
-
-  @override
-  List<Component> buildChildren() => component.children ?? [];
-
   @override
-  void _updateInheritance() {
-    super._updateInheritance();
-    if (_inheritedElements case final originalInheritedElements?
-        when originalInheritedElements.containsKey(_WrappingDomComponent)) {
-      final updatedInheritedElements = HashMap<Type, InheritedElement>.of(originalInheritedElements);
-      _wrappingElement = updatedInheritedElements.remove(_WrappingDomComponent);
-      _inheritedElements = updatedInheritedElements;
-      return;
-    }
-    _wrappingElement = null;
+  List<Component> buildOwnChildren() {
+    return component.children ?? const [];
   }
 
   @override
@@ -85,52 +72,71 @@ class DomElement extends MultiChildRenderObjectElement {
 
   @override
   void updateRenderObject(RenderElement renderObject) {
-    if (_wrappingElement != null) {
-      final wrappingComponent = dependOnInheritedElement(_wrappingElement!) as _WrappingDomComponent;
-      renderObject.update(
-        component.id ?? wrappingComponent.id,
-        _joinString(wrappingComponent.classes, component.classes),
-        _joinMap(wrappingComponent.styles?.properties, component.styles?.properties),
-        _joinMap(wrappingComponent.attributes, component.attributes),
-        _joinMap(wrappingComponent.events, component.events),
-      );
-
-      return;
+    var id = component.id;
+    var classes = component.classes;
+    var styles = component.styles?.properties;
+    var attributes = component.attributes;
+    var events = component.events;
+
+    if (inheritedDomParams case final inheritedDomParams?) {
+      final classesSet = classes?.split(' ').toSet() ?? {};
+      styles = Map.of(styles ?? {});
+      attributes = Map.of(attributes ?? {});
+      events = Map.of(events ?? {});
+
+      for (final param in inheritedDomParams.reversed) {
+        if (param.target.tag case final expectedTag? when expectedTag != component.tag) continue;
+        if (param.target.id case final expectedId? when expectedId != id) continue;
+        if (param.target.classes case final expectedClasses?
+            when !expectedClasses.every((c) => classesSet.contains(c))) {
+          continue;
+        }
+
+        id ??= param.id;
+
+        if (param.classes case final paramClasses?) {
+          classesSet.addAll(paramClasses);
+        }
+
+        if (param.styles case final stylesProps?) {
+          for (final MapEntry(:key, :value) in stylesProps.entries) {
+            styles[key] ??= value;
+          }
+        }
+
+        if (param.attributes case final attributesMap?) {
+          for (final MapEntry(:key, :value) in attributesMap.entries) {
+            attributes[key] ??= value;
+          }
+        }
+
+        if (param.events case final eventsMap?) {
+          for (final MapEntry(:key, :value) in eventsMap.entries) {
+            events[key] ??= value;
+          }
+        }
+      }
+
+      classes = classesSet.join(' ');
     }
 
-    renderObject.update(
-      component.id,
-      component.classes,
-      component.styles?.properties,
-      component.attributes,
-      component.events,
-    );
-  }
-
-  static String? _joinString(String? a, String? b) {
-    if (a == null) return b;
-    if (b == null) return a;
-    return '$a $b';
-  }
-
-  static Map<K, V>? _joinMap<K, V>(Map<K, V>? a, Map<K, V>? b) {
-    if (a == null || a.isEmpty) return b;
-    if (b == null || b.isEmpty) return a;
-    return {...a, ...b};
+    renderObject.update(id, classes, styles, attributes, events);
   }
 }
 
-class _WrappingDomComponent extends InheritedComponent implements DomComponent {
-  const _WrappingDomComponent({
-    super.key,
+class _ApplyDomComponent extends StatelessComponent implements DomComponent {
+  const _ApplyDomComponent({
+    this.target = ApplyTarget.anyChild,
     this.id,
     this.classes,
     this.styles,
     this.attributes,
     this.events,
-    required super.child,
+    required this.child,
   });
 
+  final ApplyTarget target;
+
   @override
   final String tag = '';
   @override
@@ -144,16 +150,165 @@ class _WrappingDomComponent extends InheritedComponent implements DomComponent {
   @override
   final Map<String, EventCallback>? events;
 
+  final Component child;
   @override
   List<Component>? get children => null;
 
   @override
-  bool updateShouldNotify(_WrappingDomComponent oldComponent) {
-    return oldComponent.id != id ||
-        oldComponent.classes != classes ||
-        oldComponent.styles != styles ||
-        oldComponent.attributes != attributes ||
-        oldComponent.events != events;
+  Component build(BuildContext context) {
+    return _InheritedDomComponent.merge(
+      context,
+      params: ApplyParams(
+        target: target,
+        id: id,
+        classes: classes?.split(' '),
+        styles: styles?.properties,
+        attributes: attributes,
+        events: events,
+      ),
+      child: child,
+    );
+  }
+}
+
+/// Defines the target for a [Component.apply] component.
+///
+/// The target can select either a direct child or descendant,
+/// and optionally filter by [tag], [id], and [classes].
+final class ApplyTarget {
+  static const ApplyTarget anyChild = ApplyTarget.childWith();
+
+  const ApplyTarget.childWith({
+    this.tag,
+    this.id,
+    this.classes,
+  }) : onlyChildren = true;
+
+  const ApplyTarget.descendantWith({
+    this.tag,
+    this.id,
+    this.classes,
+  }) : onlyChildren = false;
+
+  final bool onlyChildren;
+  final String? tag;
+  final String? id;
+  final Set<String>? classes;
+
+  String get query => [
+    if (onlyChildren) '> ',
+    if (tag == null && id == null && classes == null)
+      '*'
+    else ...[
+      ?tag,
+      if (id != null) '#$id',
+      if (classes case final classes?)
+        for (final c in classes) '.$c',
+    ],
+  ].join();
+}
+
+@protected
+abstract class DomRenderObjectElement extends MultiChildRenderObjectElement {
+  DomRenderObjectElement(super.component);
+
+  InheritedElement? _inheritedDomElement;
+
+  List<ApplyParams>? get inheritedDomParams {
+    if (_inheritedDomElement case final inheritedDomElement?) {
+      final inheritedDomComponent = dependOnInheritedElement(inheritedDomElement) as _InheritedDomComponent;
+      return inheritedDomComponent.params;
+    }
+    return null;
+  }
+
+  List<Component> buildOwnChildren();
+
+  @override
+  List<Component> buildChildren() {
+    if (inheritedDomParams case final inheritedDomParams?) {
+      final List<ApplyParams> newParams = inheritedDomParams.where((p) => !p.target.onlyChildren).toList();
+
+      // If we either removed all selectors (or none), we can return the children as is.
+      // The inherited element was already removed (or kept) by the [_updateInheritance] method.
+      if (newParams.isEmpty || newParams.length == inheritedDomParams.length) {
+        return buildOwnChildren();
+      }
+
+      return [
+        for (final child in buildOwnChildren()) _InheritedDomComponent(params: newParams, child: child),
+      ];
+    }
+    return buildOwnChildren();
+  }
+
+  @override
+  void _updateInheritance() {
+    super._updateInheritance();
+    if (_inheritedElements case final originalInheritedElements?) {
+      if (originalInheritedElements[_InheritedDomComponent] case final inheritedElement?) {
+        final updatedInheritedElements = HashMap<Type, InheritedElement>.of(originalInheritedElements);
+        _inheritedDomElement = inheritedElement;
+
+        // Removing this here when *some* selectors use child combinators allows us to short-circuit the build logic to
+        // not add a new [_InheritedDomComponent] when either:
+        //   - *all* selectors use child combinators, as then the inherited element is already removed, or
+        //   - *all* selectors use descendant combinators, as then the inherited element stays unchanged.
+        // Only when *some* selectors use descendant combinators and *some* selectors use child combinators do we need
+        // to create a new [_InheritedDomComponent] in the [buildChildren] method.
+        if ((inheritedElement.component as _InheritedDomComponent).params.any((p) => p.target.onlyChildren)) {
+          updatedInheritedElements.remove(_InheritedDomComponent);
+        }
+
+        _inheritedElements = updatedInheritedElements;
+        return;
+      }
+    }
+    _inheritedDomElement = null;
+  }
+}
+
+@protected
+class ApplyParams {
+  const ApplyParams({
+    required this.target,
+    this.id,
+    this.classes,
+    this.styles,
+    this.attributes,
+    this.events,
+  });
+
+  final ApplyTarget target;
+  final String? id;
+  final List<String>? classes;
+  final Map<String, String>? styles;
+  final Map<String, String>? attributes;
+  final Map<String, EventCallback>? events;
+}
+
+class _InheritedDomComponent extends InheritedComponent {
+  const _InheritedDomComponent({required this.params, required super.child});
+
+  final List<ApplyParams> params;
+
+  factory _InheritedDomComponent.merge(
+    BuildContext context, {
+    required ApplyParams params,
+    required Component child,
+  }) {
+    final current = context.dependOnInheritedComponentOfExactType<_InheritedDomComponent>();
+    if (current == null) {
+      return _InheritedDomComponent(params: [params], child: child);
+    }
+    return _InheritedDomComponent(params: [...current.params, params], child: child);
+  }
+
+  @override
+  bool updateShouldNotify(_InheritedDomComponent oldComponent) {
+    if (identical(this, oldComponent)) return false;
+    if (params.isEmpty && oldComponent.params.isEmpty) return false;
+    return true;
   }
 }
 
diff --git a/packages/jaspr/lib/src/framework/components_binding.dart b/packages/jaspr/lib/src/framework/components_binding.dart
index 7ab93205d..438d4798d 100644
--- a/packages/jaspr/lib/src/framework/components_binding.dart
+++ b/packages/jaspr/lib/src/framework/components_binding.dart
@@ -41,6 +41,13 @@ mixin ComponentsBinding on AppBinding {
   }
 }
 
+@visibleForTesting
+abstract final class GlobalComponentsBinding {
+  static void clearGlobalKeys() {
+    ComponentsBinding._globalKeyRegistry.clear();
+  }
+}
+
 class _Root extends Component {
   _Root({required this.child, required this.rootRenderObject});
 
diff --git a/packages/jaspr/lib/src/framework/framework.dart b/packages/jaspr/lib/src/framework/framework.dart
index a1320937a..d56d09a94 100644
--- a/packages/jaspr/lib/src/framework/framework.dart
+++ b/packages/jaspr/lib/src/framework/framework.dart
@@ -113,15 +113,16 @@ abstract class Component {
   }) = DomComponent._;
 
   /// Creates a component which applies its parameters (like [classes], [styles], etc.) to its
-  /// direct child element(s).
+  /// [target] element(s).
   ///
-  /// This does not create a html element itself. All properties are merged with the respective child element's
-  /// properties, with the child's properties taking precedence where there are conflicts.
+  /// This does not create a HTML element itself. All properties are merged with the respective target element's
+  /// properties. The target's properties take precedence where there are conflicts.
   ///
   /// Example:
   /// ```dart
-  /// return Component.wrapElement(
-  ///   classes: 'wrapping-class',
+  /// return Component.apply(
+  ///   target: ApplyTarget.anyChild,
+  ///   classes: 'applied-class',
   ///   styles: Styles(backgroundColor: Colors.blue, padding: Padding.all(8.px)),
   ///   child: Component.element(
   ///     tag: 'div',
@@ -136,20 +137,20 @@ abstract class Component {
   ///
   /// Renders:
   /// ```html
-  /// <div class="wrapping-class some-class" style="padding: 8px; background-color: red;">
+  /// <div class="applied-class some-class" style="padding: 8px; background-color: red;">
   ///   Hello World
   /// </div>
   /// ```
   ///
-  const factory Component.wrapElement({
-    Key? key,
+  const factory Component.apply({
+    ApplyTarget target,
     String? id,
     String? classes,
     Styles? styles,
     Map<String, String>? attributes,
     Map<String, EventCallback>? events,
     required Component child,
-  }) = _WrappingDomComponent;
+  }) = _ApplyDomComponent;
 
   /// Creates a component which renders a list of child components without any wrapping element.
   ///
@@ -412,6 +413,9 @@ abstract class Element implements BuildContext {
         if (child._parentChanged || child.slot != newSlot) {
           updateSlotForChild(child, newSlot);
         }
+        if (owner._isReload) {
+          child.onReload();
+        }
         newChild = child;
       } else if (child._parentChanged || Component.canUpdate(child.component, newComponent)) {
         if (child._parentChanged || child.slot != newSlot) {
@@ -420,6 +424,9 @@ abstract class Element implements BuildContext {
         final oldComponent = child.component;
         child.update(newComponent);
         assert(child.component == newComponent);
+        if (owner._isReload) {
+          child.onReload();
+        }
         child.didUpdate(oldComponent);
         newChild = child;
       } else {
@@ -1200,6 +1207,12 @@ abstract class Element implements BuildContext {
   RenderObjectElement? get parentRenderObjectElement => _parentRenderObjectElement;
 
   var _parentChanged = false;
+
+  @mustCallSuper
+  void onReload() {
+    _dirty = true;
+    rebuild();
+  }
 }
 
 class ElementSlot {
diff --git a/packages/jaspr/lib/src/framework/render_object.dart b/packages/jaspr/lib/src/framework/render_object.dart
index b8c988ae6..e45229a53 100644
--- a/packages/jaspr/lib/src/framework/render_object.dart
+++ b/packages/jaspr/lib/src/framework/render_object.dart
@@ -105,7 +105,7 @@ mixin RenderObjectElement on Element {
 
   @override
   void detachRenderObject() {
-    final parent = _parentRenderObjectElement?.renderObject;
+    final parent = renderObject.parent;
     if (parent != null) {
       parent.remove(renderObject);
       assert(renderObject.parent == null);
@@ -116,6 +116,15 @@ mixin RenderObjectElement on Element {
   @override
   void updateSlot(ElementSlot newSlot) {
     super.updateSlot(newSlot);
-    attachRenderObject();
+    if (!owner._isReload) {
+      attachRenderObject();
+    }
+  }
+
+  @override
+  void onReload() {
+    _renderObject = createRenderObject();
+    _attached = false;
+    super.onReload();
   }
 }
diff --git a/packages/jaspr/lib/src/framework/stateful_component.dart b/packages/jaspr/lib/src/framework/stateful_component.dart
index 99ef68ef8..13bd654d4 100644
--- a/packages/jaspr/lib/src/framework/stateful_component.dart
+++ b/packages/jaspr/lib/src/framework/stateful_component.dart
@@ -578,6 +578,11 @@ abstract class State<T extends StatefulComponent> {
   @protected
   @mustCallSuper
   void didChangeDependencies() {}
+
+  /// Called when the page is reloaded.
+  @protected
+  @mustCallSuper
+  void onReload() {}
 }
 
 /// Mixin on [State] that preloads state on the server
@@ -752,4 +757,10 @@ class StatefulElement extends BuildableElement {
     super.didChangeDependencies();
     _didChangeDependencies = true;
   }
+
+  @override
+  void onReload() {
+    state.onReload();
+    super.onReload();
+  }
 }
diff --git a/packages/jaspr/lib/src/server/adapters/client_component_adapter.dart b/packages/jaspr/lib/src/server/adapters/client_component_adapter.dart
index f74dd4361..bf80998c2 100644
--- a/packages/jaspr/lib/src/server/adapters/client_component_adapter.dart
+++ b/packages/jaspr/lib/src/server/adapters/client_component_adapter.dart
@@ -1,81 +1,100 @@
 import '../../dom/validator.dart';
-import '../../foundation/constants.dart';
 import '../../framework/framework.dart';
+import '../components/client_component_registry.dart';
 import '../markup_render_object.dart';
 import '../options.dart';
-import '../server_binding.dart';
-import 'client_script_adapter.dart';
 import 'element_boundary_adapter.dart';
+import 'server_component_adapter.dart';
 
 class ClientComponentAdapter extends ElementBoundaryAdapter {
-  ClientComponentAdapter(this.name, this.data, super.element);
+  ClientComponentAdapter(this.registry, this.target, super.element) : super(priority: 1000);
 
-  final String name;
-  final String? data;
+  final ClientComponentRegistryElement registry;
+  final ClientTarget target;
+
+  bool _isClientBoundary = true;
+  late String? data;
+
+  @override
+  void prepareBoundary(ChildListRange range) {
+    element.visitAncestorElements((e) {
+      if (registry.serverElements.containsValue(e)) {
+        return false;
+      } else if (registry.clientElements.containsKey(e)) {
+        _isClientBoundary = false;
+        return false;
+      }
+      return true;
+    });
+
+    if (!_isClientBoundary) {
+      return;
+    }
+
+    data = getData();
+  }
 
   @override
   void applyBoundary(ChildListRange range) {
+    if (!_isClientBoundary) {
+      return;
+    }
+
     final startMarker = MarkupRenderText(
-      '<!--${DomValidator.clientMarkerPrefix}$name${data != null ? ' data=$data' : ''}-->',
+      '<!--${DomValidator.clientMarkerPrefix}${target.name}${data != null ? ' data=$data' : ''}-->',
       true,
     );
-    final endMarker = MarkupRenderText('<!--/${DomValidator.clientMarkerPrefix}$name-->', true);
+    final endMarker = MarkupRenderText('<!--/${DomValidator.clientMarkerPrefix}${target.name}-->', true);
 
     range.start.insertNext(ChildNodeData(startMarker));
     range.end.insertPrev(ChildNodeData(endMarker));
   }
-}
-
-class ClientComponentRegistry extends ObserverComponent {
-  ClientComponentRegistry({required super.child, super.key});
-
-  @override
-  ObserverElement createElement() => ClientComponentRegistryElement(this);
-}
-
-class ClientComponentRegistryElement extends ObserverElement {
-  ClientComponentRegistryElement(super.component);
 
-  bool _didHandleClientScript = false;
-  final List<Element> _clientElements = [];
-  final List<ClientTarget> _clientTargets = [];
+  String? getData() {
+    final data = target.dataFor(
+      element.component,
+      encode: (o) {
+        if (o is Component) {
+          return getDataForServerComponent(o, element);
+        }
+        return o;
+      },
+    );
+    return data;
+  }
 
-  @override
-  void willRebuildElement(Element element) {}
+  String getDataForServerComponent(Component component, Element parent) {
+    if (registry.serverComponents[component] case final s?) {
+      return 's${DomValidator.clientMarkerPrefix}$s';
+    }
 
-  @override
-  void didRebuildElement(Element element) {
-    final binding = this.binding as ServerAppBinding;
-
-    if (!_didHandleClientScript) {
-      if (binding.options.clientId != null) {
-        (binding).addRenderAdapter(ClientScriptAdapter(binding.options.clientId!));
-      } else if (kDebugMode) {
-        (binding).addRenderAdapter(NoClientScriptAdapter());
-      }
-      _didHandleClientScript = true;
+    Element? element;
+
+    void findElementFromContext(BuildContext context) {
+      context.visitChildElements((e) {
+        if (element != null) return;
+        if (identical(e.component, component)) {
+          element = e;
+        } else {
+          findElementFromContext(e);
+        }
+      });
     }
 
-    final entry = binding.options.clients?[element.component.runtimeType];
+    findElementFromContext(parent);
 
-    if (entry == null) {
-      return;
+    if (element == null) {
+      print('Warning: Component parameter not used in build method. This will result in empty html on the client.');
+
+      registry.serverComponents[component] = 0;
+      return 's${DomValidator.clientMarkerPrefix}_';
     }
 
-    var isClientBoundary = true;
-    element.visitAncestorElements((e) {
-      return isClientBoundary = !_clientElements.contains(e);
-    });
+    final s = registry.serverComponents[component] = registry.serverElementNum++;
+    registry.serverElements[s] = element;
 
-    if (!isClientBoundary) {
-      return;
-    }
+    binding.addRenderAdapter(ServerComponentAdapter(s, element!));
 
-    _clientElements.add(element);
-    _clientTargets.add(entry);
-    binding.addRenderAdapter(ClientComponentAdapter(entry.name, entry.dataFor(element.component), element));
+    return 's${DomValidator.clientMarkerPrefix}$s';
   }
-
-  @override
-  void didUnmountElement(Element element) {}
 }
diff --git a/packages/jaspr/lib/src/server/adapters/document_adapter.dart b/packages/jaspr/lib/src/server/adapters/document_adapter.dart
deleted file mode 100644
index 65cd262d4..000000000
--- a/packages/jaspr/lib/src/server/adapters/document_adapter.dart
+++ /dev/null
@@ -1,56 +0,0 @@
-import '../markup_render_object.dart';
-import '../server_binding.dart';
-
-mixin DocumentStructureMixin on RenderAdapter {
-  (MarkupRenderElement, MarkupRenderElement, MarkupRenderElement) createDocumentStructure(MarkupRenderObject root) {
-    var html = root.children.findWhere<MarkupRenderElement>((c) => c.tag == 'html')?.node as MarkupRenderElement?;
-    if (html == null) {
-      final range = root.children.range();
-      root.children.insertAfter(html = root.createChildRenderElement('html')..children.insertNodeAfter(range));
-    }
-
-    final headNode = html.children.findWhere<MarkupRenderElement>((c) => c.tag == 'head');
-    var head = headNode?.node as MarkupRenderElement?;
-    final bodyNode = html.children.findWhere<MarkupRenderElement>((c) => c.tag == 'body');
-    var body = bodyNode?.node as MarkupRenderElement?;
-
-    if (head == null) {
-      head = html.createChildRenderElement('head');
-
-      if (body == null) {
-        final range = html.children.range();
-        html.children.insertAfter(head);
-        html.children.insertBefore(body = html.createChildRenderElement('body')..children.insertNodeAfter(range));
-      } else {
-        html.children.insertAfter(head);
-      }
-    } else {
-      if (body == null) {
-        final rangeBefore = html.children.range(endBefore: headNode);
-        final rangeAfter = html.children.range(startAfter: headNode);
-
-        body = html.createChildRenderElement('body');
-        body.children
-          ..insertNodeAfter(rangeAfter)
-          ..insertNodeAfter(rangeBefore);
-        html.children.insertAfter(body, after: head);
-      }
-    }
-
-    return (html, head, body);
-  }
-}
-
-class DocumentAdapter extends RenderAdapter with DocumentStructureMixin {
-  @override
-  (MarkupRenderObject, MarkupRenderObject, MarkupRenderObject) apply(MarkupRenderObject root) {
-    final (html, head, body) = createDocumentStructure(root);
-
-    final doctype = root.children.findWhere<MarkupRenderText>((r) => r.text.startsWith('<!DOCTYPE') && r.rawHtml);
-    if (doctype == null) {
-      root.children.insertAfter(root.createChildRenderText('<!DOCTYPE html>', true));
-    }
-
-    return (html, head, body);
-  }
-}
diff --git a/packages/jaspr/lib/src/server/adapters/document_structure_helper.dart b/packages/jaspr/lib/src/server/adapters/document_structure_helper.dart
new file mode 100644
index 000000000..14dca8a25
--- /dev/null
+++ b/packages/jaspr/lib/src/server/adapters/document_structure_helper.dart
@@ -0,0 +1,51 @@
+import '../markup_render_object.dart';
+
+({MarkupRenderElement html, MarkupRenderElement head, MarkupRenderElement body}) createDocumentStructure(
+  MarkupRenderObject root, [
+  bool includeDoctype = false,
+]) {
+  var html = root.children.findWhere<MarkupRenderElement>((c) => c.tag == 'html')?.node as MarkupRenderElement?;
+  if (html == null) {
+    final range = root.children.range();
+    html = root.createChildRenderElement('html');
+    html.children.insertNodeAfter(range);
+    root.children.insertAfter(html);
+  }
+
+  final headNode = html.children.findWhere<MarkupRenderElement>((c) => c.tag == 'head');
+  var head = headNode?.node as MarkupRenderElement?;
+  final bodyNode = html.children.findWhere<MarkupRenderElement>((c) => c.tag == 'body');
+  var body = bodyNode?.node as MarkupRenderElement?;
+
+  if (head == null) {
+    head = html.createChildRenderElement('head');
+
+    if (body == null) {
+      final range = html.children.range();
+      html.children.insertAfter(head);
+      html.children.insertBefore(body = html.createChildRenderElement('body')..children.insertNodeAfter(range));
+    } else {
+      html.children.insertAfter(head);
+    }
+  } else {
+    if (body == null) {
+      final rangeBefore = html.children.range(endBefore: headNode);
+      final rangeAfter = html.children.range(startAfter: headNode);
+
+      body = html.createChildRenderElement('body');
+      body.children
+        ..insertNodeAfter(rangeAfter)
+        ..insertNodeAfter(rangeBefore);
+      html.children.insertAfter(body, after: head);
+    }
+  }
+
+  if (includeDoctype) {
+    final doctype = root.children.findWhere<MarkupRenderText>((r) => r.text.startsWith('<!DOCTYPE') && r.rawHtml);
+    if (doctype == null) {
+      root.children.insertAfter(root.createChildRenderText('<!DOCTYPE html>', true));
+    }
+  }
+
+  return (html: html, head: head, body: body);
+}
diff --git a/packages/jaspr/lib/src/server/adapters/element_boundary_adapter.dart b/packages/jaspr/lib/src/server/adapters/element_boundary_adapter.dart
index 849265008..04d6bd0a8 100644
--- a/packages/jaspr/lib/src/server/adapters/element_boundary_adapter.dart
+++ b/packages/jaspr/lib/src/server/adapters/element_boundary_adapter.dart
@@ -8,16 +8,22 @@ import '../server_binding.dart';
 export '../child_nodes.dart' show ChildListRange, ChildNodeData;
 
 abstract class ElementBoundaryAdapter extends RenderAdapter {
-  ElementBoundaryAdapter(this.element);
+  ElementBoundaryAdapter(this.element, {this.priority = 0});
 
   final Element element;
 
+  /// Priority of this boundary.
+  ///
+  /// When multiple adapters are applied to the same element, higher priority adapters are
+  /// wrapping lower priority ones, independent of the order they are applied in.
+  final int priority;
+
   late ChildListRange range;
 
   @override
   FutureOr<void> prepare() {
     final parent = element.parentRenderObjectElement!.renderObject as MarkupRenderObject;
-    range = parent.children.wrapElement(element);
+    range = parent.children.wrapElement(element, priority);
     prepareBoundary(range);
   }
 
diff --git a/packages/jaspr/lib/src/server/adapters/global_styles_adapter.dart b/packages/jaspr/lib/src/server/adapters/global_styles_adapter.dart
index 77eecdf7e..68f50260f 100644
--- a/packages/jaspr/lib/src/server/adapters/global_styles_adapter.dart
+++ b/packages/jaspr/lib/src/server/adapters/global_styles_adapter.dart
@@ -2,10 +2,6 @@ import '../../../server.dart';
 import '../../dom/styles/rules.dart' show StyleRulesRender;
 
 class GlobalStylesAdapter extends HeadScopeAdapter {
-  GlobalStylesAdapter(this.binding);
-
-  final ServerAppBinding binding;
-
   @override
   bool applyHead(MarkupRenderObject head) {
     var stylesId = binding.options.stylesId;
diff --git a/packages/jaspr/lib/src/server/adapters/server_component_adapter.dart b/packages/jaspr/lib/src/server/adapters/server_component_adapter.dart
new file mode 100644
index 000000000..d43183719
--- /dev/null
+++ b/packages/jaspr/lib/src/server/adapters/server_component_adapter.dart
@@ -0,0 +1,18 @@
+import '../../dom/validator.dart';
+import '../markup_render_object.dart';
+import 'element_boundary_adapter.dart';
+
+class ServerComponentAdapter extends ElementBoundaryAdapter {
+  ServerComponentAdapter(this.id, super.element);
+
+  final int id;
+
+  @override
+  void applyBoundary(ChildListRange range) {
+    final startMarker = MarkupRenderText('<!--s${DomValidator.clientMarkerPrefix}$id-->', true);
+    final endMarker = MarkupRenderText('<!--/s${DomValidator.clientMarkerPrefix}$id-->', true);
+
+    range.start.insertNext(ChildNodeData(startMarker));
+    range.end.insertPrev(ChildNodeData(endMarker));
+  }
+}
diff --git a/packages/jaspr/lib/src/server/child_nodes.dart b/packages/jaspr/lib/src/server/child_nodes.dart
index 37dec6ba7..cf33ab93f 100644
--- a/packages/jaspr/lib/src/server/child_nodes.dart
+++ b/packages/jaspr/lib/src/server/child_nodes.dart
@@ -10,9 +10,10 @@ class ChildNodeData extends BaseChildNode {
 }
 
 class ChildNodeBoundary extends BaseChildNode {
-  ChildNodeBoundary(this.element);
+  ChildNodeBoundary(this.element, [this.priority = 0]);
 
   final Element element;
+  final int priority;
   late final ChildListRange range;
 }
 
@@ -181,7 +182,7 @@ class ChildList with Iterable<MarkupRenderObject> {
     return null;
   }
 
-  ChildListRange wrapElement(Element element) {
+  ChildListRange wrapElement(Element element, [int priority = 0]) {
     final node = find(element.slot.target!.renderObject as MarkupRenderObject);
     assert(node != null, 'Element not found in child list');
 
@@ -191,16 +192,21 @@ class ChildList with Iterable<MarkupRenderObject> {
     while (true) {
       if (startBefore.prev case final ChildNodeBoundary startPrev when startPrev.range.start == startPrev) {
         if (startPrev.element == element) {
-          // Wrapping the same element, apply reverse order
-          startBefore = startPrev;
-          continue;
+          if (priority >= startPrev.priority) {
+            // Wrapping the same element with higher priority, apply around existing wrapper
+            startBefore = startPrev;
+            continue;
+          } else {
+            // Already correct order
+            break;
+          }
         }
         assert(startPrev.element.depth != element.depth);
         if (element.depth > startPrev.element.depth) {
-          // element is a descendant of startPrev, correct order
+          // Element is a descendant of startPrev, correct order
           break;
         } else {
-          // element is an ancestor of startPrev, incorrect order
+          // Element is an ancestor of startPrev, incorrect order
           startBefore = startPrev;
           continue;
         }
@@ -210,16 +216,21 @@ class ChildList with Iterable<MarkupRenderObject> {
     while (true) {
       if (endAfter.next case final ChildNodeBoundary endNext when endNext.range.end == endNext) {
         if (endNext.element == element) {
-          // Wrapping the same element, apply reverse order
-          endAfter = endNext;
-          continue;
+          if (priority >= endNext.priority) {
+            // Wrapping the same element with higher priority, apply around existing wrapper
+            endAfter = endNext;
+            continue;
+          } else {
+            // Already correct order
+            break;
+          }
         }
         assert(endNext.element.depth != element.depth);
         if (element.depth > endNext.element.depth) {
-          // element is a descendant of startPrev, correct order
+          // Element is a descendant of endNext, correct order
           break;
         } else {
-          // element is an ancestor of startPrev, incorrect order
+          // Element is an ancestor of endNext, incorrect order
           endAfter = endNext;
           continue;
         }
@@ -227,8 +238,8 @@ class ChildList with Iterable<MarkupRenderObject> {
       break;
     }
 
-    final start = ChildNodeBoundary(element);
-    final end = ChildNodeBoundary(element);
+    final start = ChildNodeBoundary(element, priority);
+    final end = ChildNodeBoundary(element, priority);
 
     startBefore.insertPrev(start);
     endAfter.insertNext(end);
diff --git a/packages/jaspr/lib/src/server/components/client_component_registry.dart b/packages/jaspr/lib/src/server/components/client_component_registry.dart
new file mode 100644
index 000000000..06f5f4d5d
--- /dev/null
+++ b/packages/jaspr/lib/src/server/components/client_component_registry.dart
@@ -0,0 +1,52 @@
+import '../../../jaspr.dart';
+import '../adapters/client_component_adapter.dart';
+import '../adapters/client_script_adapter.dart';
+import '../options.dart';
+import '../server_binding.dart';
+
+class ClientComponentRegistry extends ObserverComponent {
+  ClientComponentRegistry({required super.child, super.key});
+
+  @override
+  ObserverElement createElement() => ClientComponentRegistryElement(this);
+}
+
+class ClientComponentRegistryElement extends ObserverElement {
+  ClientComponentRegistryElement(super.component);
+
+  bool _didHandleClientScript = false;
+
+  final Map<Element, ClientTarget> clientElements = {};
+
+  int serverElementNum = 1;
+  final Map<Component, int> serverComponents = {};
+  final Map<int, Element?> serverElements = {0: null};
+
+  @override
+  void willRebuildElement(Element element) {
+    final binding = this.binding as ServerAppBinding;
+
+    final entry = binding.options.clients?[element.component.runtimeType];
+    if (entry == null) {
+      return;
+    }
+
+    if (!_didHandleClientScript) {
+      if (binding.options.clientId case final clientId?) {
+        binding.addRenderAdapter(ClientScriptAdapter(clientId));
+      } else if (kDebugMode) {
+        binding.addRenderAdapter(NoClientScriptAdapter());
+      }
+      _didHandleClientScript = true;
+    }
+
+    clientElements[element] = entry;
+    binding.addRenderAdapter(ClientComponentAdapter(this, entry, element));
+  }
+
+  @override
+  void didRebuildElement(Element element) {}
+
+  @override
+  void didUnmountElement(Element element) {}
+}
diff --git a/packages/jaspr/lib/src/server/options.dart b/packages/jaspr/lib/src/server/options.dart
index 7d3d58b9c..ace8ac840 100644
--- a/packages/jaspr/lib/src/server/options.dart
+++ b/packages/jaspr/lib/src/server/options.dart
@@ -53,8 +53,8 @@ final class ClientTarget<T extends Component> {
 
   const ClientTarget(this.name, {this.params});
 
-  String? dataFor(T component) {
+  String? dataFor(T component, {Object? Function(Object?)? encode}) {
     if (params == null) return null;
-    return const DomValidator().escapeMarkerText(jsonEncode(params!(component)));
+    return const DomValidator().escapeMarkerText(jsonEncode(params!(component), toEncodable: encode));
   }
 }
diff --git a/packages/jaspr/lib/src/server/server_app.dart b/packages/jaspr/lib/src/server/server_app.dart
index 0bf1ba9e8..ffa7e32db 100644
--- a/packages/jaspr/lib/src/server/server_app.dart
+++ b/packages/jaspr/lib/src/server/server_app.dart
@@ -59,6 +59,7 @@ final class ServerApp {
     _client = client;
 
     _reassembleController.add(Object());
+    reloadClients();
 
     if (isFirstStartup) {
       print('[INFO] Running server in ${kDebugMode ? 'debug' : 'release'} mode');
@@ -108,4 +109,12 @@ final class ServerApp {
     final postWithClient = _client?.post ?? http.post;
     await postWithClient(Uri.http('localhost:$jasprProxyPort', r'$jasprMessageHandler'), body: jsonEncode(message));
   }
+
+  static void reloadClients([String? route]) {
+    for (final connection in ClientConnection.connections) {
+      if (route == null || route == connection.currentRoute) {
+        connection.reload();
+      }
+    }
+  }
 }
diff --git a/packages/jaspr/lib/src/server/server_binding.dart b/packages/jaspr/lib/src/server/server_binding.dart
index e43fc6a65..a452e01ad 100644
--- a/packages/jaspr/lib/src/server/server_binding.dart
+++ b/packages/jaspr/lib/src/server/server_binding.dart
@@ -7,10 +7,10 @@ import 'dart:typed_data';
 import 'package:meta/meta.dart';
 
 import '../../jaspr.dart';
-import 'adapters/client_component_adapter.dart';
-import 'adapters/document_adapter.dart';
+import 'adapters/document_structure_helper.dart';
 import 'adapters/global_styles_adapter.dart';
 import 'async_build_owner.dart';
+import 'components/client_component_registry.dart';
 import 'markup_render_object.dart';
 import 'options.dart';
 import 'render_functions.dart';
@@ -19,7 +19,9 @@ typedef FileLoader = Future<String?> Function(String);
 
 /// Global component binding for the server.
 class ServerAppBinding extends AppBinding with ComponentsBinding {
-  ServerAppBinding(this.request, {required FileLoader loadFile}) : _fileLoader = loadFile;
+  ServerAppBinding(this.request, {required FileLoader loadFile}) : _fileLoader = loadFile {
+    addRenderAdapter(GlobalStylesAdapter());
+  }
 
   final RequestLike request;
   final FileLoader _fileLoader;
@@ -66,23 +68,37 @@ class ServerAppBinding extends AppBinding with ComponentsBinding {
     }
 
     final root = rootElement.renderObject as MarkupRenderObject;
-    final adapters = [..._adapters.reversed, GlobalStylesAdapter(this), if (!standalone) DocumentAdapter()];
 
-    for (final adapter in adapters.reversed) {
-      final r = adapter.prepare();
+    // Not using for each to allow for new adapters to be added during iteration.
+    for (var i = 0; i < _adapters.length; i++) {
+      final r = _adapters[i].prepare();
       if (r is Future) {
         await r;
       }
     }
 
-    for (final adapter in adapters) {
+    for (final adapter in _adapters.reversed) {
       adapter.apply(root);
     }
 
+    if (!standalone) {
+      createDocumentStructure(root, true);
+    }
+
     if (_responseBodyOverride case final override?) {
       return override;
     }
 
+    if (!standalone && request.headers.singleValues['X-Jaspr-Reload'] == 'true') {
+      final body = (root.children.findWhere<MarkupRenderElement>((c) => c.tag == 'html')?.node as MarkupRenderElement?)
+          ?.children
+          .findWhere<MarkupRenderElement>((c) => c.tag == 'body')
+          ?.node;
+      if (body != null) {
+        return utf8.encode(body.renderToHtml());
+      }
+    }
+
     return utf8.encode(root.renderToHtml());
   }
 
@@ -118,7 +134,7 @@ class ServerAppBinding extends AppBinding with ComponentsBinding {
 
   void addRenderAdapter(RenderAdapter adapter) {
     if (_adapters.contains(adapter)) return;
-    _adapters.add(adapter);
+    _adapters.add(adapter..binding = this);
   }
 
   ServerOptions get options => _options!;
@@ -138,6 +154,7 @@ class ServerAppBinding extends AppBinding with ComponentsBinding {
 }
 
 abstract class RenderAdapter {
+  late ServerAppBinding binding;
   FutureOr<void> prepare() {}
   void apply(MarkupRenderObject root) {}
 }
diff --git a/packages/jaspr/lib/src/server/server_handler.dart b/packages/jaspr/lib/src/server/server_handler.dart
index db1aebb2f..d5f6df631 100644
--- a/packages/jaspr/lib/src/server/server_handler.dart
+++ b/packages/jaspr/lib/src/server/server_handler.dart
@@ -1,4 +1,5 @@
 import 'dart:async';
+import 'dart:collection';
 import 'dart:convert';
 import 'dart:io';
 
@@ -8,6 +9,7 @@ import 'package:shelf/shelf.dart';
 import 'package:shelf_gzip/shelf_gzip.dart';
 import 'package:shelf_proxy/shelf_proxy.dart';
 import 'package:shelf_static/shelf_static.dart';
+import 'package:sse/server/sse_handler.dart';
 
 import '../foundation/constants.dart';
 import 'options.dart';
@@ -67,6 +69,16 @@ Handler createHandler(
 
   var cascade = Cascade();
 
+  if (kDebugMode) {
+    final sseHandler = SseHandler(Uri(path: r'/$jasprEventsHandler'));
+    sseHandler.connections.rest.listen(
+      (connection) => ClientConnection._initialize(connection),
+      onDone: () {},
+    );
+
+    cascade = cascade.add(sseHandler.handler);
+  }
+
   if (jasprProxyPort != null) {
     cascade = cascade.add(_sseProxyHandler(client, jasprProxyPort!));
   }
@@ -184,3 +196,34 @@ Handler _sseProxyHandler(http.Client client, String webPort) {
 }
 
 // coverage:ignore-end
+
+class ClientConnection {
+  ClientConnection._(this._connection) {
+    _connection.stream.listen(
+      (event) {
+        final message = jsonDecode(event);
+        if (message case ['RouteInfo', final String route]) {
+          currentRoute = route;
+        }
+      },
+      onDone: () {
+        _connections.remove(this);
+      },
+    );
+  }
+
+  final SseConnection _connection;
+  String? currentRoute;
+
+  static void _initialize(SseConnection connection) {
+    final client = ClientConnection._(connection);
+    _connections.add(client);
+  }
+
+  static List<ClientConnection> get connections => UnmodifiableListView(_connections);
+  static final List<ClientConnection> _connections = [];
+
+  void reload() {
+    _connection.sink.add(jsonEncode(['ReloadRequest']));
+  }
+}
diff --git a/packages/jaspr/pubspec.yaml b/packages/jaspr/pubspec.yaml
index 4d779ed96..b9e819503 100644
--- a/packages/jaspr/pubspec.yaml
+++ b/packages/jaspr/pubspec.yaml
@@ -29,6 +29,7 @@ dependencies:
   shelf_gzip: ^4.0.0
   shelf_proxy: ^1.0.1
   shelf_static: ^1.1.0
+  sse: ^4.1.8
   universal_web: ^1.1.0
 
 dev_dependencies:
diff --git a/packages/jaspr/test/client/hydration/hydration_browser_test.dart b/packages/jaspr/test/client/hydration/hydration_browser_test.dart
index e96e5f1a9..83452ca0c 100644
--- a/packages/jaspr/test/client/hydration/hydration_browser_test.dart
+++ b/packages/jaspr/test/client/hydration/hydration_browser_test.dart
@@ -110,7 +110,7 @@ void main() {
       Jaspr.initializeApp(
         options: ClientOptions(
           clients: {
-            'app': ClientLoader((params) => p([Component.text('Hello ${params['name']}')])),
+            'app': ClientLoader((params) => p([Component.text('Hello ${params.get<String>('name')}')])),
           },
         ),
       );
@@ -124,5 +124,190 @@ void main() {
       expect(p2Element.parentNode, equals(divElement));
       expect(p2Element.textContent, equals('Hello B'));
     });
+
+    testClient('should find and hydrate client component with nested server component', (tester) async {
+      final marker = DomValidator.clientMarkerPrefix;
+      window.document.body!.innerHTML =
+          '<div>'
+                  '  <!--${marker}app data={"child":"s${marker}1"}-->'
+                  '  <p>'
+                  '    <!--s${marker}1-->'
+                  '    <span>Server Element</span>'
+                  '    <!--/s${marker}1-->'
+                  '  </p>'
+                  '  <!--/${marker}app-->'
+                  '</div>'
+              .toJS;
+
+      final divElement = window.document.querySelector('body div')!;
+      final pElement = window.document.querySelector('body p')!;
+      final spanElement = window.document.querySelector('body span')!;
+
+      expect(divElement.parentNode, equals(window.document.body));
+      expect(pElement.parentNode, equals(divElement));
+      expect(spanElement.parentNode, equals(pElement));
+      expect(spanElement.textContent, equals('Server Element'));
+
+      Jaspr.initializeApp(
+        options: ClientOptions(
+          clients: {
+            'app': ClientLoader((params) {
+              return p(classes: 'hydrated', [
+                params.mount(params.get<String>('child')),
+              ]);
+            }),
+          },
+        ),
+      );
+
+      tester.pumpComponent(const ClientApp());
+      await pumpEventQueue();
+
+      expect(divElement.parentNode, equals(window.document.body));
+      expect(pElement.parentNode, equals(divElement));
+      expect(pElement.className, 'hydrated');
+      expect(spanElement.parentNode, equals(pElement));
+      expect(spanElement.textContent, equals('Server Element'));
+    });
+
+    testClient('should find and hydrate nested client component inside server component', (tester) async {
+      final marker = DomValidator.clientMarkerPrefix;
+      window.document.body!.innerHTML =
+          '<div>'
+                  '  <!--${marker}app data={"child":"s${marker}1"}-->'
+                  '  <div>'
+                  '    <!--s${marker}1-->'
+                  '    <p>'
+                  '      <span>Server Element</span>'
+                  '      <!--${marker}subapp data={"name":"Nested Client"}-->'
+                  '      <strong>Fallback</strong>'
+                  '      <!--/${marker}subapp-->'
+                  '    </p>'
+                  '    <!--/s${marker}1-->'
+                  '  </div>'
+                  '  <!--/${marker}app-->'
+                  '</div>'
+              .toJS;
+
+      final divElement = window.document.querySelector('body div')!;
+      final outerDivElement = window.document.querySelector('body div > div')!;
+      final pElement = window.document.querySelector('body p')!;
+      final spanElement = window.document.querySelector('body span')!;
+      final strongElement = window.document.querySelector('body strong')!;
+
+      expect(divElement.parentNode, equals(window.document.body));
+      expect(outerDivElement.parentNode, equals(divElement));
+      expect(pElement.parentNode, equals(outerDivElement));
+      expect(spanElement.parentNode, equals(pElement));
+      expect(strongElement.parentNode, equals(pElement));
+      expect(strongElement.textContent, equals('Fallback'));
+
+      Jaspr.initializeApp(
+        options: ClientOptions(
+          clients: {
+            'app': ClientLoader((params) {
+              return div(classes: 'hydrated', [params.mount(params.get<String>('child'))]);
+            }),
+            'subapp': ClientLoader((params) {
+              return strong(classes: 'hydrated', [Component.text('Hello ${params.get<String>('name')}')]);
+            }),
+          },
+        ),
+      );
+
+      runApp(const ClientApp());
+      await pumpEventQueue();
+
+      expect(divElement.parentNode, equals(window.document.body));
+      expect(outerDivElement.parentNode, equals(divElement));
+      expect(outerDivElement.className, 'hydrated');
+      expect(pElement.parentNode, equals(outerDivElement));
+      expect(spanElement.parentNode, equals(pElement));
+      expect(strongElement.parentNode, equals(pElement));
+      expect(strongElement.className, 'hydrated');
+      expect(strongElement.textContent, equals('Hello Nested Client'));
+    });
+
+    testClient('should reload client components and update parameters/sync state on performReload', (tester) async {
+      final marker = DomValidator.clientMarkerPrefix;
+      window.document.body!.innerHTML =
+          '<div>'
+                  '  <!--${marker}app data={"name": "A"}-->'
+                  '  <!--\${"count": 1}-->'
+                  '  <p>Fallback</p>'
+                  '  <!--/${marker}app-->'
+                  '</div>'
+              .toJS;
+
+      final divElement = window.document.querySelector('body div')!;
+      final pElement = window.document.querySelector('body p')!;
+
+      expect(divElement.parentNode, equals(window.document.body));
+      expect(pElement.parentNode, equals(divElement));
+      expect(pElement.textContent, equals('Fallback'));
+
+      Jaspr.initializeApp(
+        options: ClientOptions(
+          clients: {
+            'app': ClientLoader((params) {
+              return ReloadTestComponent(name: params.get<String>('name'));
+            }),
+          },
+        ),
+      );
+
+      tester.pumpComponent(const ClientApp());
+      await pumpEventQueue();
+
+      final pElementHydrated = window.document.querySelector('body p')!;
+      expect(pElementHydrated.textContent, equals('Hello A, Count: 1'));
+
+      // Perform reload with updated options/sync state
+      final newBody = window.document.createElement('body') as HTMLBodyElement;
+      newBody.innerHTML =
+          '<div>'
+                  '  <!--${marker}app data={"name": "B"}-->'
+                  '  <!--\${"count": 2}-->'
+                  '  <p>Fallback</p>'
+                  '  <!--/${marker}app-->'
+                  '</div>'
+              .toJS;
+
+      final rootElement = tester.binding.rootElement!;
+      final rootRenderObject = rootElement.renderObject as RootDomRenderObject;
+      rootRenderObject.setRootNode(newBody);
+      rootElement.owner.performReload(rootElement);
+
+      window.document.body!.replaceWith(newBody);
+      await pumpEventQueue();
+
+      final pElementReloaded = window.document.querySelector('body p')!;
+      expect(pElementReloaded.textContent, equals('Hello B, Count: 2'));
+    });
   });
 }
+
+class ReloadTestComponent extends StatefulComponent {
+  const ReloadTestComponent({required this.name, super.key});
+  final String name;
+  @override
+  State<ReloadTestComponent> createState() => ReloadTestComponentState();
+}
+
+class ReloadTestComponentState extends State<ReloadTestComponent>
+    with SyncStateMixin<ReloadTestComponent, Map<String, dynamic>> {
+  int count = 0;
+
+  @override
+  void updateState(Map<String, dynamic> value) {
+    count = value['count'] as int;
+  }
+
+  @override
+  Map<String, dynamic> getState() => {'count': count};
+
+  @override
+  Component build(BuildContext context) {
+    return p([Component.text('Hello ${component.name}, Count: $count')]);
+  }
+}
diff --git a/packages/jaspr/test/client/slotted_child_view_test.dart b/packages/jaspr/test/client/slotted_child_view_test.dart
new file mode 100644
index 000000000..3912bfbaf
--- /dev/null
+++ b/packages/jaspr/test/client/slotted_child_view_test.dart
@@ -0,0 +1,73 @@
+@TestOn('browser')
+library;
+
+import 'dart:js_interop';
+
+import 'package:jaspr/client.dart';
+import 'package:jaspr/dom.dart';
+import 'package:jaspr_test/client_test.dart';
+import 'package:universal_web/web.dart';
+
+void main() {
+  group('slotted child view', () {
+    testClient('renders child at slot', (tester) async {
+      window.document.body!.innerHTML = '<div><p>Hello World</p></div>'.toJS;
+
+      tester.pumpComponent(
+        SlottedChildView(
+          slots: [
+            ChildSlot.fromQuery('p', child: Component.text('Hello Test')),
+          ],
+        ),
+      );
+
+      expect(
+        (window.document.body!.innerHTML as JSString).toDart,
+        '<div><p>Hello Test</p></div>',
+      );
+    });
+
+    testClient('renders multiple slots', (tester) async {
+      window.document.body!.innerHTML =
+          '<div><div id="header">Header</div><main>Content</main><footer>Footer</footer></div>'.toJS;
+
+      tester.pumpComponent(
+        SlottedChildView(
+          slots: [
+            ChildSlot.fromQuery('#header', child: Component.text('Test Header')),
+            ChildSlot.fromQuery('footer', child: Component.text('Test Footer')),
+          ],
+        ),
+      );
+
+      expect(
+        (window.document.body!.innerHTML as JSString).toDart,
+        '<div><div id="header">Test Header</div><main>Content</main><footer>Test Footer</footer></div>',
+      );
+    });
+
+    testClient('uses inherited dom params', (tester) async {
+      window.document.body!.innerHTML = '<div><div id="header">Header</div><main>Content</main></div>'.toJS;
+
+      tester.pumpComponent(
+        Component.apply(
+          classes: 'outer',
+          child: Component.apply(
+            target: ApplyTarget.descendantWith(tag: 'div'),
+            classes: 'box',
+            child: SlottedChildView(
+              slots: [
+                ChildSlot.fromQuery('main', child: div([Component.text('Test Content')])),
+              ],
+            ),
+          ),
+        ),
+      );
+
+      expect(
+        (window.document.body!.innerHTML as JSString).toDart,
+        '<div class="box outer"><div id="header" class="box">Header</div><main><div class="box">Test Content</div></main></div>',
+      );
+    });
+  });
+}
diff --git a/packages/jaspr/test/server/child_list_test.dart b/packages/jaspr/test/server/child_list_test.dart
index bf00a221e..4c243a09c 100644
--- a/packages/jaspr/test/server/child_list_test.dart
+++ b/packages/jaspr/test/server/child_list_test.dart
@@ -460,7 +460,7 @@ void main() {
       node = node?.next;
       expect(node, isA<ChildNodeData>().having((n) => n.node, 'node', hasTag('body')));
       node = node?.next;
-      //expect(node, equals(range.end));
+      expect(node, equals(range.end));
       expect(
         node,
         isA<ChildNodeBoundary>()
@@ -479,6 +479,230 @@ void main() {
       expect(node, equals(children.lastNode));
       expect(node, isA<ChildNode>().having((n) => n.next, 'next', isNull));
     });
+
+    test('wraps same element multiple times with default priority', () async {
+      final r = await renderServerApp(
+        Component.element(
+          tag: 'html',
+          children: [
+            Component.element(tag: 'head', children: []),
+            Component.element(tag: 'body', children: []),
+          ],
+        ),
+      );
+
+      final root = r.renderObject as MarkupRenderObject;
+      final children = root.children.first.children;
+
+      // Check children using the underlying linked list
+      ChildNode? node = children.firstNode;
+      expect(node, isA<ChildNode>().having((n) => n.prev, 'prev', isNull));
+      node = node.next;
+      expect(node, isA<ChildNodeData>().having((n) => n.node, 'node', hasTag('head')));
+      node = node?.next;
+      expect(node, isA<ChildNodeData>().having((n) => n.node, 'node', hasTag('body')));
+      node = node?.next;
+      expect(node, equals(children.lastNode));
+      expect(node, isA<ChildNode>().having((n) => n.next, 'next', isNull));
+
+      final bodyElement = findTag(r, 'body')!;
+
+      expect(bodyElement.renderObject, hasTag('body'));
+
+      final range = children.wrapElement(bodyElement);
+
+      // Check range using iterator
+      expect(range, hasLength(1));
+      expect(range.first, hasTag('body'));
+
+      // Check changed children using the underlying linked list
+      node = children.firstNode;
+      expect(node, isA<ChildNode>().having((n) => n.prev, 'prev', isNull));
+      node = node.next;
+      expect(node, isA<ChildNodeData>().having((n) => n.node, 'node', hasTag('head')));
+      node = node?.next;
+      expect(node, equals(range.start));
+      expect(
+        node,
+        isA<ChildNodeBoundary>()
+            .having((n) => n.element, 'element', bodyElement)
+            .having((n) => n.range, 'range', range),
+      );
+      node = node?.next;
+      expect(node, isA<ChildNodeData>().having((n) => n.node, 'node', hasTag('body')));
+      node = node?.next;
+      expect(node, equals(range.end));
+      expect(
+        node,
+        isA<ChildNodeBoundary>()
+            .having((n) => n.element, 'element', bodyElement)
+            .having((n) => n.range, 'range', range),
+      );
+      node = node?.next;
+      expect(node, equals(children.lastNode));
+      expect(node, isA<ChildNode>().having((n) => n.next, 'next', isNull));
+
+      final range2 = children.wrapElement(bodyElement);
+
+      // Check range using iterator
+      expect(range2, hasLength(1));
+      expect(range2.first, hasTag('body'));
+
+      // Check changed children using the underlying linked list
+      node = children.firstNode;
+      expect(node, isA<ChildNode>().having((n) => n.prev, 'prev', isNull));
+      node = node.next;
+      expect(node, isA<ChildNodeData>().having((n) => n.node, 'node', hasTag('head')));
+      node = node?.next;
+      expect(node, equals(range2.start));
+      expect(
+        node,
+        isA<ChildNodeBoundary>()
+            .having((n) => n.element, 'element', bodyElement)
+            .having((n) => n.range, 'range', range2),
+      );
+      node = node?.next;
+      expect(node, equals(range.start));
+      expect(
+        node,
+        isA<ChildNodeBoundary>()
+            .having((n) => n.element, 'element', bodyElement)
+            .having((n) => n.range, 'range', range),
+      );
+      node = node?.next;
+      expect(node, isA<ChildNodeData>().having((n) => n.node, 'node', hasTag('body')));
+      node = node?.next;
+      expect(node, equals(range.end));
+      expect(
+        node,
+        isA<ChildNodeBoundary>()
+            .having((n) => n.element, 'element', bodyElement)
+            .having((n) => n.range, 'range', range),
+      );
+      node = node?.next;
+      expect(node, equals(range2.end));
+      expect(
+        node,
+        isA<ChildNodeBoundary>()
+            .having((n) => n.element, 'element', bodyElement)
+            .having((n) => n.range, 'range', range2),
+      );
+      node = node?.next;
+      expect(node, equals(children.lastNode));
+      expect(node, isA<ChildNode>().having((n) => n.next, 'next', isNull));
+    });
+
+    test('wraps same element multiple times with out-of-order priority', () async {
+      final r = await renderServerApp(
+        Component.element(
+          tag: 'html',
+          children: [
+            Component.element(tag: 'head', children: []),
+            Component.element(tag: 'body', children: []),
+          ],
+        ),
+      );
+
+      final root = r.renderObject as MarkupRenderObject;
+      final children = root.children.first.children;
+
+      // Check children using the underlying linked list
+      ChildNode? node = children.firstNode;
+      expect(node, isA<ChildNode>().having((n) => n.prev, 'prev', isNull));
+      node = node.next;
+      expect(node, isA<ChildNodeData>().having((n) => n.node, 'node', hasTag('head')));
+      node = node?.next;
+      expect(node, isA<ChildNodeData>().having((n) => n.node, 'node', hasTag('body')));
+      node = node?.next;
+      expect(node, equals(children.lastNode));
+      expect(node, isA<ChildNode>().having((n) => n.next, 'next', isNull));
+
+      final bodyElement = findTag(r, 'body')!;
+
+      expect(bodyElement.renderObject, hasTag('body'));
+
+      final range = children.wrapElement(bodyElement, 1);
+
+      // Check range using iterator
+      expect(range, hasLength(1));
+      expect(range.first, hasTag('body'));
+
+      // Check changed children using the underlying linked list
+      node = children.firstNode;
+      expect(node, isA<ChildNode>().having((n) => n.prev, 'prev', isNull));
+      node = node.next;
+      expect(node, isA<ChildNodeData>().having((n) => n.node, 'node', hasTag('head')));
+      node = node?.next;
+      expect(node, equals(range.start));
+      expect(
+        node,
+        isA<ChildNodeBoundary>()
+            .having((n) => n.element, 'element', bodyElement)
+            .having((n) => n.range, 'range', range),
+      );
+      node = node?.next;
+      expect(node, isA<ChildNodeData>().having((n) => n.node, 'node', hasTag('body')));
+      node = node?.next;
+      expect(node, equals(range.end));
+      expect(
+        node,
+        isA<ChildNodeBoundary>()
+            .having((n) => n.element, 'element', bodyElement)
+            .having((n) => n.range, 'range', range),
+      );
+      node = node?.next;
+      expect(node, equals(children.lastNode));
+      expect(node, isA<ChildNode>().having((n) => n.next, 'next', isNull));
+
+      final range2 = children.wrapElement(bodyElement, 0);
+
+      // Check range using iterator
+      expect(range2, hasLength(1));
+      expect(range2.first, hasTag('body'));
+
+      // Check changed children using the underlying linked list
+      node = children.firstNode;
+      expect(node, isA<ChildNode>().having((n) => n.prev, 'prev', isNull));
+      node = node.next;
+      expect(node, isA<ChildNodeData>().having((n) => n.node, 'node', hasTag('head')));
+      node = node?.next;
+      expect(node, equals(range.start));
+      expect(
+        node,
+        isA<ChildNodeBoundary>()
+            .having((n) => n.element, 'element', bodyElement)
+            .having((n) => n.range, 'range', range),
+      );
+      node = node?.next;
+      expect(node, equals(range2.start));
+      expect(
+        node,
+        isA<ChildNodeBoundary>()
+            .having((n) => n.element, 'element', bodyElement)
+            .having((n) => n.range, 'range', range2),
+      );
+      node = node?.next;
+      expect(node, isA<ChildNodeData>().having((n) => n.node, 'node', hasTag('body')));
+      node = node?.next;
+      expect(node, equals(range2.end));
+      expect(
+        node,
+        isA<ChildNodeBoundary>()
+            .having((n) => n.element, 'element', bodyElement)
+            .having((n) => n.range, 'range', range2),
+      );
+      node = node?.next;
+      expect(node, equals(range.end));
+      expect(
+        node,
+        isA<ChildNodeBoundary>()
+            .having((n) => n.element, 'element', bodyElement)
+            .having((n) => n.range, 'range', range),
+      );
+      node = node?.next;
+      expect(node, equals(children.lastNode));
+      expect(node, isA<ChildNode>().having((n) => n.next, 'next', isNull));
+    });
   });
 }
 
diff --git a/packages/jaspr/test/server/client_test.dart b/packages/jaspr/test/server/client_test.dart
index 53713a934..4755bfa4e 100644
--- a/packages/jaspr/test/server/client_test.dart
+++ b/packages/jaspr/test/server/client_test.dart
@@ -82,6 +82,17 @@ class _App4State extends State<App4> with SyncStateMixin<App4, Map<String, Objec
   }
 }
 
+class AppWithServerComponent extends StatelessComponent {
+  const AppWithServerComponent({required this.child});
+
+  final Component child;
+
+  @override
+  Component build(BuildContext context) {
+    return div(attributes: {'data-app': 'with-child'}, [child]);
+  }
+}
+
 void main() {
   group('@client', () {
     setUpAll(() {
@@ -93,6 +104,10 @@ void main() {
             App2: ClientTarget<App2>('app2', params: (app) => {'count': app.count, 'label': app.label}),
             App3: ClientTarget<App3>('app3'),
             App4: ClientTarget<App4>('app4'),
+            AppWithServerComponent: ClientTarget<AppWithServerComponent>(
+              'app_with_server_component',
+              params: (app) => {'child': app.child},
+            ),
           },
         ),
       );
@@ -169,5 +184,27 @@ void main() {
         ),
       );
     });
+
+    testServer('renders server components inside client components', (tester) async {
+      tester.pumpComponent(AppWithServerComponent(child: span([text('Hello')])));
+
+      final response = await tester.request('/');
+
+      expect(
+        response.body,
+        equals(
+          '<!DOCTYPE html>\n'
+          '<html>\n'
+          '  <head><script src="/main.clients.dart.js" defer></script></head>\n'
+          '  <body>\n'
+          '    <!--@app_with_server_component data={"child":"s@1"}-->\n'
+          '    <div data-app="with-child"><!--s@1--><span>Hello</span><!--/s@1--></div>\n'
+          '    <!--/@app_with_server_component-->\n'
+          '  </body>\n'
+          '</html>\n'
+          '',
+        ),
+      );
+    });
   });
 }
diff --git a/packages/jaspr/test/server/inherited_dom_wrapper_test.dart b/packages/jaspr/test/server/inherited_dom_wrapper_test.dart
new file mode 100644
index 000000000..f44374f33
--- /dev/null
+++ b/packages/jaspr/test/server/inherited_dom_wrapper_test.dart
@@ -0,0 +1,333 @@
+@TestOn('vm')
+library;
+
+import 'dart:convert';
+
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/server.dart';
+import 'package:jaspr_test/server_test.dart';
+
+void main() {
+  group('Component.apply', () {
+    setUpAll(() {
+      Jaspr.initializeApp();
+    });
+
+    test('renders single applied element', () async {
+      final result = await renderComponent(
+        Component.apply(
+          id: 'test',
+          classes: 'example',
+          styles: Styles(color: Colors.red),
+          attributes: {'aria-label': 'test'},
+          child: div([]),
+        ),
+        standalone: true,
+      );
+
+      expect(
+        result.body,
+        decodedMatches('<div id="test" class="example" style="color: red" aria-label="test"></div>\n'),
+      );
+    });
+
+    test('merges component props with inherited props', () async {
+      final result = await renderComponent(
+        Component.apply(
+          id: 'test',
+          classes: 'example',
+          styles: Styles(color: Colors.red, backgroundColor: Colors.blue),
+          attributes: {'aria-label': 'test'},
+          child: div(
+            id: 'main',
+            classes: 'container',
+            styles: Styles(color: Colors.green, display: Display.flex),
+            attributes: {'data-test': 'example'},
+            [],
+          ),
+        ),
+        standalone: true,
+      );
+
+      expect(
+        result.body,
+        decodedMatches(
+          '<div id="main" class="container example" style="display: flex; color: green; background-color: blue" data-test="example" aria-label="test"></div>\n',
+        ),
+      );
+    });
+
+    test('outer apply can target inner apply', () async {
+      final result = await renderComponent(
+        Component.apply(
+          target: ApplyTarget.childWith(id: 'id-1'),
+          classes: 'outer',
+          child: Component.apply(
+            id: 'id-1',
+            classes: 'inner',
+            child: div([]),
+          ),
+        ),
+        standalone: true,
+      );
+
+      expect(
+        result.body,
+        decodedMatches(
+          '<div id="id-1" class="inner outer"></div>\n',
+        ),
+      );
+    });
+
+    test('can target only direct child', () async {
+      final result = await renderComponent(
+        Component.apply(
+          id: 'test',
+          classes: 'example',
+          child: div([
+            p([Component.text('Hello World')]),
+          ]),
+        ),
+        standalone: true,
+      );
+
+      expect(
+        result.body,
+        decodedMatches(
+          '<div id="test" class="example"><p>Hello World</p></div>\n',
+        ),
+      );
+    });
+
+    test('can target all descendants', () async {
+      final result = await renderComponent(
+        Component.apply(
+          target: ApplyTarget.descendantWith(),
+          classes: 'example',
+          child: div([
+            p([Component.text('Hello World')]),
+          ]),
+        ),
+        standalone: true,
+      );
+
+      expect(
+        result.body,
+        decodedMatches(
+          '<div class="example"><p class="example">Hello World</p></div>\n',
+        ),
+      );
+    });
+
+    test('merges properties of multiple applies', () async {
+      final result = await renderComponent(
+        Component.apply(
+          id: 'id-1',
+          classes: 'example',
+          attributes: {'data-test': 'test-1'},
+          child: Component.apply(
+            id: 'id-2',
+            classes: 'container',
+            attributes: {'aria-label': 'test-2'},
+            child: div([
+              p([]),
+            ]),
+          ),
+        ),
+        standalone: true,
+      );
+
+      expect(
+        result.body,
+        decodedMatches(
+          '<div id="id-2" class="container example" aria-label="test-2" data-test="test-1"><p></p></div>\n',
+        ),
+      );
+    });
+
+    test('can target descendants by tag', () async {
+      final result = await renderComponent(
+        Component.apply(
+          target: ApplyTarget.descendantWith(tag: 'p'),
+          classes: 'example',
+          child: div([
+            p([]),
+            div([
+              p([]),
+            ]),
+          ]),
+        ),
+        standalone: true,
+      );
+
+      expect(
+        result.body,
+        decodedMatches(
+          '<div><p class="example"></p><div><p class="example"></p></div></div>\n',
+        ),
+      );
+    });
+
+    test('can target descendants by id', () async {
+      final result = await renderComponent(
+        Component.apply(
+          target: ApplyTarget.descendantWith(id: 'id-1'),
+          classes: 'example',
+          child: div([
+            div(id: 'id-1', []),
+            div(id: 'id-2', []),
+          ]),
+        ),
+        standalone: true,
+      );
+
+      expect(
+        result.body,
+        decodedMatches(
+          '<div><div id="id-1" class="example"></div><div id="id-2"></div></div>\n',
+        ),
+      );
+    });
+
+    test('can target descendants by class', () async {
+      final result = await renderComponent(
+        Component.apply(
+          target: ApplyTarget.descendantWith(classes: {'example'}),
+          attributes: {'data-test': 'test'},
+          child: div([
+            div(classes: 'example', []),
+            div(classes: 'example other', []),
+            div(classes: 'other', []),
+          ]),
+        ),
+        standalone: true,
+      );
+
+      expect(
+        result.body,
+        decodedMatches(
+          '<div>\n'
+          '  <div class="example" data-test="test"></div>\n'
+          '  <div class="example other" data-test="test"></div>\n'
+          '  <div class="other"></div>\n'
+          '</div>\n',
+        ),
+      );
+
+      final result2 = await renderComponent(
+        Component.apply(
+          target: ApplyTarget.descendantWith(classes: {'example', 'other'}),
+          attributes: {'data-test': 'test'},
+          child: div([
+            div(classes: 'example', []),
+            div(classes: 'example other', []),
+            div(classes: 'example other variant', []),
+            div(classes: 'other', []),
+          ]),
+        ),
+        standalone: true,
+      );
+
+      expect(
+        result2.body,
+        decodedMatches(
+          '<div>\n'
+          '  <div class="example"></div>\n'
+          '  <div class="example other" data-test="test"></div>\n'
+          '  <div class="example other variant" data-test="test"></div>\n'
+          '  <div class="other"></div>\n'
+          '</div>\n',
+        ),
+      );
+    });
+
+    test('can target descendants by complex selector', () async {
+      final result = await renderComponent(
+        Component.apply(
+          target: ApplyTarget.descendantWith(tag: 'p', id: 'id-1', classes: {'example'}),
+          attributes: {'data-test': 'test'},
+          child: div([
+            p([]),
+            p(id: 'id-1', []),
+            p(classes: 'example', []),
+            p(id: 'id-1', classes: 'example', []),
+            p(id: 'id-1', classes: 'example other', []),
+          ]),
+        ),
+        standalone: true,
+      );
+
+      expect(
+        result.body,
+        decodedMatches(
+          '<div>\n'
+          '  <p></p>\n'
+          '  <p id="id-1"></p>\n'
+          '  <p class="example"></p>\n'
+          '  <p id="id-1" class="example" data-test="test"></p>\n'
+          '  <p id="id-1" class="example other" data-test="test"></p>\n'
+          '</div>\n',
+        ),
+      );
+    });
+
+    test('can target descendants with multiple applies', () async {
+      final result = await renderComponent(
+        Component.apply(
+          target: ApplyTarget.descendantWith(classes: {'example'}),
+          attributes: {'data-test-1': 'test'},
+          child: Component.apply(
+            target: ApplyTarget.childWith(tag: 'div'),
+            attributes: {'data-test-2': 'test'},
+            child: div(classes: 'example', [
+              div([]),
+              div(classes: 'example', []),
+            ]),
+          ),
+        ),
+        standalone: true,
+      );
+
+      expect(
+        result.body,
+        decodedMatches(
+          '<div class="example" data-test-2="test" data-test-1="test"><div></div><div class="example" data-test-1="test"></div></div>\n',
+        ),
+      );
+    });
+
+    testComponents('renders single applied element', (tester) async {
+      String data = 'test';
+      late void Function() callSetState;
+
+      final child = div([]);
+
+      tester.pumpComponent(
+        StatefulBuilder(
+          builder: (context, setState) {
+            callSetState = () => setState(() {});
+            return Component.apply(
+              classes: 'example',
+              attributes: {'data': data},
+              child: child,
+            );
+          },
+        ),
+      );
+
+      expect(find.tag('div'), findsOneComponent);
+      final renderObject = (find.tag('div').evaluate().first as RenderObjectElement).renderObject;
+      expect(renderObject, isA<TestRenderElement>().having((e) => e.attributes, 'attributes', {'data': 'test'}));
+
+      data = 'test-2';
+      callSetState();
+      await tester.pump();
+
+      expect(renderObject, isA<TestRenderElement>().having((e) => e.attributes, 'attributes', {'data': 'test-2'}));
+    });
+  });
+}
+
+TypeMatcher<List<int>> decodedMatches(dynamic string) {
+  return isA<List<int>>().having((e) => utf8.decode(e), 'decoded', string);
+}
diff --git a/packages/jaspr_builder/lib/src/client/client_module_builder.dart b/packages/jaspr_builder/lib/src/client/client_module_builder.dart
index b00fe2897..f343efdb9 100644
--- a/packages/jaspr_builder/lib/src/client/client_module_builder.dart
+++ b/packages/jaspr_builder/lib/src/client/client_module_builder.dart
@@ -139,7 +139,7 @@ class ClientModule {
   };
 
   String componentFactory() {
-    return '[[$import]].$name(${params.where((p) => !p.isNamed).map((p) => p.decoder).followedBy(params.where((p) => p.isNamed).map((p) => '${p.name}: ${p.decoder}')).join(', ')})';
+    return '[[$import]].$name(${params.where((p) => !p.isNamed).map((p) => '${p.decoder}, ').followedBy(params.where((p) => p.isNamed).map((p) => '${p.name}: ${p.decoder},')).join(' ')})';
   }
 }
 
@@ -172,7 +172,7 @@ List<ClientParam> getParamsFor(ClassElement e, Codecs codecs) {
   for (final param in params) {
     if (!param.isInitializingFormal) {
       throw UnsupportedError(
-        'Client components only support initializing formal constructor parameters. '
+        'Client components only support initializing formal constructor parameters.\n'
         'Failing element: ${e.name}.${constr.name}($param)',
       );
     }
@@ -180,12 +180,12 @@ List<ClientParam> getParamsFor(ClassElement e, Codecs codecs) {
 
   return params.map((p) {
     try {
-      final decoder = codecs.getDecoderFor(p.type, "p['${p.name}']");
+      final decoder = codecs.getDecoderFor(p.type, "p.get<__CAST__>('${p.name}')", true);
       final encoder = codecs.getEncoderFor(p.type, 'c.${p.name}');
       return ClientParam(name: p.name ?? '', isNamed: p.isNamed, decoder: decoder, encoder: encoder);
     } on InvalidParameterException catch (_) {
       throw UnsupportedError(
-        '@client components only support parameters of primitive serializable types or types that define @decoder and @encoder methods. '
+        '@client components only support parameters of primitive serializable types, Components or types that define @decoder and @encoder methods.\n'
         'Failing parameter: [$p] in ${e.name}.${constr.name}()',
       );
     }
diff --git a/packages/jaspr_builder/lib/src/codec/codecs.dart b/packages/jaspr_builder/lib/src/codec/codecs.dart
index 7c206eb1a..7a4a874a5 100644
--- a/packages/jaspr_builder/lib/src/codec/codecs.dart
+++ b/packages/jaspr_builder/lib/src/codec/codecs.dart
@@ -21,9 +21,9 @@ extension CodecLoader on BuildStep {
 }
 
 extension CodecReader on Codecs {
-  String getDecoderFor(DartType type, String getter) {
-    final decoder = type.acceptWithArgument(DecoderVisitor(this), getter);
-    return decoder ?? getter;
+  String getDecoderFor(DartType type, String getter, bool allowComponent) {
+    final decoder = type.acceptWithArgument(DecoderVisitor(this, allowComponent), getter);
+    return decoder.decoder.replaceAll('__CAST__', decoder.cast);
   }
 
   String getEncoderFor(DartType type, String getter) {
@@ -75,56 +75,83 @@ class EncoderVisitor extends UnifyingTypeVisitorWithArgument<String?, String> {
   }
 }
 
-class DecoderVisitor extends UnifyingTypeVisitorWithArgument<String?, String> {
-  DecoderVisitor(this.codecs);
+typedef DecoderResult = ({
+  String decoder,
+  String cast,
+});
+
+class DecoderVisitor extends UnifyingTypeVisitorWithArgument<DecoderResult, String> {
+  DecoderVisitor(this.codecs, this.allowComponent);
+
   final Codecs codecs;
+  final bool allowComponent;
 
   @override
-  String? visitDartType(DartType type, String argument) {
+  DecoderResult visitDartType(DartType type, String argument) {
     if (!type.isDartPrimitive) {
       throw const InvalidParameterException();
     }
-    return '$argument as ${type.getDisplayString()}';
+    return (decoder: argument, cast: type.getDisplayString());
   }
 
   @override
-  String? visitInterfaceType(InterfaceType type, String argument) {
+  DecoderResult visitInterfaceType(InterfaceType type, String argument) {
     if (type.isDartCoreList) {
       final nullCheck = type.nullabilitySuffix == NullabilitySuffix.question ? '?' : '';
-      final base = '($argument as List<Object?>$nullCheck)';
       if (type.typeArguments.first
           case DynamicType() || DartType(isDartCoreObject: true, nullabilitySuffix: NullabilitySuffix.question)) {
-        return base;
+        return (decoder: argument, cast: 'List<Object?>$nullCheck');
       }
       final nested = type.typeArguments.first.acceptWithArgument(this, 'i');
-      if (RegExp(r'^i as (.*)$').firstMatch(nested ?? '') case final match?) {
-        return '$base$nullCheck.cast<${match.group(1)!}>()';
-      } else {
-        return '$base$nullCheck.map((i) => $nested).toList()';
+      final nestedNullCheck =
+          !nested.cast.endsWith('?') && type.typeArguments.first.nullabilitySuffix == NullabilitySuffix.question
+          ? '?'
+          : '';
+      var decoder = argument.endsWith(' as __CAST__') ? '($argument)$nullCheck' : '$argument$nullCheck';
+      decoder += '.cast<${nested.cast}$nestedNullCheck>()';
+      if (nested.decoder != 'i') {
+        decoder += '.map((i) => ${nested.decoder}).toList()';
       }
+      return (decoder: decoder, cast: 'List<Object?>$nullCheck');
     } else if (type.isDartCoreMap) {
       if (!type.typeArguments.first.isDartCoreString) {
         throw const InvalidParameterException();
       }
 
       final nullCheck = type.nullabilitySuffix == NullabilitySuffix.question ? '?' : '';
-      final base = '($argument as Map<String, Object?>$nullCheck)';
       if (type.typeArguments[1]
           case DynamicType() || DartType(isDartCoreObject: true, nullabilitySuffix: NullabilitySuffix.question)) {
-        return base;
+        return (decoder: argument, cast: 'Map<String, Object?>$nullCheck');
       }
       final nested = type.typeArguments[1].acceptWithArgument(this, 'v');
-      if (RegExp(r'^v as (.*)$').firstMatch(nested ?? '') case final match?) {
-        return '$base$nullCheck.cast<String, ${match.group(1)!}>()';
-      } else {
-        return '$base$nullCheck.map((k, v) => MapEntry(k, $nested))';
+      final nestedNullCheck =
+          !nested.cast.endsWith('?') && type.typeArguments[1].nullabilitySuffix == NullabilitySuffix.question
+          ? '?'
+          : '';
+      var decoder = argument.endsWith(' as __CAST__') ? '($argument)$nullCheck' : '$argument$nullCheck';
+      decoder += '.cast<String, ${nested.cast}$nestedNullCheck>()';
+      if (nested.decoder != 'v') {
+        decoder += '.map((k, v) => MapEntry(k, ${nested.decoder}))';
       }
+      return (decoder: decoder, cast: 'Map<String, Object?>$nullCheck');
     } else if (codecs[type.element.name] case final codec?) {
+      final decoderCall = '[[${codec.import}]].${codec.extension ?? codec.name}.${codec.decoder}';
+      final argRaw = argument.endsWith(' as __CAST__')
+          ? argument.substring(0, argument.length - ' as __CAST__'.length)
+          : argument;
+
+      final decoder = type.nullabilitySuffix == NullabilitySuffix.question
+          ? '$argRaw != null ? $decoderCall($argument) : null'
+          : '$decoderCall($argument)';
+
+      return (decoder: decoder, cast: codec.rawType);
+    } else if (allowComponent &&
+        type.element.name == 'Component' &&
+        type.element.library.identifier == 'package:jaspr/src/framework/framework.dart') {
       if (type.nullabilitySuffix == NullabilitySuffix.question) {
-        return '$argument != null ? [[${codec.import}]].${codec.extension ?? codec.name}.${codec.decoder}($argument as ${codec.rawType}) : null';
-      } else {
-        return '[[${codec.import}]].${codec.extension ?? codec.name}.${codec.decoder}($argument as ${codec.rawType})';
+        return (decoder: 'p.mountOrNull($argument)', cast: 'String?');
       }
+      return (decoder: 'p.mount($argument)', cast: 'String');
     }
     return super.visitInterfaceType(type, argument);
   }
diff --git a/packages/jaspr_builder/lib/src/sync/sync_mixins_builder.dart b/packages/jaspr_builder/lib/src/sync/sync_mixins_builder.dart
index 53254d8af..a91cc5e2e 100644
--- a/packages/jaspr_builder/lib/src/sync/sync_mixins_builder.dart
+++ b/packages/jaspr_builder/lib/src/sync/sync_mixins_builder.dart
@@ -128,11 +128,11 @@ class SyncMixinsBuilder implements Builder {
     final decoders = fields
         .map((f) {
           try {
-            final decoder = codecs.getDecoderFor(f.type, "value['${f.name}']");
+            final decoder = codecs.getDecoderFor(f.type, "value['${f.name}'] as __CAST__", false);
             return '${f.name} = $decoder;';
           } on InvalidParameterException catch (_) {
             throw UnsupportedError(
-              'Fields annotated with @sync must have a primitive serializable type or a type that defines @decoder and @encoder methods. '
+              'Fields annotated with @sync must have a primitive serializable type or a type that defines @decoder and @encoder methods.\n'
               'Failing field: [$f] in ${clazz.name}',
             );
           }
diff --git a/packages/jaspr_builder/test/client/client_annotation_test.dart b/packages/jaspr_builder/test/client/client_annotation_test.dart
index 8f80ff2e1..e7fac9f15 100644
--- a/packages/jaspr_builder/test/client/client_annotation_test.dart
+++ b/packages/jaspr_builder/test/client/client_annotation_test.dart
@@ -9,6 +9,7 @@ import 'sources/client_basic.dart';
 import 'sources/client_invalid.dart';
 import 'sources/client_model_class.dart';
 import 'sources/client_model_extension.dart';
+import 'sources/client_with_server_components.dart';
 
 void main() {
   group('client annotation', () {
@@ -71,7 +72,7 @@ void main() {
         expect(
           errorLog,
           equals(
-            'ClientModuleBuilder on lib/component_basic.dart:\nClient components only support initializing formal constructor parameters. '
+            'ClientModuleBuilder on lib/component_basic.dart:\nClient components only support initializing formal constructor parameters.\n'
             'Failing element: Component.new(String a)',
           ),
         );
@@ -95,12 +96,24 @@ void main() {
         expect(
           errorLog,
           equals(
-            'ClientModuleBuilder on lib/component_basic.dart:\n@client components only support parameters of primitive serializable types or types that define @decoder and @encoder methods. Failing parameter: [DateTime time] in Component.new()',
+            'ClientModuleBuilder on lib/component_basic.dart:\n@client components only support parameters of primitive serializable types, Components or types that define @decoder and @encoder methods.\n'
+            'Failing parameter: [DateTime time] in Component.new()',
           ),
         );
       });
     });
 
+    group('on component with server components as params', () {
+      test('generates json module', () async {
+        await testBuilder(
+          ClientModuleBuilder(BuilderOptions({})),
+          clientWithServerComponentsSources,
+          outputs: {...clientWithServerComponentsModuleOutputs},
+          readerWriter: reader,
+        );
+      });
+    });
+
     test('generates bundle', () async {
       await testBuilder(
         ClientsBundleBuilder(BuilderOptions({})),
@@ -108,6 +121,7 @@ void main() {
           ...clientBasicModuleOutputs,
           ...clientModelClassModuleOutputs,
           ...clientModelExtensionModuleOutputs,
+          ...clientWithServerComponentsModuleOutputs,
         },
         outputs: clientBundleOutputs,
         readerWriter: reader,
diff --git a/packages/jaspr_builder/test/client/sources/bundle.dart b/packages/jaspr_builder/test/client/sources/bundle.dart
index 9de7f901b..b0acc00b5 100644
--- a/packages/jaspr_builder/test/client/sources/bundle.dart
+++ b/packages/jaspr_builder/test/client/sources/bundle.dart
@@ -1,45 +1,15 @@
 import 'dart:convert';
 
+import 'client_basic.dart';
+import 'client_model_class.dart';
+import 'client_model_extension.dart';
+import 'client_with_server_components.dart';
+
 final clientBundleOutputs = {
   'site|lib/clients.bundle.json': jsonEncode([
-    {
-      'name': 'Component',
-      'id': ['site', 'lib/component_basic.dart'],
-      'import': 'package:site/component_basic.dart',
-      'params': [
-        {'name': 'a', 'isNamed': false, 'decoder': "p['a'] as String", 'encoder': 'c.a'},
-        {'name': 'b', 'isNamed': true, 'decoder': "p['b'] as int", 'encoder': 'c.b'},
-        {'name': 'c', 'isNamed': true, 'decoder': "p['c'] as double?", 'encoder': 'c.c'},
-        {'name': 'd', 'isNamed': true, 'decoder': "p['d'] as bool", 'encoder': 'c.d'},
-      ],
-    },
-    {
-      'name': 'Component',
-      'id': ['site', 'lib/component_model_class.dart'],
-      'import': 'package:site/component_model_class.dart',
-      'params': [
-        {'name': 'a', 'isNamed': false, 'decoder': "p['a'] as String", 'encoder': 'c.a'},
-        {
-          'name': 'b',
-          'isNamed': true,
-          'decoder': "[[package:site/model_class.dart]].ModelA.fromRaw(p['b'] as Map<String, dynamic>)",
-          'encoder': 'c.b.toRaw()',
-        },
-      ],
-    },
-    {
-      'name': 'Component',
-      'id': ['site', 'lib/component_model_extension.dart'],
-      'import': 'package:site/component_model_extension.dart',
-      'params': [
-        {'name': 'a', 'isNamed': false, 'decoder': "p['a'] as String", 'encoder': 'c.a'},
-        {
-          'name': 'b',
-          'isNamed': true,
-          'decoder': "[[package:site/model_extension.dart]].ModelBCodec.fromRaw(p['b'] as Map<String, dynamic>)",
-          'encoder': '[[package:site/model_extension.dart]].ModelBCodec(c.b).toRaw()',
-        },
-      ],
-    },
+    clientWithServerComponentsModuleData,
+    clientBasicModuleData,
+    clientModelClassModuleData,
+    clientModelExtensionModuleData,
   ]),
 };
diff --git a/packages/jaspr_builder/test/client/sources/client_basic.dart b/packages/jaspr_builder/test/client/sources/client_basic.dart
index 5e2f31750..0a708a429 100644
--- a/packages/jaspr_builder/test/client/sources/client_basic.dart
+++ b/packages/jaspr_builder/test/client/sources/client_basic.dart
@@ -19,16 +19,18 @@ const clientBasicSources = {
   ''',
 };
 
+final clientBasicModuleData = {
+  'name': 'Component',
+  'id': ['site', 'lib/component_basic.dart'],
+  'import': 'package:site/component_basic.dart',
+  'params': [
+    {'name': 'a', 'isNamed': false, 'decoder': "p.get<String>('a')", 'encoder': 'c.a'},
+    {'name': 'b', 'isNamed': true, 'decoder': "p.get<int>('b')", 'encoder': 'c.b'},
+    {'name': 'c', 'isNamed': true, 'decoder': "p.get<double?>('c')", 'encoder': 'c.c'},
+    {'name': 'd', 'isNamed': true, 'decoder': "p.get<bool>('d')", 'encoder': 'c.d'},
+  ],
+};
+
 final clientBasicModuleOutputs = {
-  'site|lib/component_basic.client.module.json': jsonEncode({
-    'name': 'Component',
-    'id': ['site', 'lib/component_basic.dart'],
-    'import': 'package:site/component_basic.dart',
-    'params': [
-      {'name': 'a', 'isNamed': false, 'decoder': "p['a'] as String", 'encoder': 'c.a'},
-      {'name': 'b', 'isNamed': true, 'decoder': "p['b'] as int", 'encoder': 'c.b'},
-      {'name': 'c', 'isNamed': true, 'decoder': "p['c'] as double?", 'encoder': 'c.c'},
-      {'name': 'd', 'isNamed': true, 'decoder': "p['d'] as bool", 'encoder': 'c.d'},
-    ],
-  }),
+  'site|lib/component_basic.client.module.json': jsonEncode(clientBasicModuleData),
 };
diff --git a/packages/jaspr_builder/test/client/sources/client_model_class.dart b/packages/jaspr_builder/test/client/sources/client_model_class.dart
index 586041ea7..b29863d84 100644
--- a/packages/jaspr_builder/test/client/sources/client_model_class.dart
+++ b/packages/jaspr_builder/test/client/sources/client_model_class.dart
@@ -23,19 +23,21 @@ final clientModelClassSources = {
   ...codecBundleOutputs,
 };
 
+final clientModelClassModuleData = {
+  'name': 'Component',
+  'id': ['site', 'lib/component_model_class.dart'],
+  'import': 'package:site/component_model_class.dart',
+  'params': [
+    {'name': 'a', 'isNamed': false, 'decoder': "p.get<String>('a')", 'encoder': 'c.a'},
+    {
+      'name': 'b',
+      'isNamed': true,
+      'decoder': "[[package:site/model_class.dart]].ModelA.fromRaw(p.get<Map<String, dynamic>>('b'))",
+      'encoder': 'c.b.toRaw()',
+    },
+  ],
+};
+
 final clientModelClassModuleOutputs = {
-  'site|lib/component_model_class.client.module.json': jsonEncode({
-    'name': 'Component',
-    'id': ['site', 'lib/component_model_class.dart'],
-    'import': 'package:site/component_model_class.dart',
-    'params': [
-      {'name': 'a', 'isNamed': false, 'decoder': "p['a'] as String", 'encoder': 'c.a'},
-      {
-        'name': 'b',
-        'isNamed': true,
-        'decoder': "[[package:site/model_class.dart]].ModelA.fromRaw(p['b'] as Map<String, dynamic>)",
-        'encoder': 'c.b.toRaw()',
-      },
-    ],
-  }),
+  'site|lib/component_model_class.client.module.json': jsonEncode(clientModelClassModuleData),
 };
diff --git a/packages/jaspr_builder/test/client/sources/client_model_extension.dart b/packages/jaspr_builder/test/client/sources/client_model_extension.dart
index 5e13e85d6..37443bf7a 100644
--- a/packages/jaspr_builder/test/client/sources/client_model_extension.dart
+++ b/packages/jaspr_builder/test/client/sources/client_model_extension.dart
@@ -23,19 +23,21 @@ final clientModelExtensionSources = {
   ...codecBundleOutputs,
 };
 
+final clientModelExtensionModuleData = {
+  'name': 'Component',
+  'id': ['site', 'lib/component_model_extension.dart'],
+  'import': 'package:site/component_model_extension.dart',
+  'params': [
+    {'name': 'a', 'isNamed': false, 'decoder': "p.get<String>('a')", 'encoder': 'c.a'},
+    {
+      'name': 'b',
+      'isNamed': true,
+      'decoder': "[[package:site/model_extension.dart]].ModelBCodec.fromRaw(p.get<Map<String, dynamic>>('b'))",
+      'encoder': '[[package:site/model_extension.dart]].ModelBCodec(c.b).toRaw()',
+    },
+  ],
+};
+
 final clientModelExtensionModuleOutputs = {
-  'site|lib/component_model_extension.client.module.json': jsonEncode({
-    'name': 'Component',
-    'id': ['site', 'lib/component_model_extension.dart'],
-    'import': 'package:site/component_model_extension.dart',
-    'params': [
-      {'name': 'a', 'isNamed': false, 'decoder': "p['a'] as String", 'encoder': 'c.a'},
-      {
-        'name': 'b',
-        'isNamed': true,
-        'decoder': "[[package:site/model_extension.dart]].ModelBCodec.fromRaw(p['b'] as Map<String, dynamic>)",
-        'encoder': '[[package:site/model_extension.dart]].ModelBCodec(c.b).toRaw()',
-      },
-    ],
-  }),
+  'site|lib/component_model_extension.client.module.json': jsonEncode(clientModelExtensionModuleData),
 };
diff --git a/packages/jaspr_builder/test/client/sources/client_with_server_components.dart b/packages/jaspr_builder/test/client/sources/client_with_server_components.dart
new file mode 100644
index 000000000..77169118f
--- /dev/null
+++ b/packages/jaspr_builder/test/client/sources/client_with_server_components.dart
@@ -0,0 +1,45 @@
+import 'dart:convert';
+
+const clientWithServerComponentsSources = {
+  'site|lib/client_with_sc.dart': '''
+    import 'package:jaspr/jaspr.dart';
+    
+    @client
+    class ClientWithSC extends StatelessComponent {
+      ClientWithSC({required this.child, this.children = const [], required this.childrenMap = const {}, super.key});
+      
+      final Component child;
+      final List<Component> children;
+      final Map<String, Component> childrenMap;
+    
+      @override
+      Component build(BuildContext context) => text('');
+    }
+  ''',
+};
+
+final clientWithServerComponentsModuleData = {
+  'name': 'ClientWithSC',
+  'id': ['site', 'lib/client_with_sc.dart'],
+  'import': 'package:site/client_with_sc.dart',
+  'params': [
+    {'name': 'child', 'isNamed': true, 'decoder': "p.mount(p.get<String>('child'))", 'encoder': 'c.child'},
+    {
+      'name': 'children',
+      'isNamed': true,
+      'decoder': "p.get<List<Object?>>('children').cast<String>().map((i) => p.mount(i)).toList()",
+      'encoder': 'c.children',
+    },
+    {
+      'name': 'childrenMap',
+      'isNamed': true,
+      'decoder':
+          "p.get<Map<String, Object?>>('childrenMap').cast<String, String>().map((k, v) => MapEntry(k, p.mount(v)))",
+      'encoder': 'c.childrenMap',
+    },
+  ],
+};
+
+final clientWithServerComponentsModuleOutputs = {
+  'site|lib/client_with_sc.client.module.json': jsonEncode(clientWithServerComponentsModuleData),
+};
diff --git a/packages/jaspr_builder/test/options/client_options_test.dart b/packages/jaspr_builder/test/options/client_options_test.dart
index 4d5c5a8cd..d4ccb85ed 100644
--- a/packages/jaspr_builder/test/options/client_options_test.dart
+++ b/packages/jaspr_builder/test/options/client_options_test.dart
@@ -7,7 +7,7 @@ import 'sources/client_options.dart';
 import 'sources/client_options_other.dart';
 
 void main() {
-  group('jaspr options builder', () {
+  group('client options builder', () {
     late TestReaderWriter reader;
 
     setUp(() async {
diff --git a/packages/jaspr_builder/test/options/server_options_test.dart b/packages/jaspr_builder/test/options/server_options_test.dart
index 9a79a4013..fc5f390fc 100644
--- a/packages/jaspr_builder/test/options/server_options_test.dart
+++ b/packages/jaspr_builder/test/options/server_options_test.dart
@@ -8,7 +8,7 @@ import 'sources/server_options_other.dart';
 import 'sources/server_options_standalone.dart';
 
 void main() {
-  group('jaspr options builder', () {
+  group('server options builder', () {
     late TestReaderWriter reader;
 
     setUp(() async {
diff --git a/packages/jaspr_builder/test/options/sources/client_options.dart b/packages/jaspr_builder/test/options/sources/client_options.dart
index 749ddeb3c..7908c2c6a 100644
--- a/packages/jaspr_builder/test/options/sources/client_options.dart
+++ b/packages/jaspr_builder/test/options/sources/client_options.dart
@@ -9,6 +9,7 @@ final clientOptionsSources = {
     import 'package:site/component_basic.dart';
     // import 'package:site/component_model_class.dart';
     import 'package:site/component_model_extension.dart';
+    import 'package:site/client_with_sc.dart';
 
     void main() {}
   ''',
@@ -28,6 +29,7 @@ final clientOptionsOutputs = {
       '\n'
       'import \'package:jaspr/client.dart\';\n'
       '\n'
+      'import \'package:site/client_with_sc.dart\' deferred as _client_with_sc;\n'
       'import \'package:site/component_basic.dart\' deferred as _component_basic;\n'
       'import \'package:site/component_model_extension.dart\'\n'
       '    deferred as _component_model_extension;\n'
@@ -51,19 +53,36 @@ final clientOptionsOutputs = {
       '/// ```\n'
       'ClientOptions get defaultClientOptions => ClientOptions(\n'
       '  clients: {\n'
+      '    \'client_with_sc\': ClientLoader(\n'
+      '      (p) => _client_with_sc.ClientWithSC(\n'
+      '        child: p.mount(p.get<String>(\'child\')),\n'
+      '        children: p\n'
+      '            .get<List<Object?>>(\'children\')\n'
+      '            .cast<String>()\n'
+      '            .map((i) => p.mount(i))\n'
+      '            .toList(),\n'
+      '        childrenMap: p\n'
+      '            .get<Map<String, Object?>>(\'childrenMap\')\n'
+      '            .cast<String, String>()\n'
+      '            .map((k, v) => MapEntry(k, p.mount(v))),\n'
+      '      ),\n'
+      '      loader: _client_with_sc.loadLibrary,\n'
+      '    ),\n'
       '    \'component_basic\': ClientLoader(\n'
       '      (p) => _component_basic.Component(\n'
-      '        p[\'a\'] as String,\n'
-      '        b: p[\'b\'] as int,\n'
-      '        c: p[\'c\'] as double?,\n'
-      '        d: p[\'d\'] as bool,\n'
+      '        p.get<String>(\'a\'),\n'
+      '        b: p.get<int>(\'b\'),\n'
+      '        c: p.get<double?>(\'c\'),\n'
+      '        d: p.get<bool>(\'d\'),\n'
       '      ),\n'
       '      loader: _component_basic.loadLibrary,\n'
       '    ),\n'
       '    \'component_model_extension\': ClientLoader(\n'
       '      (p) => _component_model_extension.Component(\n'
-      '        p[\'a\'] as String,\n'
-      '        b: _model_extension.ModelBCodec.fromRaw(p[\'b\'] as Map<String, dynamic>),\n'
+      '        p.get<String>(\'a\'),\n'
+      '        b: _model_extension.ModelBCodec.fromRaw(\n'
+      '          p.get<Map<String, dynamic>>(\'b\'),\n'
+      '        ),\n'
       '      ),\n'
       '      loader: _component_model_extension.loadLibrary,\n'
       '    ),\n'
diff --git a/packages/jaspr_builder/test/options/sources/client_options_other.dart b/packages/jaspr_builder/test/options/sources/client_options_other.dart
index 1811f1b30..f3aa60060 100644
--- a/packages/jaspr_builder/test/options/sources/client_options_other.dart
+++ b/packages/jaspr_builder/test/options/sources/client_options_other.dart
@@ -21,6 +21,7 @@ final clientOptionsOtherOutputs = {
       '\n'
       'import \'package:jaspr/client.dart\';\n'
       '\n'
+      'import \'package:site/client_with_sc.dart\' deferred as _client_with_sc;\n'
       'import \'package:site/component_basic.dart\' deferred as _component_basic;\n'
       'import \'package:site/component_model_class.dart\'\n'
       '    deferred as _component_model_class;\n'
@@ -47,26 +48,43 @@ final clientOptionsOtherOutputs = {
       '/// ```\n'
       'ClientOptions get defaultClientOptions => ClientOptions(\n'
       '  clients: {\n'
+      '    \'client_with_sc\': ClientLoader(\n'
+      '      (p) => _client_with_sc.ClientWithSC(\n'
+      '        child: p.mount(p.get<String>(\'child\')),\n'
+      '        children: p\n'
+      '            .get<List<Object?>>(\'children\')\n'
+      '            .cast<String>()\n'
+      '            .map((i) => p.mount(i))\n'
+      '            .toList(),\n'
+      '        childrenMap: p\n'
+      '            .get<Map<String, Object?>>(\'childrenMap\')\n'
+      '            .cast<String, String>()\n'
+      '            .map((k, v) => MapEntry(k, p.mount(v))),\n'
+      '      ),\n'
+      '      loader: _client_with_sc.loadLibrary,\n'
+      '    ),\n'
       '    \'component_basic\': ClientLoader(\n'
       '      (p) => _component_basic.Component(\n'
-      '        p[\'a\'] as String,\n'
-      '        b: p[\'b\'] as int,\n'
-      '        c: p[\'c\'] as double?,\n'
-      '        d: p[\'d\'] as bool,\n'
+      '        p.get<String>(\'a\'),\n'
+      '        b: p.get<int>(\'b\'),\n'
+      '        c: p.get<double?>(\'c\'),\n'
+      '        d: p.get<bool>(\'d\'),\n'
       '      ),\n'
       '      loader: _component_basic.loadLibrary,\n'
       '    ),\n'
       '    \'component_model_class\': ClientLoader(\n'
       '      (p) => _component_model_class.Component(\n'
-      '        p[\'a\'] as String,\n'
-      '        b: _model_class.ModelA.fromRaw(p[\'b\'] as Map<String, dynamic>),\n'
+      '        p.get<String>(\'a\'),\n'
+      '        b: _model_class.ModelA.fromRaw(p.get<Map<String, dynamic>>(\'b\')),\n'
       '      ),\n'
       '      loader: _component_model_class.loadLibrary,\n'
       '    ),\n'
       '    \'component_model_extension\': ClientLoader(\n'
       '      (p) => _component_model_extension.Component(\n'
-      '        p[\'a\'] as String,\n'
-      '        b: _model_extension.ModelBCodec.fromRaw(p[\'b\'] as Map<String, dynamic>),\n'
+      '        p.get<String>(\'a\'),\n'
+      '        b: _model_extension.ModelBCodec.fromRaw(\n'
+      '          p.get<Map<String, dynamic>>(\'b\'),\n'
+      '        ),\n'
       '      ),\n'
       '      loader: _component_model_extension.loadLibrary,\n'
       '    ),\n'
diff --git a/packages/jaspr_builder/test/sync/sources/sync_model_class.dart b/packages/jaspr_builder/test/sync/sources/sync_model_class.dart
index 728c818e8..9328316d4 100644
--- a/packages/jaspr_builder/test/sync/sources/sync_model_class.dart
+++ b/packages/jaspr_builder/test/sync/sources/sync_model_class.dart
@@ -72,27 +72,22 @@ final syncModelClassOutputs = {
       '        : null;\n'
       '    m2 = _model_class.ModelA.fromRaw(value[\'m2\'] as Map<String, dynamic>);\n'
       '    m3 = (value[\'m3\'] as List<Object?>)\n'
-      '        .map((i) => _model_class.ModelA.fromRaw(i as Map<String, dynamic>))\n'
+      '        .cast<Map<String, dynamic>>()\n'
+      '        .map((i) => _model_class.ModelA.fromRaw(i))\n'
       '        .toList();\n'
       '    m4 = (value[\'m4\'] as List<Object?>)\n'
-      '        .map(\n'
-      '          (i) => i != null\n'
-      '              ? _model_class.ModelA.fromRaw(i as Map<String, dynamic>)\n'
-      '              : null,\n'
-      '        )\n'
+      '        .cast<Map<String, dynamic>?>()\n'
+      '        .map((i) => i != null ? _model_class.ModelA.fromRaw(i) : null)\n'
       '        .toList();\n'
-      '    m5 = (value[\'m5\'] as Map<String, Object?>).map(\n'
-      '      (k, v) =>\n'
-      '          MapEntry(k, _model_class.ModelA.fromRaw(v as Map<String, dynamic>)),\n'
-      '    );\n'
-      '    m6 = (value[\'m6\'] as Map<String, Object?>).map(\n'
-      '      (k, v) => MapEntry(\n'
-      '        k,\n'
-      '        v != null\n'
-      '            ? _model_class.ModelA.fromRaw(v as Map<String, dynamic>)\n'
-      '            : null,\n'
-      '      ),\n'
-      '    );\n'
+      '    m5 = (value[\'m5\'] as Map<String, Object?>)\n'
+      '        .cast<String, Map<String, dynamic>>()\n'
+      '        .map((k, v) => MapEntry(k, _model_class.ModelA.fromRaw(v)));\n'
+      '    m6 = (value[\'m6\'] as Map<String, Object?>)\n'
+      '        .cast<String, Map<String, dynamic>?>()\n'
+      '        .map(\n'
+      '          (k, v) =>\n'
+      '              MapEntry(k, v != null ? _model_class.ModelA.fromRaw(v) : null),\n'
+      '        );\n'
       '  }\n'
       '\n'
       '  @override\n'
diff --git a/packages/jaspr_builder/test/sync/sources/sync_model_extension.dart b/packages/jaspr_builder/test/sync/sources/sync_model_extension.dart
index c462880d0..c384c35b0 100644
--- a/packages/jaspr_builder/test/sync/sources/sync_model_extension.dart
+++ b/packages/jaspr_builder/test/sync/sources/sync_model_extension.dart
@@ -77,32 +77,24 @@ final syncModelExtensionOutputs = {
       '      value[\'m2\'] as Map<String, dynamic>,\n'
       '    );\n'
       '    m3 = (value[\'m3\'] as List<Object?>)\n'
-      '        .map(\n'
-      '          (i) =>\n'
-      '              _model_extension.ModelBCodec.fromRaw(i as Map<String, dynamic>),\n'
-      '        )\n'
+      '        .cast<Map<String, dynamic>>()\n'
+      '        .map((i) => _model_extension.ModelBCodec.fromRaw(i))\n'
       '        .toList();\n'
       '    m4 = (value[\'m4\'] as List<Object?>)\n'
-      '        .map(\n'
-      '          (i) => i != null\n'
-      '              ? _model_extension.ModelBCodec.fromRaw(i as Map<String, dynamic>)\n'
-      '              : null,\n'
-      '        )\n'
+      '        .cast<Map<String, dynamic>?>()\n'
+      '        .map((i) => i != null ? _model_extension.ModelBCodec.fromRaw(i) : null)\n'
       '        .toList();\n'
-      '    m5 = (value[\'m5\'] as Map<String, Object?>).map(\n'
-      '      (k, v) => MapEntry(\n'
-      '        k,\n'
-      '        _model_extension.ModelBCodec.fromRaw(v as Map<String, dynamic>),\n'
-      '      ),\n'
-      '    );\n'
-      '    m6 = (value[\'m6\'] as Map<String, Object?>).map(\n'
-      '      (k, v) => MapEntry(\n'
-      '        k,\n'
-      '        v != null\n'
-      '            ? _model_extension.ModelBCodec.fromRaw(v as Map<String, dynamic>)\n'
-      '            : null,\n'
-      '      ),\n'
-      '    );\n'
+      '    m5 = (value[\'m5\'] as Map<String, Object?>)\n'
+      '        .cast<String, Map<String, dynamic>>()\n'
+      '        .map((k, v) => MapEntry(k, _model_extension.ModelBCodec.fromRaw(v)));\n'
+      '    m6 = (value[\'m6\'] as Map<String, Object?>)\n'
+      '        .cast<String, Map<String, dynamic>?>()\n'
+      '        .map(\n'
+      '          (k, v) => MapEntry(\n'
+      '            k,\n'
+      '            v != null ? _model_extension.ModelBCodec.fromRaw(v) : null,\n'
+      '          ),\n'
+      '        );\n'
       '  }\n'
       '\n'
       '  @override\n'
diff --git a/packages/jaspr_builder/test/sync/sync_annotation_test.dart b/packages/jaspr_builder/test/sync/sync_annotation_test.dart
index 9c935639f..ce775eacd 100644
--- a/packages/jaspr_builder/test/sync/sync_annotation_test.dart
+++ b/packages/jaspr_builder/test/sync/sync_annotation_test.dart
@@ -81,7 +81,8 @@ void main() {
         expect(
           errorLog,
           equals(
-            'SyncMixinsBuilder on lib/component.dart:\nFields annotated with @sync must have a primitive serializable type or a type that defines @decoder and @encoder methods. Failing field: [Map<int, int> a] in ComponentState',
+            'SyncMixinsBuilder on lib/component.dart:\nFields annotated with @sync must have a primitive serializable type or a type that defines @decoder and @encoder methods.\n'
+            'Failing field: [Map<int, int> a] in ComponentState',
           ),
         );
       });
@@ -104,7 +105,8 @@ void main() {
         expect(
           errorLog,
           equals(
-            'SyncMixinsBuilder on lib/component.dart:\nFields annotated with @sync must have a primitive serializable type or a type that defines @decoder and @encoder methods. Failing field: [DateTime time] in ComponentState',
+            'SyncMixinsBuilder on lib/component.dart:\nFields annotated with @sync must have a primitive serializable type or a type that defines @decoder and @encoder methods.\n'
+            'Failing field: [DateTime time] in ComponentState',
           ),
         );
       });
diff --git a/packages/jaspr_cli/lib/src/commands/dev_command.dart b/packages/jaspr_cli/lib/src/commands/dev_command.dart
index 8acc08d55..2e27b5f72 100644
--- a/packages/jaspr_cli/lib/src/commands/dev_command.dart
+++ b/packages/jaspr_cli/lib/src/commands/dev_command.dart
@@ -32,10 +32,11 @@ abstract class DevCommand extends BaseCommand with ProxyHelper, FlutterHelper {
       'mode',
       abbr: 'm',
       help: 'Sets the reload/refresh mode.',
-      allowed: ['reload', 'refresh'],
+      allowed: ['reload', 'refresh', 'none'],
       allowedHelp: {
         'reload': 'Reloads js modules without server reload (loses current state)',
         'refresh': 'Performs a full page refresh and server reload',
+        'none': 'Does not perform any reloads',
       },
       defaultsTo: 'refresh',
     );
@@ -355,13 +356,19 @@ abstract class DevCommand extends BaseCommand with ProxyHelper, FlutterHelper {
       ],
     ];
 
+    final reload = switch (mode) {
+      'reload' => ReloadConfiguration.hotRestart,
+      'refresh' => ReloadConfiguration.liveReload,
+      _ => ReloadConfiguration.none,
+    };
+
     final workflow = await ClientWorkflow.start(
       proxyPort,
       buildArgs,
       logger,
       guardResource,
       enableDebugging: launchInChrome,
-      reload: mode == 'reload' ? ReloadConfiguration.hotRestart : ReloadConfiguration.liveReload,
+      reload: reload,
     );
     if (workflow == null) {
       return null;
diff --git a/packages/jaspr_content/lib/components/_internal/zoomable_image.dart b/packages/jaspr_content/lib/components/_internal/zoomable_image.dart
index c249c0691..aef37006b 100644
--- a/packages/jaspr_content/lib/components/_internal/zoomable_image.dart
+++ b/packages/jaspr_content/lib/components/_internal/zoomable_image.dart
@@ -50,14 +50,10 @@ class ZoomableImage extends StatefulComponent {
 }
 
 class _ZoomableImageState extends State<ZoomableImage> with ViewTransitionMixin {
-  static int _dialogCount = 0;
-
-  late final HTMLDialogElement dialog;
+  final GlobalNodeKey<HTMLDialogElement> dialogKey = GlobalNodeKey();
   final GlobalNodeKey<HTMLImageElement> imageKey = GlobalNodeKey();
 
-  StreamSubscription<Event>? _cancelSub;
   StreamSubscription<Event>? _resizeSub;
-  void Function(void Function())? dialogSetState;
 
   bool zoomed = false;
   bool isResize = false;
@@ -71,27 +67,7 @@ class _ZoomableImageState extends State<ZoomableImage> with ViewTransitionMixin
 
     if (kIsWeb) {
       context.binding.addPostFrameCallback(() {
-        dialog = HTMLDialogElement()
-          ..id = 'dzm${_dialogCount++}'
-          ..className = 'zoom-modal';
-        window.document.body!.appendChild(dialog);
-
-        _cancelSub = EventStreamProviders.cancelEvent.forTarget(dialog).listen((e) {
-          e.preventDefault();
-          zoomOut();
-        });
-
         updateImageOffset(false);
-
-        (runApp as dynamic)(
-          StatefulBuilder(
-            builder: (context, setState) {
-              dialogSetState = setState;
-              return _buildDialog(context);
-            },
-          ),
-          attachTo: '#${dialog.id}',
-        );
       });
 
       _resizeSub = EventStreamProviders.resizeEvent.forTarget(window).listen((_) {
@@ -128,89 +104,88 @@ class _ZoomableImageState extends State<ZoomableImage> with ViewTransitionMixin
       );
       this.isResize = isResize;
     });
-    dialogSetState?.call(() {});
   }
 
   void zoomIn() {
     updateImageOffset(false);
 
-    setState(() {
-      zoomed = true;
-    });
-    dialogSetState?.call(() {});
+    setState(() => zoomed = true);
     document.body!.style.overflow = 'hidden';
-    dialog.showModal();
+    dialogKey.currentNode?.showModal();
   }
 
   void zoomOut() async {
-    setState(() {
-      zoomed = false;
-    });
-    dialogSetState?.call(() {});
+    setState(() => zoomed = false);
     await Future<void>.delayed(const Duration(milliseconds: 300));
     if (zoomed) return;
-    dialog.close();
     document.body!.style.overflow = 'auto';
+    dialogKey.currentNode?.close();
   }
 
   @override
   void dispose() {
-    _cancelSub?.cancel();
     _resizeSub?.cancel();
-    dialog.remove();
     super.dispose();
   }
 
   @override
   Component build(BuildContext context) {
-    return figure(classes: 'image zoomable', [
-      img(
-        key: imageKey,
-        src: component.src,
-        alt: component.alt ?? component.caption,
-        styles: zoomed ? Styles(visibility: Visibility.hidden) : null,
-        events: events<void>(
-          onClick: () {
-            zoomIn();
-          },
+    return Component.fragment([
+      figure(classes: 'image zoomable', [
+        img(
+          key: imageKey,
+          src: component.src,
+          alt: component.alt ?? component.caption,
+          styles: zoomed ? Styles(visibility: Visibility.hidden) : null,
+          events: events<void>(
+            onClick: () {
+              zoomIn();
+            },
+          ),
         ),
-      ),
-      if (component.caption != null) figcaption([Component.text(component.caption!)]),
+        if (component.caption != null) figcaption([Component.text(component.caption!)]),
+      ]),
+      _buildDialog(context),
     ]);
   }
 
   Component _buildDialog(BuildContext context) {
-    return div(
-      classes: 'image-wrapper',
+    return dialog(
+      key: dialogKey,
+      classes: 'zoom-modal not-content',
+      open: dialogKey.currentNode?.open ?? false,
       events: {
-        'click': (_) {
-          zoomOut();
-        },
-        'wheel': (_) {
+        'cancel': (e) {
+          e.preventDefault();
           zoomOut();
         },
       },
       [
-        img(
-          src: component.src,
-          alt: component.alt ?? component.caption,
-          styles: Styles(
-            position: Position.absolute(top: sourceOffset.y.px, left: sourceOffset.x.px),
-            width: targetOffset.width.px,
-            height: targetOffset.height.px,
-            transform: Transform.combine(
-              zoomed
-                  ? [
-                      Transform.translate(
-                        x: (-sourceOffset.x + targetOffset.x).px,
-                        y: (-sourceOffset.y + targetOffset.y).px,
-                      ),
-                      Transform.scale(1),
-                    ]
-                  : [Transform.translate(x: 0.px, y: 0.px), Transform.scale(sourceOffset.scale)],
+        div(
+          classes: 'image-wrapper',
+          events: {
+            'click': (_) => zoomOut(),
+            'wheel': (_) => zoomOut(),
+          },
+          [
+            img(
+              src: component.src,
+              alt: component.alt ?? component.caption,
+              styles: Styles(
+                position: Position.absolute(top: sourceOffset.y.px, left: sourceOffset.x.px),
+                width: targetOffset.width.px,
+                height: targetOffset.height.px,
+                transform: Transform.combine([
+                  Transform.translate(
+                    x: zoomed ? (-sourceOffset.x + targetOffset.x).px : 0.px,
+                    y: zoomed ? (-sourceOffset.y + targetOffset.y).px : 0.px,
+                  ),
+                  Transform.scale(zoomed ? 1 : sourceOffset.scale),
+                ]),
+                raw: {if (isResize) 'transition': 'none'},
+              ),
             ),
-            raw: {if (isResize) 'transition': 'none'},
-          ),
+          ],
         ),
       ],
     );
diff --git a/packages/jaspr_content/lib/src/route_loader/route_loader.dart b/packages/jaspr_content/lib/src/route_loader/route_loader.dart
index 9e633c38c..03e35db17 100644
--- a/packages/jaspr_content/lib/src/route_loader/route_loader.dart
+++ b/packages/jaspr_content/lib/src/route_loader/route_loader.dart
@@ -167,6 +167,7 @@ abstract class RouteLoaderBase<T extends PageSource> implements RouteLoader {
 
   void invalidateSource(T source, {bool rebuild = true}) {
     source.invalidate(rebuild: rebuild);
+    ServerApp.reloadClients(source.url);
   }
 
   void invalidateRoutes() {
diff --git a/packages/jaspr_test/lib/src/testers/client_tester.dart b/packages/jaspr_test/lib/src/testers/client_tester.dart
index 5f5821ccf..65f2abfdf 100644
--- a/packages/jaspr_test/lib/src/testers/client_tester.dart
+++ b/packages/jaspr_test/lib/src/testers/client_tester.dart
@@ -4,6 +4,8 @@ import 'dart:js_interop';
 import 'package:jaspr/client.dart';
 // ignore: implementation_imports
 import 'package:jaspr/src/dom/type_checks.dart';
+// ignore: implementation_imports, invalid_use_of_visible_for_testing_member
+import 'package:jaspr/src/framework/framework.dart' show GlobalComponentsBinding;
 import 'package:meta/meta.dart';
 import 'package:test/test.dart';
 import 'package:universal_web/web.dart' as web;
@@ -36,6 +38,9 @@ void testClient(
 
       // Clear all nodes
       web.document.body?.replaceChildren(<web.Node>[].toJS);
+
+      // ignore: invalid_use_of_visible_for_testing_member
+      GlobalComponentsBinding.clearGlobalKeys();
     },
     skip: skip,
     timeout: timeout,
diff --git a/pubspec.lock b/pubspec.lock
index 2e767f70f..4d7c9c00b 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -1171,10 +1171,10 @@ packages:
     dependency: transitive
     description:
       name: meta
-      sha256: "23f08335362185a5ea2ad3a4e597f1375e78bce8a040df5c600c8d3552ef2394"
+      sha256: "1741988757a65eb6b36abe716829688cf01910bbf91c34354ff7ec1c3de2b349"
       url: "https://pub.dev"
     source: hosted
-    version: "1.17.0"
+    version: "1.18.0"
   mime:
     dependency: transitive
     description:
@@ -1824,26 +1824,26 @@ packages:
     dependency: transitive
     description:
       name: test
-      sha256: "280d6d890011ca966ad08df7e8a4ddfab0fb3aa49f96ed6de56e3521347a9ae7"
+      sha256: "8d9ceddbab833f180fbefed08afa76d7c03513dfdba87ffcec2718b02bbcbf20"
       url: "https://pub.dev"
     source: hosted
-    version: "1.30.0"
+    version: "1.31.0"
   test_api:
     dependency: transitive
     description:
       name: test_api
-      sha256: "8161c84903fd860b26bfdefb7963b3f0b68fee7adea0f59ef805ecca346f0c7a"
+      sha256: "949a932224383300f01be9221c39180316445ecb8e7547f70a41a35bf421fb9e"
       url: "https://pub.dev"
     source: hosted
-    version: "0.7.10"
+    version: "0.7.11"
   test_core:
     dependency: transitive
     description:
       name: test_core
-      sha256: "0381bd1585d1a924763c308100f2138205252fb90c9d4eeaf28489ee65ccde51"
+      sha256: "1991d4cfe85d5043241acac92962c3977c8d2f2add1ee73130c7b286417d1d34"
       url: "https://pub.dev"
     source: hosted
-    version: "0.6.16"
+    version: "0.6.17"
   test_reflective_loader:
     dependency: transitive
     description: