diff --git a/ReactCommon/fabric/components/art/surfaceview/ARTSurfaceViewShadowNode.cpp b/ReactCommon/fabric/components/art/surfaceview/ARTSurfaceViewShadowNode.cpp
index d098629b32..c5a2fdf31a 100644
--- a/ReactCommon/fabric/components/art/surfaceview/ARTSurfaceViewShadowNode.cpp
+++ b/ReactCommon/fabric/components/art/surfaceview/ARTSurfaceViewShadowNode.cpp
@@ -6,11 +6,46 @@
  */
 
 #include <react/components/art/ARTSurfaceViewShadowNode.h>
+#include <react/components/art/ARTBaseShadowNode.h>
+#include <react/components/art/ARTGroupShadowNode.h>
+#include <react/components/art/ARTSurfaceViewState.h>
 
 namespace facebook {
 namespace react {
 
+using Content = ARTSurfaceViewShadowNode::Content;
+
 extern const char ARTSurfaceViewComponentName[] = "ARTSurfaceView";
 
+void ARTSurfaceViewShadowNode::layout(LayoutContext layoutContext) {
+  ensureUnsealed();
+  auto content = getContent();
+  updateStateIfNeeded(content);
+}
+
+Content const &ARTSurfaceViewShadowNode::getContent() const {
+  if (content_.has_value()) {
+    return content_.value();
+  }
+  ensureUnsealed();
+  auto elements = Element::ListOfShared{};
+  ARTBaseShadowNode::buildElements(*this, elements);
+  content_ = Content{elements};
+  return content_.value();
+}
+
+void ARTSurfaceViewShadowNode::updateStateIfNeeded(Content const &content) {
+  ensureUnsealed();
+
+  // TODO T64130144: Compare to make sure it is needed.
+  //   auto &state = getStateData();
+  //   if (state.attributedString == content.attributedString &&
+  //       state.layoutManager == textLayoutManager_) {
+  //     return;
+  //   }
+
+  setStateData(ARTSurfaceViewState{content.elements});
+}
+
 } // namespace react
 } // namespace facebook
diff --git a/ReactCommon/fabric/components/art/surfaceview/ARTSurfaceViewShadowNode.h b/ReactCommon/fabric/components/art/surfaceview/ARTSurfaceViewShadowNode.h
index 3099447aa7..aceef35286 100644
--- a/ReactCommon/fabric/components/art/surfaceview/ARTSurfaceViewShadowNode.h
+++ b/ReactCommon/fabric/components/art/surfaceview/ARTSurfaceViewShadowNode.h
@@ -7,8 +7,9 @@
 
 #pragma once
 
-#include <folly/Optional.h>
 #include <react/components/art/ARTSurfaceViewProps.h>
+#include <react/components/art/ARTSurfaceViewState.h>
+#include <react/components/art/Element.h>
 #include <react/components/view/ConcreteViewShadowNode.h>
 #include <react/core/ConcreteShadowNode.h>
 #include <react/core/LayoutContext.h>
@@ -19,16 +20,17 @@ namespace react {
 
 extern const char ARTSurfaceViewComponentName[];
 
-using ParagraphEventEmitter = ViewEventEmitter;
+using ARTSurfaceViewEventEmitter = ViewEventEmitter;
 
 /*
- * `ShadowNode` for <Paragraph> component, represents <View>-like component
- * containing and displaying text. Text content is represented as nested <Text>
- * and <RawText> components.
+ * `ShadowNode` for <ARTSurfaceViewState> component, represents <View>-like
+ * component containing that will be used to display ARTElements.
  */
 class ARTSurfaceViewShadowNode : public ConcreteViewShadowNode<
                                      ARTSurfaceViewComponentName,
-                                     ARTSurfaceViewProps> {
+                                     ARTSurfaceViewProps,
+                                     ARTSurfaceViewEventEmitter,
+                                     ARTSurfaceViewState> {
  public:
   using ConcreteViewShadowNode::ConcreteViewShadowNode;
 
@@ -37,6 +39,23 @@ class ARTSurfaceViewShadowNode : public ConcreteViewShadowNode<
     traits.set(ShadowNodeTraits::Trait::LeafYogaNode);
     return traits;
   }
+
+  class Content final {
+   public:
+    Element::ListOfShared elements{};
+  };
+
+  void layout(LayoutContext layoutContext) override;
+
+ private:
+  Content const &getContent() const;
+
+  void updateStateIfNeeded(Content const &content);
+
+  /*
+   * Cached content of the subtree started from the node.
+   */
+  mutable better::optional<Content> content_{};
 };
 
 } // namespace react
diff --git a/ReactCommon/fabric/components/art/surfaceview/ARTSurfaceViewState.cpp b/ReactCommon/fabric/components/art/surfaceview/ARTSurfaceViewState.cpp
new file mode 100644
index 0000000000..8e85c71af6
--- /dev/null
+++ b/ReactCommon/fabric/components/art/surfaceview/ARTSurfaceViewState.cpp
@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include <react/components/art/ARTSurfaceViewState.h>
+#include <react/debug/debugStringConvertibleUtils.h>
+
+namespace facebook {
+namespace react {
+
+#ifdef ANDROID
+folly::dynamic ARTSurfaceViewState::getDynamic() const {
+  return folly::dynamic::object();
+}
+#endif
+
+} // namespace react
+} // namespace facebook
diff --git a/ReactCommon/fabric/components/art/surfaceview/ARTSurfaceViewState.h b/ReactCommon/fabric/components/art/surfaceview/ARTSurfaceViewState.h
new file mode 100644
index 0000000000..38183009dc
--- /dev/null
+++ b/ReactCommon/fabric/components/art/surfaceview/ARTSurfaceViewState.h
@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+#include <react/components/art/Element.h>
+
+#ifdef ANDROID
+#include <folly/dynamic.h>
+#endif
+
+namespace facebook {
+namespace react {
+
+/*
+ * State for <ARTSurfaceViewState> component.
+ * Represents what to render and how to render.
+ */
+class ARTSurfaceViewState final {
+ public:
+  Element::ListOfShared elements{};
+
+#ifdef ANDROID
+  ARTSurfaceViewState(Element::ListOfShared const &elements)
+      : elements(elements) {}
+  ARTSurfaceViewState() = default;
+  ARTSurfaceViewState(
+      ARTSurfaceViewState const &previousState,
+      folly::dynamic const &data) {
+    assert(false && "Not supported");
+  };
+  folly::dynamic getDynamic() const;
+#endif
+};
+
+} // namespace react
+} // namespace facebook