diff --git a/encyclopedia/data/enc_viewer_data.js b/encyclopedia/data/enc_viewer_data.js
new file mode 100644
index 0000000000000000000000000000000000000000..ea6e43cc82824c158067b64e4da9c490dd8649fe
--- /dev/null
+++ b/encyclopedia/data/enc_viewer_data.js
@@ -0,0 +1,57 @@
+function apiReq(materialId, dataType, authToken, callback){
+  let oReq = new XMLHttpRequest();
+  oReq.addEventListener("load", callback);
+  oReq.open("GET", "https://encyclopedia-api.nomad-coe.eu/v1.0/materials/"+materialId+"/"+dataType);
+  oReq.setRequestHeader('Authorization', 'Basic '+btoa(authToken));
+  oReq.send();
+  return oReq;
+}
+
+
+function getMaterialStructureDataFromAPI(materialId, authToken, callback){
+
+	apiReq(materialId, 'elements', authToken, e => {
+		let elements = JSON.parse(e.target.response).results;
+
+		apiReq(materialId, 'cells', authToken, e1 => {
+			let cells = JSON.parse(e1.target.response).results;
+			let cell;
+			if (!cells[0].is_primitive) cell= cells[0];
+			else cell= cells[1];
+
+			callback(getCellDataForViewer(elements, cell));
+		});
+	});
+}
+
+
+function getNumberArray(string){
+  let sArray= string.substring(1,string.length-1).split(',');
+  let fArray= [];
+  for (let i = 0; i < sArray.length; i++) {
+    fArray.push(parseFloat(sArray[i]));
+  }
+  return fArray;
+}
+
+
+function getCellDataForViewer(elements, cell){
+  let cellData= {};
+  cellData.normalizedCell= [
+    getNumberArray(cell.a),
+    getNumberArray(cell.b),
+    getNumberArray(cell.c)
+  ];
+
+  cellData.labels= [];
+  cellData.positions= [];
+
+  for (let i = 0; i < elements.length; i++) {
+    cellData.labels.push(elements[i].label);
+    cellData.positions.push(getNumberArray(elements[i].position));
+  }
+
+  //cellData.periodicity = JSON.parse(matData.periodicity);
+
+  return cellData;
+}
diff --git a/encyclopedia/data/enc_viewer_tutorial.zip b/encyclopedia/data/enc_viewer_tutorial.zip
new file mode 100644
index 0000000000000000000000000000000000000000..97f7093d68638cac4170d065be7044861b5e5102
Binary files /dev/null and b/encyclopedia/data/enc_viewer_tutorial.zip differ
diff --git a/encyclopedia/encyclopedia.demoinfo.yaml b/encyclopedia/encyclopedia.demoinfo.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..b73ce6b06da456bc28845c5b7abf3e3e8f2b70fc
--- /dev/null
+++ b/encyclopedia/encyclopedia.demoinfo.yaml
@@ -0,0 +1,24 @@
+{
+"id": "5a1bf3b780996e0031366357",
+"type": "demos",
+"attributes": {
+"title": "Encyclopedia API and code usage",
+"logicalPath": "/data/shared/ghuhs/encyclopedia.bkr",
+"authors": ["Himanen, Lauri", "Huhs, Georg", "Hurtado, Iker", "Kuban, Martin", "Vancea, Ioan", "Draxl, Claudia"],
+"editLink": "/notebook-edit/data/shared/tutorialsNew/encyclopedia/encyclopedia.bkr",
+"isPublic": true,
+"username": "tutorialsNew",
+"description": "This tutorial deals mainly with accessing the NOMAD Encyclopedia API (searching for materials, extracting data for specific materials and calculations). It also shows how code developed for the Encyclopedia GUI can be embedded into client applications. ",
+"created_at": "2018-09-22T11:15:03.028Z",
+"updated_at": "2018-09-22T11:15:03.028Z",
+"user_update": "2018-09-22",
+"top_of_list": true,
+"featured": true,
+"labels" : {
+	"category" : ["Demo"],
+	"platform" :  ["beaker"],
+	"language" :  ["python", "javascript"],
+	"application_section" : ["Encyclopedia"]
+}
+}
+}