diff --git a/core/modules/big_pipe/big_pipe.libraries.yml b/core/modules/big_pipe/big_pipe.libraries.yml
index 6da49b78e0..9a49d6a170 100644
--- a/core/modules/big_pipe/big_pipe.libraries.yml
+++ b/core/modules/big_pipe/big_pipe.libraries.yml
@@ -1,5 +1,8 @@
 big_pipe:
   version: VERSION
+  css:
+    theme:
+      css/big_pipe.css: {}
   js:
     js/big_pipe.js: {}
   drupalSettings:
diff --git a/core/modules/big_pipe/big_pipe.module b/core/modules/big_pipe/big_pipe.module
index fa0518ad3d..1314106257 100644
--- a/core/modules/big_pipe/big_pipe.module
+++ b/core/modules/big_pipe/big_pipe.module
@@ -76,3 +76,56 @@ function big_pipe_page_attachments(array &$page) {
     }
   }
 }
+
+/**
+ * Implements hook_theme().
+ */
+function big_pipe_theme() {
+  return [
+    'big_pipe_interface_preview' => [
+      'variables' => [
+        'callback' => NULL,
+        'arguments' => NULL,
+      ],
+    ],
+  ];
+}
+
+/**
+ * Implements hook_theme_suggestions_HOOK().
+ */
+function big_pipe_theme_suggestions_big_pipe_interface_preview(array $variables) {
+  $common_callbacks_simplified_suggestions = [
+    'Drupal-block-BlockViewBuilder--lazyBuilder' => 'block',
+  ];
+
+  $suggestions = [];
+  $suggestion = 'big_pipe_interface_preview';
+  if ($variables['callback']) {
+    $callback = preg_replace('/[^a-zA-Z0-9]/', '_', $variables['callback']);
+    if (is_array($callback)) {
+      $callback = implode('__', $callback);
+    }
+
+    // Use simplified template suggestion, if any.
+    // For example, this simplifies
+    // big-pipe-interface-preview--Drupal-block-BlockViewBuilder--lazyBuilder--<BLOCK ID>.html.twig
+    // to
+    // big-pipe-interface-preview--block--<BLOCK ID>.html.twig
+    if (isset($common_callbacks_simplified_suggestions[$callback])) {
+      $callback = $common_callbacks_simplified_suggestions[$callback];
+    }
+
+    $suggestions[] = $suggestion .= '__' . $callback;
+    if (is_array($variables['arguments'])) {
+      $arguments = preg_replace('/[^a-zA-Z0-9]/', '_', $variables['arguments']);
+      foreach ($arguments as $argument) {
+        if (empty($argument)) {
+          continue;
+        }
+        $suggestions[] = $suggestion . '__' . $argument;
+      }
+    }
+  }
+  return $suggestions;
+}
diff --git a/core/modules/big_pipe/src/Render/BigPipe.php b/core/modules/big_pipe/src/Render/BigPipe.php
index 6913dbfb33..73f4c2aa6e 100644
--- a/core/modules/big_pipe/src/Render/BigPipe.php
+++ b/core/modules/big_pipe/src/Render/BigPipe.php
@@ -711,14 +711,11 @@ protected function renderPlaceholder($placeholder, array $placeholder_render_arr
    *   only keep the first occurrence.
    */
   protected function getPlaceholderOrder($html, $placeholders) {
-    $fragments = explode('<span data-big-pipe-placeholder-id="', $html);
-    array_shift($fragments);
     $placeholder_ids = [];
-
-    foreach ($fragments as $fragment) {
-      $t = explode('"></span>', $fragment, 2);
-      $placeholder_id = $t[0];
-      $placeholder_ids[] = $placeholder_id;
+    $dom = Html::load($html);
+    $xpath = new \DOMXPath($dom);
+    foreach ($xpath->query('//span[@data-big-pipe-placeholder-id]') as $node) {
+      $placeholder_ids[] = Html::escape($node->getAttribute('data-big-pipe-placeholder-id'));
     }
     $placeholder_ids = array_unique($placeholder_ids);
 
diff --git a/core/modules/big_pipe/src/Render/Placeholder/BigPipeStrategy.php b/core/modules/big_pipe/src/Render/Placeholder/BigPipeStrategy.php
index bd022f2ef3..c417c7add9 100644
--- a/core/modules/big_pipe/src/Render/Placeholder/BigPipeStrategy.php
+++ b/core/modules/big_pipe/src/Render/Placeholder/BigPipeStrategy.php
@@ -198,8 +198,19 @@ protected static function placeholderIsAttributeSafe($placeholder) {
   protected static function createBigPipeJsPlaceholder($original_placeholder, array $placeholder_render_array) {
     $big_pipe_placeholder_id = static::generateBigPipePlaceholderId($original_placeholder, $placeholder_render_array);
 
+    $interface_preview = [];
+    if (isset($placeholder_render_array['#lazy_builder'])) {
+      $interface_preview = [
+        '#theme' => 'big_pipe_interface_preview',
+        '#callback' => $placeholder_render_array['#lazy_builder'][0],
+        '#arguments' => $placeholder_render_array['#lazy_builder'][1],
+      ];
+    }
+
     return [
-      '#markup' => '<span data-big-pipe-placeholder-id="' . Html::escape($big_pipe_placeholder_id) . '"></span>',
+      '#prefix' => '<span data-big-pipe-placeholder-id="' . Html::escape($big_pipe_placeholder_id) . '">',
+      'interface_preview' => $interface_preview,
+      '#suffix' => '</span>',
       '#cache' => [
         'max-age' => 0,
         'contexts' => [
diff --git a/core/modules/big_pipe/templates/big-pipe-interface-preview.html.twig b/core/modules/big_pipe/templates/big-pipe-interface-preview.html.twig
new file mode 100644
index 0000000000..06a2d13c11
--- /dev/null
+++ b/core/modules/big_pipe/templates/big-pipe-interface-preview.html.twig
@@ -0,0 +1,9 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a BigPipe JS placeholder interface preview.
+ *
+ * @see \Drupal\big_pipe\Render\Placeholder\BigPipeStrategy::createBigPipeJsPlaceholder()
+ */
+#}
+{{ preview }}