diff --git a/doric-android/doric/src/main/java/pub/doric/DoricNativeDriver.java b/doric-android/doric/src/main/java/pub/doric/DoricNativeDriver.java
index c06c9c00..334bf1d8 100644
--- a/doric-android/doric/src/main/java/pub/doric/DoricNativeDriver.java
+++ b/doric-android/doric/src/main/java/pub/doric/DoricNativeDriver.java
@@ -101,7 +101,11 @@ public class DoricNativeDriver implements IDoricDriver {
             if (object == contextId) {
                 continue;
             }
-            stringBuilder.append(object.toString()).append(",");
+            if (object == null) {
+                stringBuilder.append("null").append(",");
+            } else {
+                stringBuilder.append(object.toString()).append(",");
+            }
         }
         final String anchorName = stringBuilder.toString();
         final DoricPerformanceProfile finalProfile = profile;
diff --git a/doric-demo/src/TSXDemo.tsx b/doric-demo/src/TSXDemo.tsx
index 508ea7da..e5c650fe 100644
--- a/doric-demo/src/TSXDemo.tsx
+++ b/doric-demo/src/TSXDemo.tsx
@@ -1,51 +1,138 @@
 import {
   jsx,
   VLayout,
+  HLayout,
   Panel,
   Gravity,
   Group,
   layoutConfig,
   Text,
   createRef,
+  Color,
+  loge,
 } from "doric";
 
-function createFragment() {
-  return (
-    <>
-      <Text text="This is line 1 in fragment"></Text>
-      <Text text="This is line 2 in fragment"></Text>
-    </>
-  );
-}
-
 @Entry
 class Counter extends Panel {
   build(root: Group) {
-    const fragments = createFragment();
-    const ref = createRef<Text>();
-    let count = 0;
+    root.backgroundColor = Color.BLACK;
+    const hour1Ref = createRef<Text>();
+    const hour2Ref = createRef<Text>();
+    const min1Ref = createRef<Text>();
+    const min2Ref = createRef<Text>();
+    const sec1Ref = createRef<Text>();
+    const sec2Ref = createRef<Text>();
+    const comm1Ref = createRef<Text>();
+    const comm2Ref = createRef<Text>();
+
     <VLayout
       space={20}
       gravity={Gravity.Center}
       layoutConfig={layoutConfig().fit().configAlignment(Gravity.Center)}
       parent={root}
     >
-      <Text textSize={40} ref={ref}>
-        {`${count}`}
-      </Text>
-      <Text
-        textSize={20}
-        text="Click to count"
-        onClick={() => {
-          count++;
-          ref.current.text = `${count}`;
-        }}
-      ></Text>
-      {fragments}
-      {fragments}
-      {[0, 1, 2, 3].map((i) => (
-        <Text text={`Index ${i}`} />
-      ))}
+      <HLayout space={5}>
+        <Text
+          textSize={40}
+          ref={hour1Ref}
+          textColor={Color.WHITE}
+          border={{ width: 1, color: Color.BLUE }}
+          padding={{ left: 10, right: 10, top: 10, bottom: 10 }}
+        >
+          0
+        </Text>
+        <Text
+          textSize={40}
+          ref={hour2Ref}
+          textColor={Color.WHITE}
+          border={{ width: 1, color: Color.BLUE }}
+          padding={{ left: 10, right: 10, top: 10, bottom: 10 }}
+        >
+          0
+        </Text>
+        <Text
+          ref={comm1Ref}
+          textColor={Color.WHITE}
+          textSize={40}
+          padding={{ top: 10, bottom: 10 }}
+        >
+          :
+        </Text>
+        <Text
+          textSize={40}
+          ref={min1Ref}
+          textColor={Color.WHITE}
+          border={{ width: 1, color: Color.BLUE }}
+          padding={{ left: 10, right: 10, top: 10, bottom: 10 }}
+        >
+          0
+        </Text>
+        <Text
+          textSize={40}
+          ref={min2Ref}
+          textColor={Color.WHITE}
+          border={{ width: 1, color: Color.BLUE }}
+          padding={{ left: 10, right: 10, top: 10, bottom: 10 }}
+        >
+          0
+        </Text>
+        <Text
+          ref={comm2Ref}
+          textSize={40}
+          textColor={Color.WHITE}
+          padding={{ top: 10, bottom: 10 }}
+        >
+          :
+        </Text>
+        <Text
+          textSize={40}
+          ref={sec1Ref}
+          textColor={Color.WHITE}
+          border={{ width: 1, color: Color.BLUE }}
+          padding={{ left: 10, right: 10, top: 10, bottom: 10 }}
+        >
+          0
+        </Text>
+        <Text
+          textSize={40}
+          ref={sec2Ref}
+          textColor={Color.WHITE}
+          border={{ width: 1, color: Color.BLUE }}
+          padding={{ left: 10, right: 10, top: 10, bottom: 10 }}
+        >
+          0
+        </Text>
+      </HLayout>
     </VLayout>;
+
+    this.addOnRenderFinishedCallback(async () => {
+      const width = await root.getWidth(this.context);
+      [
+        hour1Ref,
+        hour2Ref,
+        comm1Ref,
+        min1Ref,
+        min2Ref,
+        comm2Ref,
+        sec1Ref,
+        sec2Ref,
+      ].forEach((e) => {
+        e.current.apply({
+          border: undefined,
+          textSize: width / 10,
+        });
+      });
+    });
+    setInterval(() => {
+      const time = new Date();
+      hour1Ref.current.text = `${Math.floor(time.getHours() / 10)}`;
+      hour2Ref.current.text = `${Math.floor(time.getHours() % 10)}`;
+
+      min1Ref.current.text = `${Math.floor(time.getMinutes() / 10)}`;
+      min2Ref.current.text = `${Math.floor(time.getMinutes() % 10)}`;
+
+      sec1Ref.current.text = `${Math.floor(time.getSeconds() / 10)}`;
+      sec2Ref.current.text = `${Math.floor(time.getSeconds() % 10)}`;
+    }, 100);
   }
 }