diff --git a/packages/ncform-show/src/components/playground/fixtures/adv-array-item-interaction.json b/packages/ncform-show/src/components/playground/fixtures/adv-array-item-interaction.json
new file mode 100644
index 0000000..2197acc
--- /dev/null
+++ b/packages/ncform-show/src/components/playground/fixtures/adv-array-item-interaction.json
@@ -0,0 +1,45 @@
+{
+  "type": "object",
+  "properties": {
+    "user": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "adult": {
+            "type": "boolean",
+            "ui": {
+              "label": "Adult",
+              "help": {
+                "show": true,
+                "text": "?"
+              }
+            }
+          },
+          "gameName": {
+            "type": "string",
+            "ui": {
+              "label": "Like games",
+              "disabled": "dx: !{{$root.user[i].adult}}"
+            }
+          },
+          "gameAge": {
+            "type": "integer",
+            "ui": {
+              "label": "Game age",
+              "disabled": "dx: !{{$root.user[i].adult}}"
+            }
+          }
+        }
+      },
+      "ui": {
+        "showLegend": false,
+        "noLabelSpace": true,
+        "widget": "array-table",
+        "widgetConfig": {
+          "showOneIfEmpty": true
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/ncform-show/src/components/playground/fixtures/adv-check-association.json b/packages/ncform-show/src/components/playground/fixtures/adv-check-association.json
new file mode 100644
index 0000000..47143a9
--- /dev/null
+++ b/packages/ncform-show/src/components/playground/fixtures/adv-check-association.json
@@ -0,0 +1,72 @@
+{
+  "type": "object",
+  "properties": {
+    "isRequired": {
+      "type": "boolean",
+      "ui": {
+        "label": "Required",
+        "linkFields": [
+          {
+            "fieldPath": "num_1",
+            "rules": [
+              "required"
+            ]
+          },
+          {
+            "fieldPath": "num_2",
+            "rules": [
+              "required"
+            ]
+          }
+        ]
+      }
+    },
+    "num_1": {
+      "type": "number",
+      "ui": {
+        "description": "num_1 >= num_2",
+        "columns": 6,
+        "linkFields": [
+          {
+            "fieldPath": "num_2",
+            "rules": [
+              "maximum"
+            ]
+          }
+        ]
+      },
+      "rules": {
+        "required": {
+          "value": "dx: {{$root.isRequired}}"
+        },
+        "minimum": {
+          "value": "dx: {{$root.num_2}} || 0",
+          "errMsg": "num_1 >= num_2"
+        }
+      }
+    },
+    "num_2": {
+      "type": "number",
+      "ui": {
+        "columns": 6,
+        "linkFields": [
+          {
+            "fieldPath": "num_1",
+            "rules": [
+              "minimum"
+            ]
+          }
+        ]
+      },
+      "rules": {
+        "required": {
+          "value": "dx: {{$root.isRequired}}"
+        },
+        "maximum": {
+          "value": "dx: {{$root.num_1}} || 0",
+          "errMsg": "num_2 <= num_1"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/ncform-show/src/components/playground/fixtures/adv-control-interaction.json b/packages/ncform-show/src/components/playground/fixtures/adv-control-interaction.json
new file mode 100644
index 0000000..2c11480
--- /dev/null
+++ b/packages/ncform-show/src/components/playground/fixtures/adv-control-interaction.json
@@ -0,0 +1,35 @@
+{
+  "type": "object",
+  "properties": {
+    "age": {
+      "type": "integer",
+      "ui": {
+        "label": "Age",
+        "description": "More than 18 years old to continue filling"
+      }
+    },
+    "gameInfo": {
+      "type": "object",
+      "properties": {
+        "game": {
+          "type": "string",
+          "ui": {
+            "label": "Like games",
+            "description": "Fill in and unlock"
+          }
+        },
+        "gameAge": {
+          "type": "integer",
+          "ui": {
+            "label": "Game age",
+            "disabled": "dx: !{{$root.gameInfo.game}}"
+          }
+        }
+      },
+      "ui": {
+        "legend": "Game info",
+        "hidden": "dx: !{{$root.age}} || {{$root.age}} < 18"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/ncform-show/src/components/playground/fixtures/adv-custom-rule.json b/packages/ncform-show/src/components/playground/fixtures/adv-custom-rule.json
new file mode 100644
index 0000000..d0e1dca
--- /dev/null
+++ b/packages/ncform-show/src/components/playground/fixtures/adv-custom-rule.json
@@ -0,0 +1,102 @@
+{
+  "type": "object",
+  "properties": {
+    "startTime": {
+      "type": "string",
+      "ui": {
+        "widget": "date-picker"
+      },
+      "rules": {
+        "customRule": [
+          {
+            "script": "dx: !{{$root.endTime}} || {{$root.endTime}} >= {{$root.startTime}}",
+            "errMsg": "Start date must be less than or equal to the end date",
+            "linkItems": [
+              {
+                "fieldPath": "endTime",
+                "customRuleIdx": 0
+              }
+            ]
+          }
+        ]
+      }
+    },
+    "endTime": {
+      "type": "string",
+      "ui": {
+        "widget": "date-picker"
+      },
+      "rules": {
+        "customRule": [
+          {
+            "script": "dx: !{{$root.startTime}} || {{$root.endTime}} >= {{$root.startTime}}",
+            "errMsg": "End date must be greater than or equal to the start date",
+            "linkItems": [
+              {
+                "fieldPath": "startTime",
+                "customRuleIdx": 0
+              }
+            ]
+          }
+        ]
+      }
+    },
+    "arrayItems": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "startTime": {
+            "type": "string",
+            "ui": {
+              "widget": "date-picker"
+            },
+            "rules": {
+              "customRule": [
+                {
+                  "script": "dx: !{{$root.arrayItems[i].endTime}} || {{$root.arrayItems[i].endTime}} >= {{$root.arrayItems[i].startTime}}",
+                  "errMsg": "Start date must be less than or equal to the end date",
+                  "linkItems": [
+                    {
+                      "fieldPath": "arrayItems[i].endTime",
+                      "customRuleIdx": 0
+                    }
+                  ]
+                }
+              ]
+            }
+          },
+          "endTime": {
+            "type": "string",
+            "ui": {
+              "widget": "date-picker"
+            },
+            "rules": {
+              "customRule": [
+                {
+                  "script": "dx: !{{$root.arrayItems[i].startTime}} || {{$root.arrayItems[i].endTime}} >= {{$root.arrayItems[i].startTime}}",
+                  "errMsg": "End date must be greater than or equal to the start date",
+                  "linkItems": [
+                    {
+                      "fieldPath": "arrayItems[i].startTime",
+                      "customRuleIdx": 0
+                    }
+                  ]
+                }
+              ]
+            }
+          }
+        }
+      },
+      "ui": {
+        "showLabel": false,
+        "legend": "Array item",
+        "widget": "array-table",
+        "widgetConfig": {
+          "collapsed": false,
+          "showOneIfEmpty": true
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/ncform-show/src/components/playground/fixtures/adv-follow.json b/packages/ncform-show/src/components/playground/fixtures/adv-follow.json
new file mode 100644
index 0000000..2966280
--- /dev/null
+++ b/packages/ncform-show/src/components/playground/fixtures/adv-follow.json
@@ -0,0 +1,24 @@
+{
+  "type": "object",
+  "properties": {
+    "firstname": {
+      "type": "string",
+      "ui": {
+        "columns": 6
+      }
+    },
+    "lastname": {
+      "type": "string",
+      "ui": {
+        "columns": 6
+      }
+    },
+    "fullname": {
+      "type": "string",
+      "valueTemplate": "dx: {{$root.firstname}} + \" \" +　{{$root.lastname}}",
+      "ui": {
+        "columns": 12
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/ncform-show/src/components/playground/fixtures/adv-global-constant.json b/packages/ncform-show/src/components/playground/fixtures/adv-global-constant.json
new file mode 100644
index 0000000..28a0402
--- /dev/null
+++ b/packages/ncform-show/src/components/playground/fixtures/adv-global-constant.json
@@ -0,0 +1,24 @@
+{
+  "type": "object",
+  "properties": {
+    "age": {
+      "type": "string",
+      "ui": {
+        "placeholder": "dx: \"Age must be greater than \" + {{$const.ageLimit}}"
+      },
+      "rules": {
+        "customRule": [
+          {
+            "script": "dx: {{$root.age}} > {{$const.ageLimit}}",
+            "errMsg": "Please fill in the correct age"
+          }
+        ]
+      }
+    }
+  },
+  "globalConfig": {
+    "constants": {
+      "ageLimit": 18
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/ncform-show/src/components/playground/fixtures/adv-selector-interaction.json b/packages/ncform-show/src/components/playground/fixtures/adv-selector-interaction.json
new file mode 100644
index 0000000..e264522
--- /dev/null
+++ b/packages/ncform-show/src/components/playground/fixtures/adv-selector-interaction.json
@@ -0,0 +1,38 @@
+{
+  "type": "object",
+  "properties": {
+    "province": {
+      "type": "string",
+      "ui": {
+        "label": "Province",
+        "widget": "select",
+        "widgetConfig": {
+          "itemLabelField": "name",
+          "itemValueField": "id",
+          "enumSourceRemote": {
+            "remoteUrl": "/api/test/getProvinces",
+            "paramName": "keyword"
+          }
+        }
+      }
+    },
+    "city": {
+      "type": "string",
+      "ui": {
+        "label": "City",
+        "widget": "select",
+        "widgetConfig": {
+          "itemLabelField": "name",
+          "itemValueField": "id",
+          "enumSourceRemote": {
+            "remoteUrl": "/api/test/getCities",
+            "paramName": "keyword",
+            "otherParams": {
+              "provinceId": "dx: {{$root.province}}"
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/ncform-show/src/components/playground/fixtures/adv-temp-value.json b/packages/ncform-show/src/components/playground/fixtures/adv-temp-value.json
new file mode 100644
index 0000000..c21e6fd
--- /dev/null
+++ b/packages/ncform-show/src/components/playground/fixtures/adv-temp-value.json
@@ -0,0 +1,30 @@
+{
+  "type": "object",
+  "properties": {
+    "item": {
+      "type": "string",
+      "ui": {
+        "description": "Currently only select, radio, checkbox supports this feature.",
+        "widget": "select",
+        "widgetConfig": {
+          "itemDataKey": "selectedItem",
+          "enumSource": [
+            {
+              "value": "1",
+              "label": "ncform",
+              "desc": "ncform is a very nice configuration generation way to develop forms"
+            },
+            {
+              "value": "2",
+              "label": "daniel",
+              "desc": "Daniel is the author of ncform"
+            }
+          ]
+        }
+      }
+    },
+    "desc": {
+      "valueTemplate": "dx: {{$temp.selectedItem.desc}} || \"\""
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/ncform-show/src/components/playground/fixtures/basic-array-type.json b/packages/ncform-show/src/components/playground/fixtures/basic-array-type.json
new file mode 100644
index 0000000..cf2fc2f
--- /dev/null
+++ b/packages/ncform-show/src/components/playground/fixtures/basic-array-type.json
@@ -0,0 +1,61 @@
+{
+  "type": "object",
+  "properties": {
+    "user": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "name": {
+            "type": "string",
+            "ui": {
+              "label": "Name",
+              "description": "Please fill in your name",
+              "placeholder": "Name"
+            },
+            "rules": {
+              "required": true
+            }
+          },
+          "email": {
+            "type": "string",
+            "ui": {
+              "label": "Email"
+            },
+            "rules": {
+              "required": true,
+              "email": true
+            }
+          },
+          "age": {
+            "type": "integer",
+            "ui": {
+              "label": "Age"
+            }
+          },
+          "adult": {
+            "type": "boolean",
+            "ui": {
+              "label": "Adult",
+              "help": {
+                "show": true,
+                "text": "?",
+                "content": "Adults can play games"
+              }
+            }
+          }
+        },
+        "ui": {
+          "label": "User"
+        }
+      },
+      "ui": {
+        "showLegend": false,
+        "noLabelSpace": true,
+        "widgetConfig": {
+          "showOneIfEmpty": true
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/ncform-show/src/components/playground/fixtures/basic-label-left.json b/packages/ncform-show/src/components/playground/fixtures/basic-label-left.json
new file mode 100644
index 0000000..23674ae
--- /dev/null
+++ b/packages/ncform-show/src/components/playground/fixtures/basic-label-left.json
@@ -0,0 +1,47 @@
+{
+  "type": "object",
+  "properties": {
+    "firstname": {
+      "type": "string",
+      "ui": {
+        "label": "Name",
+        "placeholder": "First name"
+      }
+    },
+    "lastname": {
+      "type": "string",
+      "ui": {
+        "showLabel": false,
+        "placeholder": "Last name"
+      }
+    },
+    "email": {
+      "type": "string",
+      "ui": {
+        "label": "Email"
+      }
+    },
+    "age": {
+      "type": "integer",
+      "ui": {
+        "label": "Age"
+      }
+    },
+    "adult": {
+      "type": "boolean",
+      "ui": {
+        "label": "Adult",
+        "help": {
+          "show": true,
+          "text": "?",
+          "content": "Adults can play games"
+        }
+      }
+    }
+  },
+  "ui": {
+    "widgetConfig": {
+      "layout": "h"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/ncform-show/src/components/playground/fixtures/basic-media-preview.json b/packages/ncform-show/src/components/playground/fixtures/basic-media-preview.json
new file mode 100644
index 0000000..60dd1de
--- /dev/null
+++ b/packages/ncform-show/src/components/playground/fixtures/basic-media-preview.json
@@ -0,0 +1,56 @@
+{
+  "type": "object",
+  "properties": {
+    "image": {
+      "type": "string",
+      "default": "https://upload-images.jianshu.io/upload_images/2195795-e3c500e4b7d17b2c.png?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240",
+      "ui": {
+        "label": "Image",
+        "columns": 6,
+        "preview": {
+          "type": "image",
+          "value": "dx: {{$self}}",
+          "clearable": true,
+          "outward": {
+            "width": 150,
+            "height": 150,
+            "shape": "circle"
+          }
+        }
+      }
+    },
+    "video": {
+      "type": "string",
+      "default": "https://www.w3schools.com/html/mov_bbb.mp4",
+      "ui": {
+        "label": "Video",
+        "columns": 6,
+        "preview": {
+          "type": "video"
+        }
+      }
+    },
+    "audio": {
+      "type": "string",
+      "default": "https://www.w3schools.com/html/mov_bbb.mp4",
+      "ui": {
+        "label": "Audio",
+        "columns": 6,
+        "preview": {
+          "type": "audio"
+        }
+      }
+    },
+    "link": {
+      "type": "string",
+      "default": "https://www.baidu.com",
+      "ui": {
+        "label": "Link",
+        "columns": 6,
+        "preview": {
+          "type": "link"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/ncform-show/src/components/playground/fixtures/basic-multi-columns.json b/packages/ncform-show/src/components/playground/fixtures/basic-multi-columns.json
new file mode 100644
index 0000000..3ce0fe5
--- /dev/null
+++ b/packages/ncform-show/src/components/playground/fixtures/basic-multi-columns.json
@@ -0,0 +1,47 @@
+{
+  "type": "object",
+  "properties": {
+    "firstname": {
+      "type": "string",
+      "ui": {
+        "columns": 3,
+        "label": "Name",
+        "placeholder": "First name"
+      }
+    },
+    "lastname": {
+      "type": "string",
+      "ui": {
+        "columns": 3,
+        "showLabel": false,
+        "placeholder": "Last name"
+      }
+    },
+    "email": {
+      "type": "string",
+      "ui": {
+        "columns": 6,
+        "label": "Email"
+      }
+    },
+    "age": {
+      "type": "integer",
+      "ui": {
+        "columns": 6,
+        "label": "Age"
+      }
+    },
+    "adult": {
+      "type": "boolean",
+      "ui": {
+        "columns": 6,
+        "label": "adult",
+        "help": {
+          "show": true,
+          "text": "?",
+          "content": "Adults can play games"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/ncform-show/src/components/playground/fixtures/basic-rich-display.json b/packages/ncform-show/src/components/playground/fixtures/basic-rich-display.json
new file mode 100644
index 0000000..30d3b38
--- /dev/null
+++ b/packages/ncform-show/src/components/playground/fixtures/basic-rich-display.json
@@ -0,0 +1,37 @@
+{
+    "type": "object",
+    "properties": {
+      "name": {
+        "type": "string",
+        "ui": {
+          "label": "Name",
+          "description": "Please fill in your name.",
+          "placeholder": "Name"
+        }
+      },
+      "email": {
+        "type": "string",
+        "ui": {
+          "label": "Email"
+        }
+      },
+      "age": {
+        "type": "integer",
+        "default": 18,
+        "ui": {
+          "label": "Age"
+        }
+      },
+      "adult": {
+        "type": "boolean",
+        "ui": {
+          "label": "Adult",
+          "help": {
+            "show": true,
+            "text": "?",
+            "content": "Adults can play games."
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/packages/ncform-show/src/components/playground/fixtures/basic-separator.json b/packages/ncform-show/src/components/playground/fixtures/basic-separator.json
new file mode 100644
index 0000000..4a0f53b
--- /dev/null
+++ b/packages/ncform-show/src/components/playground/fixtures/basic-separator.json
@@ -0,0 +1,45 @@
+{
+  "type": "object",
+  "properties": {
+    "_line1": {
+      "type": "HTML",
+      "value": "<div style=\"border-left: 4px solid orange; padding-left: 6px; color: orange\">  Basic Information</div>"
+    },
+    "name": {
+      "type": "string",
+      "ui": {
+        "label": "Name",
+        "description": "Please fill in your name",
+        "placeholder": "Name"
+      }
+    },
+    "email": {
+      "type": "string",
+      "ui": {
+        "label": "Email"
+      }
+    },
+    "_line2": {
+      "type": "HTML",
+      "value": "<div style=\"border-left: 4px solid orange; margin-top:10px; padding-left: 6px; color: orange\">  Other Information</div>"
+    },
+    "age": {
+      "type": "integer",
+      "default": 18,
+      "ui": {
+        "label": "Age"
+      }
+    },
+    "adult": {
+      "type": "boolean",
+      "ui": {
+        "label": "Adult",
+        "help": {
+          "show": true,
+          "text": "?",
+          "content": "Adults can play games"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/ncform-show/src/components/playground/fixtures/basic-table-array.json b/packages/ncform-show/src/components/playground/fixtures/basic-table-array.json
new file mode 100644
index 0000000..42174a1
--- /dev/null
+++ b/packages/ncform-show/src/components/playground/fixtures/basic-table-array.json
@@ -0,0 +1,60 @@
+{
+  "type": "object",
+  "properties": {
+    "user": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "name": {
+            "type": "string",
+            "ui": {
+              "label": "Name",
+              "description": "Please fill in your name",
+              "placeholder": "Name"
+            },
+            "rules": {
+              "required": true
+            }
+          },
+          "email": {
+            "type": "string",
+            "ui": {
+              "label": "Email"
+            },
+            "rules": {
+              "required": true,
+              "email": true
+            }
+          },
+          "age": {
+            "type": "integer",
+            "ui": {
+              "label": "Age"
+            }
+          },
+          "adult": {
+            "type": "boolean",
+            "ui": {
+              "label": "Adult",
+              "help": {
+                "show": true,
+                "text": "?",
+                "content": "Adults can play games"
+              }
+            }
+          }
+        }
+      },
+      "ui": {
+        "showLegend": false,
+        "noLabelSpace": true,
+        "widget": "array-table",
+        "widgetConfig": {
+          "disableCollapse": true,
+          "showOneIfEmpty": true
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/ncform-show/src/components/playground/fixtures/basic-tabs-array.json b/packages/ncform-show/src/components/playground/fixtures/basic-tabs-array.json
new file mode 100644
index 0000000..42174a1
--- /dev/null
+++ b/packages/ncform-show/src/components/playground/fixtures/basic-tabs-array.json
@@ -0,0 +1,60 @@
+{
+  "type": "object",
+  "properties": {
+    "user": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "name": {
+            "type": "string",
+            "ui": {
+              "label": "Name",
+              "description": "Please fill in your name",
+              "placeholder": "Name"
+            },
+            "rules": {
+              "required": true
+            }
+          },
+          "email": {
+            "type": "string",
+            "ui": {
+              "label": "Email"
+            },
+            "rules": {
+              "required": true,
+              "email": true
+            }
+          },
+          "age": {
+            "type": "integer",
+            "ui": {
+              "label": "Age"
+            }
+          },
+          "adult": {
+            "type": "boolean",
+            "ui": {
+              "label": "Adult",
+              "help": {
+                "show": true,
+                "text": "?",
+                "content": "Adults can play games"
+              }
+            }
+          }
+        }
+      },
+      "ui": {
+        "showLegend": false,
+        "noLabelSpace": true,
+        "widget": "array-table",
+        "widgetConfig": {
+          "disableCollapse": true,
+          "showOneIfEmpty": true
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/ncform-show/src/components/playground/fixtures/basic-verification-rule.json b/packages/ncform-show/src/components/playground/fixtures/basic-verification-rule.json
new file mode 100644
index 0000000..81c5d73
--- /dev/null
+++ b/packages/ncform-show/src/components/playground/fixtures/basic-verification-rule.json
@@ -0,0 +1,47 @@
+{
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "ui": {
+        "label": "Name",
+        "description": "Please fill in your name",
+        "placeholder": "Name"
+      },
+      "rules": {
+        "required": true,
+        "minLength": 10
+      }
+    },
+    "email": {
+      "type": "string",
+      "ui": {
+        "label": "Email"
+      },
+      "rules": {
+        "required": true,
+        "email": {
+          "value": true,
+          "errMsg": "Please fill in a valid email address"
+        }
+      }
+    },
+    "age": {
+      "type": "integer",
+      "ui": {
+        "label": "Age"
+      }
+    },
+    "adult": {
+      "type": "boolean",
+      "ui": {
+        "label": "Adult",
+        "help": {
+          "show": true,
+          "text": "?",
+          "content": "Adults can play games"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/ncform-show/src/components/playground/fixtures/basic.json b/packages/ncform-show/src/components/playground/fixtures/basic.json
new file mode 100644
index 0000000..41a5858
--- /dev/null
+++ b/packages/ncform-show/src/components/playground/fixtures/basic.json
@@ -0,0 +1,17 @@
+{
+    "type": "object",
+    "properties": {
+      "name": {
+        "type": "string"
+      },
+      "email": {
+        "type": "string"
+      },
+      "age": {
+        "type": "integer"
+      },
+      "adult": {
+        "type": "boolean"
+      }
+    }
+  }
\ No newline at end of file
diff --git a/packages/ncform-show/src/components/playground/fixtures/index.js b/packages/ncform-show/src/components/playground/fixtures/index.js
new file mode 100644
index 0000000..87f7cf5
--- /dev/null
+++ b/packages/ncform-show/src/components/playground/fixtures/index.js
@@ -0,0 +1,138 @@
+/**
+ * Fixtures added here.
+ * Please make sure the value name is the same with json file name.
+ */
+const fixtures = [
+  {
+    value: "basic",
+    label: {
+      cn: "基础使用",
+      en: "Basic"
+    }
+  },
+  {
+    value: "basic-rich-display",
+    label: {
+      cn: "基础使用-丰富显示",
+      en: "Basic-Rich Display"
+    }
+  },
+  {
+    value: "basic-multi-columns",
+    label: {
+      cn: "基础使用-多列布局",
+      en: "Basic-Multi Columns"
+    }
+  },
+  {
+    value: "basic-media-preview",
+    label: {
+      cn: "基础使用-媒体预览",
+      en: "Basic-Media Preview"
+    }
+  },
+  {
+    value: "basic-label-left",
+    label: {
+      cn: "基础使用-标签居左",
+      en: "Basic-Label Left"
+    }
+  },
+  {
+    value: "basic-verification-rule",
+    label: {
+      cn: "基础使用-校验规则",
+      en: "Basic-Verification Rule"
+    }
+  },
+  {
+    value: "basic-array-type",
+    label: {
+      cn: "基础使用-数组类型",
+      en: "Basic-Array Type"
+    }
+  },
+  {
+    value: "basic-table-array",
+    label: {
+      cn: "基础使用-表格数组",
+      en: "Basic-Table Array"
+    }
+  },
+  {
+    value: "basic-tabs-array",
+    label: {
+      cn: "基础使用-标签数组",
+      en: "Basic-Tabs Array"
+    }
+  },
+  {
+    value: "basic-separator",
+    label: {
+      cn: "基础使用-分隔栏",
+      en: "Basic-Separator"
+    }
+  },
+  {
+    value: "adv-control-interaction",
+    label: {
+      cn: "高级玩法-控件交互 dx表达式",
+      en: "Adv-Control Interaction [dx expression]"
+    }
+  },
+  {
+    value: "adv-array-item-interaction",
+    label: {
+      cn: "高级玩法-数组项交互 dx表达式",
+      en: "Adv-Array Item Interaction [dx expression]"
+    }
+  },
+  {
+    value: "adv-selector-interaction",
+    label: {
+      cn: "高级玩法-下拉框值交互 dx表达式",
+      en: "Adv-Selector Interaction [dx expression]"
+    }
+  },
+  {
+    value: "adv-check-association",
+    label: {
+      cn: "高级玩法-校验关联 dx表达式",
+      en: "Adv-Check Association [dx expression]"
+    }
+  },
+  {
+    value: "adv-custom-rule",
+    label: {
+      cn: "高级玩法-自定义校验规则 dx表达式",
+      en: "Adv-Custom Rule [dx expression]"
+    }
+  },
+  {
+    value: "adv-global-constant",
+    label: {
+      cn: "高级玩法-全局常量 dx表达式",
+      en: "Adv-Global Constant [dx expression]"
+    }
+  },
+  {
+    value: "adv-follow",
+    label: {
+      cn: "高级玩法-跟随 dx表达式",
+      en: "Adv-Follow [dx expression]"
+    }
+  },
+  {
+    value: "adv-temp-value",
+    label: {
+      cn: "高级玩法-临时变量 dx表达式",
+      en: "Adv-Temp Value [dx expression]"
+    }
+  }
+];
+
+fixtures.map(item => {
+  item.schema = require('./' + item.value + '.json');
+});
+
+export default fixtures;
diff --git a/packages/ncform-show/src/components/playground/playground.html b/packages/ncform-show/src/components/playground/playground.html
index cf17008..b35039a 100755
--- a/packages/ncform-show/src/components/playground/playground.html
+++ b/packages/ncform-show/src/components/playground/playground.html
@@ -8,7 +8,7 @@
 
       {{i18n.template}}：
       <el-select v-model="selectVal" placeholder="please choose" @change="templateChange">
-        <el-option v-for="item in listOptions" :key="item.value" :label="item.label" :value="item.value">
+        <el-option v-for="item in listOptions" :key="item.value" :label="item.label" :value="item">
         </el-option>
       </el-select>
       <el-button type="primary" @click="createForm">{{i18n.genForm}}</el-button>
diff --git a/packages/ncform-show/src/components/playground/playground.js b/packages/ncform-show/src/components/playground/playground.js
index 04d4b3b..f9f8f9f 100755
--- a/packages/ncform-show/src/components/playground/playground.js
+++ b/packages/ncform-show/src/components/playground/playground.js
@@ -1,6 +1,20 @@
 /**
  * <playground></playground>
  */
+import fixtures from './fixtures/index';
+
+/**
+ * Get Url Hash
+ */
+function getUrlHash() {
+  const hash = window.location.hash.substr(1);
+  return hash.split('&').reduce(function (res, item) {
+    var parts = item.split('=');
+    res[parts[0]] = parts[1];
+    return res;
+  }, {});
+}
+
 export default {
   /* ====================== 生命周期 ====================== */
 
@@ -15,7 +29,13 @@ export default {
     // 在这里做一些跟DOM有关的初始化
     setTimeout(() => {
       this.createEditor();
-      this.templateChange("0");
+
+      // Get template from hash
+      const hash = getUrlHash();
+      const tpl = hash['tpl'] || fixtures[0].value;
+      this.selectVal = fixtures.filter(item => item.value === tpl)[0] || fixtures[0];
+
+      this.templateChange(this.selectVal);
     }, 0);
   },
 
@@ -63,1014 +83,21 @@ export default {
         }
       },
       ncformValue: {},
-
-      selectVal: "0",
-      options: [
-        {
-          value: "0",
-          label: {
-            cn: "基础使用",
-            en: "Basic"
-          }
-        },
-        {
-          value: "1",
-          label: {
-            cn: "基础使用-丰富显示",
-            en: "Basic-Rich Display"
-          }
-        },
-        {
-          value: "2",
-          label: {
-            cn: "基础使用-多列布局",
-            en: "Basic-Multi Columns"
-          }
-        },
-        {
-          value: "22",
-          label: {
-            cn: "基础使用-媒体预览",
-            en: "Basic-Media Preview"
-          }
-        },
-        {
-          value: "3",
-          label: {
-            cn: "基础使用-标签居左",
-            en: "Basic-Label Left"
-          }
-        },
-        {
-          value: "4",
-          label: {
-            cn: "基础使用-校验规则",
-            en: "Basic-Verification Rule"
-          }
-        },
-        {
-          value: "5",
-          label: {
-            cn: "基础使用-数组类型",
-            en: "Basic-Array Type"
-          }
-        },
-        {
-          value: "6",
-          label: {
-            cn: "基础使用-表格数组",
-            en: "Basic-Table Array"
-          }
-        },
-        {
-          value: "7",
-          label: {
-            cn: "基础使用-标签数组",
-            en: "Basic-Tabs Array"
-          }
-        },
-        {
-          value: "77",
-          label: {
-            cn: "基础使用-分隔栏",
-            en: "Basic-Separator"
-          }
-        },
-        {
-          value: "8",
-          label: {
-            cn: "高级玩法-控件交互 dx表达式",
-            en: "Adv-Control Interaction [dx expression]"
-          }
-        },
-        {
-          value: "9",
-          label: {
-            cn: "高级玩法-数组项交互 dx表达式",
-            en: "Adv-Array Item Interaction [dx expression]"
-          }
-        },
-        {
-          value: "10",
-          label: {
-            cn: "高级玩法-下拉框值交互 dx表达式",
-            en: "Adv-Selector Interaction [dx expression]"
-          }
-        },
-        {
-          value: "101",
-          label: {
-            cn: "高级玩法-校验关联 dx表达式",
-            en: "Adv-Check Association [dx expression]"
-          }
-        },
-        {
-          value: "11",
-          label: {
-            cn: "高级玩法-自定义校验规则 dx表达式",
-            en: "Adv-Custom Rule [dx expression]"
-          }
-        },
-        {
-          value: "12",
-          label: {
-            cn: "高级玩法-全局常量 dx表达式",
-            en: "Adv-Global Constant [dx expression]"
-          }
-        },
-        {
-          value: "13",
-          label: {
-            cn: "高级玩法-跟随 dx表达式",
-            en: "Adv-Follow [dx expression]"
-          }
-        },
-        {
-          value: "14",
-          label: {
-            cn: "高级玩法-临时变量 dx表达式",
-            en: "Adv-Temp Value [dx expression]"
-          }
-        }
-      ],
-      templates: {
-        "0": {
-          type: "object",
-          properties: {
-            name: {
-              type: "string"
-            },
-            email: {
-              type: "string"
-            },
-            age: {
-              type: "integer"
-            },
-            adult: {
-              type: "boolean"
-            }
-          }
-        },
-        "1": {
-          type: "object",
-          properties: {
-            name: {
-              type: "string",
-              ui: {
-                label: "Name",
-                description: "Please fill in your name.",
-                placeholder: "Name"
-              }
-            },
-            email: {
-              type: "string",
-              ui: {
-                label: "Email"
-              }
-            },
-            age: {
-              type: "integer",
-              default: 18,
-              ui: {
-                label: "Age"
-              }
-            },
-            adult: {
-              type: "boolean",
-              ui: {
-                label: "Adult",
-                help: {
-                  show: true,
-                  text: "?",
-                  content: "Adults can play games."
-                }
-              }
-            }
-          }
-        },
-        "2": {
-          type: "object",
-          properties: {
-            firstname: {
-              type: "string",
-              ui: {
-                columns: 3,
-                label: "Name",
-                placeholder: "First name"
-              }
-            },
-            lastname: {
-              type: "string",
-              ui: {
-                columns: 3,
-                showLabel: false,
-                placeholder: "Last name"
-              }
-            },
-            email: {
-              type: "string",
-              ui: {
-                columns: 6,
-                label: "Email"
-              }
-            },
-            age: {
-              type: "integer",
-              ui: {
-                columns: 6,
-                label: "Age"
-              }
-            },
-            adult: {
-              type: "boolean",
-              ui: {
-                columns: 6,
-                label: "adult",
-                help: {
-                  show: true,
-                  text: "?",
-                  content: "Adults can play games"
-                }
-              }
-            }
-          }
-        },
-
-        "22": {
-          type: "object",
-          properties: {
-            image: {
-              type: "string",
-              default:
-                "https://upload-images.jianshu.io/upload_images/2195795-e3c500e4b7d17b2c.png?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240",
-              ui: {
-                label: "Image",
-                columns: 6,
-                preview: {
-                  type: "image",
-                  value: "dx: {{$self}}",
-                  clearable: true,
-                  outward: {
-                    width: 150,
-                    height: 150,
-                    shape: "circle"
-                  }
-                }
-              }
-            },
-            video: {
-              type: "string",
-              default: "https://www.w3schools.com/html/mov_bbb.mp4",
-              ui: {
-                label: "Video",
-                columns: 6,
-                preview: {
-                  type: "video"
-                }
-              }
-            },
-            audio: {
-              type: "string",
-              default: "https://www.w3schools.com/html/mov_bbb.mp4",
-              ui: {
-                label: "Audio",
-                columns: 6,
-                preview: {
-                  type: "audio"
-                }
-              }
-            },
-            link: {
-              type: "string",
-              default: "https://www.baidu.com",
-              ui: {
-                label: "Link",
-                columns: 6,
-                preview: {
-                  type: "link"
-                }
-              }
-            }
-          }
-        },
-
-        "3": {
-          type: "object",
-          properties: {
-            firstname: {
-              type: "string",
-              ui: {
-                label: "Name",
-                placeholder: "First name"
-              }
-            },
-            lastname: {
-              type: "string",
-              ui: {
-                showLabel: false,
-                placeholder: "Last name"
-              }
-            },
-            email: {
-              type: "string",
-              ui: {
-                label: "Email"
-              }
-            },
-            age: {
-              type: "integer",
-              ui: {
-                label: "Age"
-              }
-            },
-            adult: {
-              type: "boolean",
-              ui: {
-                label: "Adult",
-                help: {
-                  show: true,
-                  text: "?",
-                  content: "Adults can play games"
-                }
-              }
-            }
-          },
-          ui: {
-            widgetConfig: {
-              layout: "h"
-            }
-          }
-        },
-        "4": {
-          type: "object",
-          properties: {
-            name: {
-              type: "string",
-              ui: {
-                label: "Name",
-                description: "Please fill in your name",
-                placeholder: "Name"
-              },
-              rules: {
-                required: true,
-                minLength: 10
-              }
-            },
-            email: {
-              type: "string",
-              ui: {
-                label: "Email"
-              },
-              rules: {
-                required: true,
-                email: {
-                  value: true,
-                  errMsg: "Please fill in a valid email address"
-                }
-              }
-            },
-            age: {
-              type: "integer",
-              ui: {
-                label: "Age"
-              }
-            },
-            adult: {
-              type: "boolean",
-              ui: {
-                label: "Adult",
-                help: {
-                  show: true,
-                  text: "?",
-                  content: "Adults can play games"
-                }
-              }
-            }
-          }
-        },
-        "5": {
-          type: "object",
-          properties: {
-            user: {
-              type: "array",
-              items: {
-                type: "object",
-                properties: {
-                  name: {
-                    type: "string",
-                    ui: {
-                      label: "Name",
-                      description: "Please fill in your name",
-                      placeholder: "Name"
-                    },
-                    rules: {
-                      required: true
-                    }
-                  },
-                  email: {
-                    type: "string",
-                    ui: {
-                      label: "Email"
-                    },
-                    rules: {
-                      required: true,
-                      email: true
-                    }
-                  },
-                  age: {
-                    type: "integer",
-                    ui: {
-                      label: "Age"
-                    }
-                  },
-                  adult: {
-                    type: "boolean",
-                    ui: {
-                      label: "Adult",
-                      help: {
-                        show: true,
-                        text: "?",
-                        content: "Adults can play games"
-                      }
-                    }
-                  }
-                },
-                ui: {
-                  label: "User"
-                }
-              },
-              ui: {
-                showLegend: false,
-                noLabelSpace: true,
-                widgetConfig: {
-                  showOneIfEmpty: true
-                }
-              }
-            }
-          }
-        },
-        "6": {
-          type: "object",
-          properties: {
-            user: {
-              type: "array",
-              items: {
-                type: "object",
-                properties: {
-                  name: {
-                    type: "string",
-                    ui: {
-                      label: "Name",
-                      description: "Please fill in your name",
-                      placeholder: "Name"
-                    },
-                    rules: {
-                      required: true
-                    }
-                  },
-                  email: {
-                    type: "string",
-                    ui: {
-                      label: "Email"
-                    },
-                    rules: {
-                      required: true,
-                      email: true
-                    }
-                  },
-                  age: {
-                    type: "integer",
-                    ui: {
-                      label: "Age"
-                    }
-                  },
-                  adult: {
-                    type: "boolean",
-                    ui: {
-                      label: "Adult",
-                      help: {
-                        show: true,
-                        text: "?",
-                        content: "Adults can play games"
-                      }
-                    }
-                  }
-                }
-              },
-              ui: {
-                showLegend: false,
-                noLabelSpace: true,
-                widget: "array-table",
-                widgetConfig: {
-                  disableCollapse: true,
-                  showOneIfEmpty: true
-                }
-              }
-            }
-          }
-        },
-        "7": {
-          type: "object",
-          properties: {
-            user: {
-              type: "array",
-              items: {
-                type: "object",
-                properties: {
-                  name: {
-                    type: "string",
-                    ui: {
-                      label: "Name",
-                      description: "Please fill in your name",
-                      placeholder: "Name"
-                    },
-                    rules: {
-                      required: true
-                    }
-                  },
-                  email: {
-                    type: "string",
-                    ui: {
-                      label: "Email"
-                    },
-                    rules: {
-                      required: true,
-                      email: true
-                    }
-                  },
-                  age: {
-                    type: "integer",
-                    ui: {
-                      label: "Age"
-                    }
-                  },
-                  adult: {
-                    type: "boolean",
-                    ui: {
-                      label: "Adult",
-                      help: {
-                        show: true,
-                        text: "?",
-                        content: "Adults can play games"
-                      }
-                    }
-                  }
-                },
-                ui: {
-                  label: "User"
-                }
-              },
-              ui: {
-                showLegend: false,
-                noLabelSpace: true,
-                widget: "array-tabs",
-                widgetConfig: {
-                  showOneIfEmpty: true
-                }
-              }
-            }
-          }
-        },
-        "77": {
-          type: "object",
-          properties: {
-            _line1: {
-              type: "HTML",
-              value:
-                '<div style="border-left: 4px solid orange; padding-left: 6px; color: orange">  Basic Information</div>'
-            },
-            name: {
-              type: "string",
-              ui: {
-                label: "Name",
-                description: "Please fill in your name",
-                placeholder: "Name"
-              }
-            },
-            email: {
-              type: "string",
-              ui: {
-                label: "Email"
-              }
-            },
-            _line2: {
-              type: "HTML",
-              value:
-                '<div style="border-left: 4px solid orange; margin-top:10px; padding-left: 6px; color: orange">  Other Information</div>'
-            },
-            age: {
-              type: "integer",
-              default: 18,
-              ui: {
-                label: "Age"
-              }
-            },
-            adult: {
-              type: "boolean",
-              ui: {
-                label: "Adult",
-                help: {
-                  show: true,
-                  text: "?",
-                  content: "Adults can play games"
-                }
-              }
-            }
-          }
-        },
-        "8": {
-          type: "object",
-          properties: {
-            age: {
-              type: "integer",
-              ui: {
-                label: "Age",
-                description: "More than 18 years old to continue filling"
-              }
-            },
-            gameInfo: {
-              type: "object",
-              properties: {
-                game: {
-                  type: "string",
-                  ui: {
-                    label: "Like games",
-                    description: "Fill in and unlock"
-                  }
-                },
-                gameAge: {
-                  type: "integer",
-                  ui: {
-                    label: "Game age",
-                    disabled: "dx: !{{$root.gameInfo.game}}"
-                  }
-                }
-              },
-              ui: {
-                legend: "Game info",
-                hidden: "dx: !{{$root.age}} || {{$root.age}} < 18"
-              }
-            }
-          }
-        },
-        "9": {
-          type: "object",
-          properties: {
-            user: {
-              type: "array",
-              items: {
-                type: "object",
-                properties: {
-                  adult: {
-                    type: "boolean",
-                    ui: {
-                      label: "Adult",
-                      help: {
-                        show: true,
-                        text: "?"
-                      }
-                    }
-                  },
-                  gameName: {
-                    type: "string",
-                    ui: {
-                      label: "Like games",
-                      disabled: "dx: !{{$root.user[i].adult}}"
-                    }
-                  },
-                  gameAge: {
-                    type: "integer",
-                    ui: {
-                      label: "Game age",
-                      disabled: "dx: !{{$root.user[i].adult}}"
-                    }
-                  }
-                }
-              },
-              ui: {
-                showLegend: false,
-                noLabelSpace: true,
-                widget: "array-table",
-                widgetConfig: {
-                  showOneIfEmpty: true
-                }
-              }
-            }
-          }
-        },
-        "10": {
-          type: "object",
-          properties: {
-            province: {
-              type: "string",
-              ui: {
-                label: "Province",
-                widget: "select",
-                widgetConfig: {
-                  itemLabelField: "name", // 项数据表示label的字段
-                  itemValueField: "id", // 项数据表示value的字段
-                  enumSourceRemote: {
-                    // 远程数据源
-                    remoteUrl: "/api/test/getProvinces", // 如果是远程访问，则填写该url
-                    paramName: "keyword" // 请求参数名，默认是keyword
-                  }
-                }
-              }
-            },
-            city: {
-              type: "string",
-              ui: {
-                label: "City",
-                widget: "select",
-                widgetConfig: {
-                  itemLabelField: "name", // 项数据表示label的字段
-                  itemValueField: "id", // 项数据表示value的字段
-                  enumSourceRemote: {
-                    // 远程数据源
-                    remoteUrl: "/api/test/getCities", // 如果是远程访问，则填写该url
-                    paramName: "keyword", // 请求参数名，默认是keyword
-                    otherParams: {
-                      provinceId: "dx: {{$root.province}}"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "101": {
-          type: "object",
-          properties: {
-            isRequired: {
-              type: "boolean",
-              ui: {
-                label: "Required",
-                linkFields: [
-                  {
-                    fieldPath: "num_1",
-                    rules: ["required"]
-                  },
-                  {
-                    fieldPath: "num_2",
-                    rules: ["required"]
-                  }
-                ]
-              }
-            },
-            num_1: {
-              type: "number",
-              ui: {
-                description: "num_1 >= num_2",
-                columns: 6,
-                linkFields: [
-                  {
-                    fieldPath: "num_2",
-                    rules: ["maximum"]
-                  }
-                ]
-              },
-              rules: {
-                required: {
-                  value: "dx: {{$root.isRequired}}"
-                },
-                minimum: {
-                  value: "dx: {{$root.num_2}} || 0",
-                  errMsg: "num_1 >= num_2"
-                }
-              }
-            },
-            num_2: {
-              type: "number",
-              ui: {
-                columns: 6,
-                linkFields: [
-                  {
-                    fieldPath: "num_1",
-                    rules: ["minimum"]
-                  }
-                ]
-              },
-              rules: {
-                required: {
-                  value: "dx: {{$root.isRequired}}"
-                },
-                maximum: {
-                  value: "dx: {{$root.num_1}} || 0",
-                  errMsg: "num_2 <= num_1"
-                }
-              }
-            }
-          }
-        },
-        "11": {
-          type: "object",
-          properties: {
-            startTime: {
-              type: "string",
-              ui: {
-                widget: "date-picker"
-              },
-              rules: {
-                customRule: [
-                  {
-                    script:
-                      "dx: !{{$root.endTime}} || {{$root.endTime}} >= {{$root.startTime}}", // 支持dx表达式
-                    errMsg:
-                      "Start date must be less than or equal to the end date", // 验证错误信息
-                    linkItems: [
-                      // 当触发校验时，同时触发这些关联的项进行校验
-                      {
-                        fieldPath: "endTime", // 关联项
-                        customRuleIdx: 0 // 触发该项的自定义验证规则的索引
-                      }
-                    ]
-                  }
-                ]
-              }
-            },
-            endTime: {
-              type: "string",
-              ui: {
-                widget: "date-picker"
-              },
-              rules: {
-                customRule: [
-                  {
-                    script:
-                      "dx: !{{$root.startTime}} || {{$root.endTime}} >= {{$root.startTime}}", // 支持dx表达式
-                    errMsg:
-                      "End date must be greater than or equal to the start date", // 验证错误信息
-                    linkItems: [
-                      // 当触发校验时，同时触发这些关联的项进行校验
-                      {
-                        fieldPath: "startTime", // 关联项
-                        customRuleIdx: 0 // 触发该项的自定义验证规则的索引
-                      }
-                    ]
-                  }
-                ]
-              }
-            },
-            arrayItems: {
-              type: "array",
-              items: {
-                type: "object",
-                properties: {
-                  startTime: {
-                    type: "string",
-                    ui: {
-                      widget: "date-picker"
-                    },
-                    rules: {
-                      customRule: [
-                        {
-                          script:
-                            "dx: !{{$root.arrayItems[i].endTime}} || {{$root.arrayItems[i].endTime}} >= {{$root.arrayItems[i].startTime}}", // 支持dx表达式
-                          errMsg:
-                            "Start date must be less than or equal to the end date", // 验证错误信息
-                          linkItems: [
-                            // 当触发校验时，同时触发这些关联的项进行校验
-                            {
-                              fieldPath: "arrayItems[i].endTime", // 关联项
-                              customRuleIdx: 0 // 触发该项的自定义验证规则的索引
-                            }
-                          ]
-                        }
-                      ]
-                    }
-                  },
-                  endTime: {
-                    type: "string",
-                    ui: {
-                      widget: "date-picker"
-                    },
-                    rules: {
-                      customRule: [
-                        {
-                          script:
-                            "dx: !{{$root.arrayItems[i].startTime}} || {{$root.arrayItems[i].endTime}} >= {{$root.arrayItems[i].startTime}}", // 支持dx表达式
-                          errMsg:
-                            "End date must be greater than or equal to the start date", // 验证错误信息
-                          linkItems: [
-                            // 当触发校验时，同时触发这些关联的项进行校验
-                            {
-                              fieldPath: "arrayItems[i].startTime", // 关联项
-                              customRuleIdx: 0 // 触发该项的自定义验证规则的索引
-                            }
-                          ]
-                        }
-                      ]
-                    }
-                  }
-                }
-              },
-              ui: {
-                showLabel: false,
-                legend: "Array item",
-                widget: "array-table",
-                widgetConfig: {
-                  collapsed: false,
-                  showOneIfEmpty: true
-                }
-              }
-            }
-          }
-        },
-        "12": {
-          type: "object",
-          properties: {
-            age: {
-              type: "string",
-              ui: {
-                placeholder:
-                  'dx: "Age must be greater than " + {{$const.ageLimit}}'
-              },
-              rules: {
-                customRule: [
-                  {
-                    script: "dx: {{$root.age}} > {{$const.ageLimit}}", // 支持dx表达式
-                    errMsg: "Please fill in the correct age" // 验证错误信息
-                  }
-                ]
-              }
-            }
-          },
-          globalConfig: {
-            constants: {
-              ageLimit: 18
-            }
-          }
-        },
-        "13": {
-          type: "object",
-          properties: {
-            firstname: {
-              type: "string",
-              ui: {
-                columns: 6
-              }
-            },
-            lastname: {
-              type: "string",
-              ui: {
-                columns: 6
-              }
-            },
-            fullname: {
-              type: "string",
-              valueTemplate:
-                'dx: {{$root.firstname}} + " " + {{$root.lastname}}',
-              ui: {
-                columns: 12
-              }
-            }
-          }
-        },
-        "14": {
-          type: "object",
-          properties: {
-            item: {
-              type: "string",
-              ui: {
-                description:
-                  "Currently only select, radio, checkbox supports this feature.",
-                widget: "select",
-                widgetConfig: {
-                  itemDataKey: "selectedItem",
-                  enumSource: [
-                    {
-                      value: "1",
-                      label: "ncform",
-                      desc:
-                        "ncform is a very nice configuration generation way to develop forms"
-                    },
-                    {
-                      value: "2",
-                      label: "daniel",
-                      desc: "Daniel is the author of ncform"
-                    }
-                  ]
-                }
-              }
-            },
-            desc: {
-              valueTemplate: 'dx: {{$temp.selectedItem.desc}} || ""'
-            }
-          }
-        }
-      }
+      selectVal: fixtures[0],
+      fixtures: fixtures,
     };
   },
 
   computed: {
     listOptions() {
-      return this.$data.options.map(item => ({
+      return this.fixtures.map(item => ({
         value: item.value,
-        label: item.label[this.$data.lang]
+        label: item.label[this.lang],
+        schema: item.schema,
       }));
     },
     i18n() {
-      return this.$data.i18nData[this.$data.lang];
+      return this.i18nData[this.lang];
     }
   },
 
@@ -1082,12 +109,14 @@ export default {
       this.$options.editor.$blockScrolling = Infinity;
     },
     templateChange(v) {
+      // Update url hash, so that people can copy the url and share the template to others
+      window.location.hash = '#tpl=' + v.value;
       this.$options.editor.setValue(
-        JSON.stringify(this.$data.templates[v], null, 2),
+        JSON.stringify(v.schema, null, 2),
         1
       );
-      this.$data.ncformSchema = JSON.parse(this.$options.editor.getValue());
-      this.$data.ncformValue = {};
+      this.ncformSchema = JSON.parse(this.$options.editor.getValue());
+      this.ncformValue = {};
     },
     createForm() {
       const value = this.$options.editor.getValue();