@janbox/storefront-builder 2.0.9 → 2.0.10

package/README.md

@@ -79,9 +79,16 @@ export default function BuilderPage() {
 
 Dùng `Composer` + `Canvas` để render một trang đã lưu, không cần giao diện editor. Đây là cách dùng cho phía storefront hiển thị cho người mua.
 
+`Canvas` hỗ trợ hai chế độ render:
+
+1. **Truyền `data`** — ưu tiên render từ serialized data (JSON từ editor)
+2. **Truyền `children`** — nếu không truyền `data`, Canvas sẽ render children như JSX thông thường
+
+### Render từ serialized data
+
 ```tsx
 import '@janbox/storefront-builder/style.css';
-import { Composer, Canvas, RootNode } from '@janbox/storefront-builder';
+import { Composer, Canvas } from '@janbox/storefront-builder';
 import type { SerializedNodes } from '@janbox/storefront-builder';
 
 const savedData: SerializedNodes = { /* JSON từ editor */ };
@@ -89,14 +96,37 @@ const savedData: SerializedNodes = { /* JSON từ editor */ };
 export default function StorefrontPage() {
   return (
     <Composer>
-      <Canvas data={savedData}>
-        <RootNode />
+      <Canvas data={savedData} />
+    </Composer>
+  );
+}
+```
+
+`data` nhận `SerializedNodes` object hoặc JSON string. Khi truyền `data`, Canvas sẽ bỏ qua children và render hoàn toàn từ dữ liệu đã serialize.
+
+### Render từ children (không có data)
+
+```tsx
+import '@janbox/storefront-builder/style.css';
+import { Composer, Canvas, RootNode, BoxNode, HeadingNode } from '@janbox/storefront-builder';
+
+export default function StorefrontPage() {
+  return (
+    <Composer>
+      <Canvas>
+        <RootNode>
+          <BoxNode>
+            <HeadingNode text="Hello World" />
+          </BoxNode>
+        </RootNode>
       </Canvas>
     </Composer>
   );
 }
 ```
 
+Khi không truyền `data`, Canvas sử dụng children làm cây node mặc định để render.
+
 ---
 
 ## Khái niệm cơ bản