diff --git a/devtools/devtools-backend/include/api/adapter/data/domain_metas.h b/devtools/devtools-backend/include/api/adapter/data/domain_metas.h
index 62cad27176a..9a1e41b54bd 100644
--- a/devtools/devtools-backend/include/api/adapter/data/domain_metas.h
+++ b/devtools/devtools-backend/include/api/adapter/data/domain_metas.h
@@ -22,11 +22,11 @@
 
 #include <string>
 #include <vector>
-#include "api/adapter/data/serializable.h"
+#include "nlohmann/json.hpp"
 
 namespace hippy::devtools {
 
-class DomainMetas : public Serializable {
+class DomainMetas {
  public:
   DomainMetas() = default;
   explicit DomainMetas(uint32_t node_id) : node_id_(node_id) {}
@@ -44,7 +44,7 @@ class DomainMetas : public Serializable {
   inline void SetNodeValue(std::string node_value) { node_value_ = node_value; }
   inline void SetChildrenCount(uint64_t children_count) { children_count_ = children_count; }
   inline void AddChild(const DomainMetas& meta) { children_.emplace_back(meta); }
-  std::string Serialize() const override;
+  nlohmann::json ToJson() const;
 
  private:
   uint32_t node_id_;
diff --git a/devtools/devtools-backend/src/api/adapter/data/domain_metas.cc b/devtools/devtools-backend/src/api/adapter/data/domain_metas.cc
index d3a169ab00b..a484614433d 100644
--- a/devtools/devtools-backend/src/api/adapter/data/domain_metas.cc
+++ b/devtools/devtools-backend/src/api/adapter/data/domain_metas.cc
@@ -36,78 +36,28 @@ constexpr char kLayoutX[] = "x";
 constexpr char kLayoutY[] = "y";
 constexpr char kStyle[] = "style";
 
-std::string DomainMetas::Serialize() const {
-  std::string node_str = "{\"";
-  node_str += kNodeId;
-  node_str += "\":";
-  node_str += std::to_string(node_id_);
-  node_str += ",\"";
-  node_str += kParentId;
-  node_str += "\":";
-  node_str += std::to_string(parent_id_);
-  node_str += ",\"";
-  node_str += kRootId;
-  node_str += "\":";
-  node_str += std::to_string(root_id_);
-  node_str += ",\"";
-  node_str += kClassName;
-  node_str += "\":\"";
-  node_str += class_name_;
-  node_str += "\",\"";
-  node_str += kNodeName;
-  node_str += "\":\"";
-  node_str += node_name_;
-  node_str += "\",\"";
-  node_str += kLocalName;
-  node_str += "\":\"";
-  node_str += local_name_;
-  node_str += "\",\"";
-  node_str += kNodeValue;
-  node_str += "\":\"";
-  node_str += node_value_;
-  node_str += "\",\"";
-  node_str += kChildNodeCount;
-  node_str += "\":";
-  node_str += std::to_string(children_.size());
-  node_str += ",\"";
-  node_str += kStyle;
-  node_str += "\":";
-  node_str += style_props_;
-  node_str += ",\"";
-  node_str += kAttributes;
-  node_str += "\":";
-  node_str += total_props_;
-  node_str += ",\"";
-  node_str += kLayoutX;
-  node_str += "\":";
-  node_str += std::to_string(static_cast<int>(layout_x_));
-  node_str += ",\"";
-  node_str += kLayoutY;
-  node_str += "\":";
-  node_str += std::to_string(static_cast<int>(layout_y_));
-  node_str += ",\"";
-  node_str += kWidth;
-  node_str += "\":";
-  node_str += std::to_string(static_cast<int>(width_));
-  node_str += ",\"";
-  node_str += kHeight;
-  node_str += "\":";
-  node_str += std::to_string(static_cast<int>(height_));
-  node_str += ",\"";
-  node_str += kChildNodeCount;
-  node_str += "\":";
-  node_str += std::to_string(static_cast<int>(children_count_));
+nlohmann::json DomainMetas::ToJson() const {
+  nlohmann::json jsonObject;
+  jsonObject[kNodeId] = node_id_;
+  jsonObject[kParentId] = parent_id_;
+  jsonObject[kRootId] = root_id_;
+  jsonObject[kClassName] = class_name_;
+  jsonObject[kNodeName] = node_name_;
+  jsonObject[kLocalName] = local_name_;
+  jsonObject[kNodeValue] = node_value_;
+  jsonObject[kChildNodeCount] = children_.size();
+  jsonObject[kStyle] = nlohmann::json::parse(style_props_, nullptr, false);
+  jsonObject[kAttributes] = nlohmann::json::parse(total_props_, nullptr, false);
+  jsonObject[kLayoutX] = static_cast<int>(layout_x_);
+  jsonObject[kLayoutY] = static_cast<int>(layout_y_);
+  jsonObject[kWidth] = static_cast<int>(width_);
+  jsonObject[kHeight] = static_cast<int>(height_);
+  jsonObject[kChildNodeCount] = static_cast<int>(children_count_);
   if (!children_.empty()) {
-    node_str += ",\"children\": [";
     for (auto& child : children_) {
-      node_str += child.Serialize();
-      node_str += ",";
+      jsonObject["children"].push_back(child.ToJson());
     }
-    node_str = node_str.substr(0, node_str.length() - 1);  // remove last ","
-    node_str += "]";
   }
-  node_str += "}";
-  return node_str;
+  return jsonObject;
 }
-
 }  // namespace hippy::devtools
diff --git a/devtools/devtools-backend/src/module/domain/css_domain.cc b/devtools/devtools-backend/src/module/domain/css_domain.cc
index a1232227067..8f060d6fa00 100644
--- a/devtools/devtools-backend/src/module/domain/css_domain.cc
+++ b/devtools/devtools-backend/src/module/domain/css_domain.cc
@@ -51,7 +51,7 @@ void CssDomain::RegisterCallback() {
       return;
     }
     auto response_callback = [callback, provider = self->GetDataProvider()](const DomainMetas& data) {
-      auto model = CssModel::CreateModel(nlohmann::json::parse(data.Serialize(), nullptr, false));
+      auto model = CssModel::CreateModel(data.ToJson());
       model.SetDataProvider(provider);
       if (callback) {
         callback(model);
diff --git a/devtools/devtools-backend/src/module/domain/dom_domain.cc b/devtools/devtools-backend/src/module/domain/dom_domain.cc
index 37c7176c20e..abac0f75da8 100644
--- a/devtools/devtools-backend/src/module/domain/dom_domain.cc
+++ b/devtools/devtools-backend/src/module/domain/dom_domain.cc
@@ -61,7 +61,7 @@ void DomDomain::RegisterCallback() {
     auto dom_tree_adapter = self->GetDataProvider()->dom_tree_adapter;
     if (dom_tree_adapter) {
       auto response_callback = [callback, provider = self->GetDataProvider()](const DomainMetas& data) {
-        auto model = DomModel::CreateModel(nlohmann::json::parse(data.Serialize(), nullptr, false));
+        auto model = DomModel::CreateModel(data.ToJson());
         model.SetDataProvider(provider);
         if (callback) {
           callback(model);
diff --git a/devtools/devtools-integration/native/include/devtools/devtools_utils.h b/devtools/devtools-integration/native/include/devtools/devtools_utils.h
index efdf1323818..f6821088c6c 100644
--- a/devtools/devtools-integration/native/include/devtools/devtools_utils.h
+++ b/devtools/devtools-integration/native/include/devtools/devtools_utils.h
@@ -61,7 +61,7 @@ class DevToolsUtil {
   static std::string ParseNodeKeyProps(const std::string& node_key, const NodePropsUnorderedMap& node_props);
   static std::string ParseNodeProps(const NodePropsUnorderedMap& node_props);
   static std::string ParseNodeProps(const std::unordered_map<std::string, HippyValue>& node_props);
-  static std::string ParseDomValue(const HippyValue& value);
+  static std::string DumpHippyValue(const HippyValue& value);
   static void AppendDomKeyValue(std::string& node_str,
                                 bool& first_object,
                                 const std::string& node_key,
diff --git a/devtools/devtools-integration/native/src/devtools_utils.cc b/devtools/devtools-integration/native/src/devtools_utils.cc
index c522daa6d26..00593a77c4c 100644
--- a/devtools/devtools-integration/native/src/devtools_utils.cc
+++ b/devtools/devtools-integration/native/src/devtools_utils.cc
@@ -244,79 +244,51 @@ LayoutResult DevToolsUtil::GetLayoutOnScreen(const std::shared_ptr<DomNode>& roo
   return layout_result;
 }
 
-std::string DevToolsUtil::ParseDomValue(const HippyValue& hippy_value) {
-  if (!hippy_value.IsObject()) {
-    FOOTSTONE_DLOG(INFO) << kDevToolsTag << "ParseTotalProps, node props is not object";
-    return "{}";
-  }
-  std::string node_str = "{";
-  bool first_object = true;
-  for (auto iterator : hippy_value.ToObjectChecked()) {
-    if (iterator.first == "uri" || iterator.first == "src") {
-      iterator.second = "";
+std::string DevToolsUtil::DumpHippyValue(const HippyValue& hippy_value) {
+  std::string result_str = "";
+  if (hippy_value.IsBoolean()) {
+    result_str = hippy_value.ToBooleanChecked() ? "true" : "false";
+  } else if (hippy_value.IsInt32()) {
+    result_str = std::to_string(hippy_value.ToInt32Checked());
+  } else if (hippy_value.IsUInt32()) {
+    result_str = std::to_string(hippy_value.ToUint32Checked());
+  } else if (hippy_value.IsDouble()) {
+    result_str = std::to_string(hippy_value.ToDoubleChecked());
+  } else if (hippy_value.IsString()) {
+    nlohmann::json hippy_value_json = hippy_value.ToStringChecked();
+    result_str += hippy_value_json.dump();
+  } else if (hippy_value.IsArray()) {
+    auto props_array = hippy_value.ToArrayChecked();
+    result_str = "[";
+    for (auto it = props_array.begin(); it != props_array.end(); ++it) {
+      if (it->IsNull() || it->IsUndefined()) {
+        continue;
+      }
+      result_str += DumpHippyValue(*it);
+      if (it != props_array.end() - 1) {
+        result_str += ",";
+      }
     }
-    std::string key = iterator.first;
-    if (iterator.second.IsBoolean()) {
-      node_str += first_object ? "\"" : ",\"";
-      node_str += key;
-      node_str += "\":";
-      node_str += iterator.second.ToBooleanChecked() ? "true" : "false";
-      first_object = false;
-    } else if (iterator.second.IsInt32()) {
-      node_str += first_object ? "\"" : ",\"";
-      node_str += key;
-      node_str += "\":";
-      node_str += std::to_string(iterator.second.ToInt32Checked());
-      first_object = false;
-    } else if (iterator.second.IsUInt32()) {
-      node_str += first_object ? "\"" : ",\"";
-      node_str += key;
-      node_str += "\":";
-      node_str += std::to_string(iterator.second.IsUInt32());
-      first_object = false;
-    } else if (iterator.second.IsDouble()) {
-      node_str += first_object ? "\"" : ",\"";
-      node_str += key;
-      node_str += "\":";
-      node_str += std::to_string(iterator.second.ToDoubleChecked());
-      first_object = false;
-    } else if (iterator.second.IsString()) {
-      node_str += first_object ? "\"" : ",\"";
-      node_str += key;
-      node_str += "\":\"";
-      node_str += iterator.second.ToStringChecked();
-      node_str += "\"";
-      first_object = false;
-    } else if (iterator.second.IsArray()) {
-      auto props_array = iterator.second.ToArrayChecked();
-      std::string array = "[";
-      for (auto it = props_array.begin(); it != props_array.end(); ++it) {
-        if (it->IsNull() || it->IsUndefined()) {
-          continue;
-        }
-        array += ParseDomValue(*it);
-        if (it != props_array.end() - 1) {
-          array += ",";
-        }
+    result_str += "]";
+  } else if (hippy_value.IsObject()) {
+    result_str = "{";
+    for (auto iterator : hippy_value.ToObjectChecked()) {
+      if (iterator.first == "uri" || iterator.first == "src") {
+        iterator.second = "";
       }
-      array += "]";
-
-      node_str += first_object ? "\"" : ",\"";
-      node_str += key;
-      node_str += "\":";
-      node_str += array;
-      first_object = false;
-
-    } else if (iterator.second.IsObject()) {
-      node_str += first_object ? "\"" : ",\"";
-      node_str += key;
-      node_str += "\":";
-      node_str += ParseDomValue(iterator.second);
-      first_object = false;
+      std::string key = iterator.first;
+      nlohmann::json key_json = key;
+      result_str += key_json.dump();
+      result_str += ":";
+      result_str += DumpHippyValue(iterator.second);
+      result_str += ",";
     }
+    result_str.pop_back();
+    result_str += "}";
+  } else {
+    result_str = "";
   }
-  node_str += "}";
-  return node_str;
+  return result_str;
 }
 
 std::string DevToolsUtil::ParseNodeKeyProps(const std::string& node_key, const NodePropsUnorderedMap& node_props) {
@@ -374,62 +346,14 @@ void DevToolsUtil::AppendDomKeyValue(std::string& node_str,
                                      bool& first_object,
                                      const std::string& node_key,
                                      const HippyValue& hippy_value) {
-  if (hippy_value.IsBoolean()) {
-    node_str += first_object ? "\"" : ",\"";
-    node_str += node_key;
-    node_str += "\":";
-    node_str += hippy_value.ToBooleanChecked() ? "true" : "false";
-    first_object = false;
-  } else if (hippy_value.IsInt32()) {
-    node_str += first_object ? "\"" : ",\"";
-    node_str += node_key;
-    node_str += "\":";
-    node_str += std::to_string(hippy_value.ToInt32Checked());
-    first_object = false;
-  } else if (hippy_value.IsUInt32()) {
-    node_str += first_object ? "\"" : ",\"";
-    node_str += node_key;
-    node_str += "\":";
-    node_str += std::to_string(hippy_value.IsUInt32());
-    first_object = false;
-  } else if (hippy_value.IsDouble()) {
-    node_str += first_object ? "\"" : ",\"";
-    node_str += node_key;
-    node_str += "\":";
-    node_str += std::to_string(hippy_value.ToDoubleChecked());
-    first_object = false;
-  } else if (hippy_value.IsString()) {
-    node_str += first_object ? "\"" : ",\"";
-    node_str += node_key;
-    node_str += "\":\"";
-    node_str += hippy_value.ToStringChecked();
-    node_str += "\"";
-    first_object = false;
-  } else if (hippy_value.IsArray()) {
-    auto props_array = hippy_value.ToArrayChecked();
-    std::string array = "[";
-    for (auto it = props_array.begin(); it != props_array.end(); ++it) {
-      if (it->IsNull() || it->IsUndefined()) {
-        continue;
-      }
-      array += ParseDomValue(*it);  // ParseDomValue(*it);
-      if (it != props_array.end() - 1) {
-        array += ",";
-      }
-    }
-    array += "]";
-    node_str += first_object ? "\"" : ",\"";
-    node_str += node_key;
-    node_str += "\":";
-    node_str += array;
-    first_object = false;
-  } else if (hippy_value.IsObject()) {
-    node_str += first_object ? "\"" : ",\"";
-    node_str += node_key;
-    node_str += "\":";
-    node_str += ParseDomValue(hippy_value);
-    first_object = false;
+  std::string hippy_value_str = DumpHippyValue(hippy_value);
+  if (hippy_value_str == "") {
+    return;
   }
+  nlohmann::json node_key_json = node_key;
+  node_str += first_object ? "" : ",";
+  node_str += node_key_json.dump() + ":" + hippy_value_str;
+  first_object = false;
 }
 
 void DevToolsUtil::PostDomTask(const std::weak_ptr<DomManager>& weak_dom_manager, std::function<void()> func) {