diff --git a/dev/js/spec/pipeSpec.js b/dev/js/spec/pipeSpec.js
index 46cd5b9..078d4b1 100644
--- a/dev/js/spec/pipeSpec.js
+++ b/dev/js/spec/pipeSpec.js
@@ -88,5 +88,17 @@
       p.remove('service0')
       expect(p.toString()).toEqual('service1,service2,service3');      
     });
+
+    it('should sync with an element', function () {
+      let p = pipeClass.create();
+      let e = p.element();
+      expect(e.tagName).toEqual("INPUT");
+      p.append('service1');
+      expect(e.getAttribute("value")).toEqual("service1");
+      p.append('service2');
+      expect(e.getAttribute("value")).toEqual("service1,service2");
+      p.remove('service1');
+      expect(e.getAttribute("value")).toEqual("service2");
+    });
   });
 });
diff --git a/dev/js/src/pipe.js b/dev/js/src/pipe.js
index 7b9afee..9847b45 100644
--- a/dev/js/src/pipe.js
+++ b/dev/js/src/pipe.js
@@ -36,8 +36,10 @@
      */
     append : function (service) {
       service = _notNull(service);
-      if (service)
+      if (service) {
         this._pipe.push(service);
+        this._update();
+      };
     },
 
     /**
@@ -45,8 +47,10 @@
      */
     prepend : function (service) {
       service = _notNull(service);
-      if (service)
+      if (service) {
         this._pipe.unshift(service);
+        this._update();
+      };
     },
 
     /**
@@ -56,6 +60,7 @@
       let i = this._pipe.indexOf(service);
       if (i != -1) {
         this._pipe.splice(i, 1);
+        this._update();
       };
     },
 
@@ -71,6 +76,28 @@
      */
     toString : function () {
       return this._pipe.join(',');
+    },
+
+    /**
+     * Update the pipe value.
+     */
+    _update : function () {
+      if (this.e != null) {
+        this.e.setAttribute("value", this.toString());
+      };
+    },
+    
+    /**
+     * Return the pipe element.
+     */
+    element : function () {
+      if (this.e == null) {
+        this.e = document.createElement('input');
+        this.e.setAttribute("type","text");
+        this.e.setAttribute("name","pipe");
+        this.e.classList.add("pipe");
+      };
+      return this.e;
     }
   };
 });