diff --git a/src/index.js b/src/index.js
index e89b54ee6..f4b5dc256 100644
--- a/src/index.js
+++ b/src/index.js
@@ -67,7 +67,44 @@ AFRAME.registerComponent('streetmix-loader', {
     streetmixStreetURL: { type: 'string' },
     streetmixAPIURL: { type: 'string' },
     showBuildings: { default: true },
-    name: { default: '' }
+    name: { default: '' },
+    streetmixJSON: { type: 'string', default: '' }
+  },
+  loadFromJSON: function (streetmixResponseObject) {
+    if (!streetmixResponseObject) {
+      console.log("No JSON provided")
+      return;
+    }
+    const data = this.data;
+    const el = this.el;
+
+    // convert units of measurement if necessary
+    const streetData = streetmixUtils.convertStreetValues(streetmixResponseObject.data.street);
+    const streetmixSegments = streetData.segments;
+
+    const streetmixName = streetmixResponseObject.name;
+    console.log('streetmixName', streetmixName);
+    //el.setAttribute('streetmix-loader', 'name', streetmixName);
+
+    let currentSceneTitle;
+    if (AFRAME.scenes[0] && AFRAME.scenes[0].getAttribute('metadata')) {
+      currentSceneTitle = AFRAME.scenes[0].getAttribute('metadata').sceneTitle;
+    }
+    if (!currentSceneTitle) { // only set title from streetmix if none exists
+      AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', streetmixName);
+      console.log('therefore setting metadata sceneTitle as streetmixName', streetmixName);
+    }
+
+    el.setAttribute('data-layer-name', 'Streetmix • ' + streetmixName);
+
+    if (data.showBuildings) {
+      el.setAttribute('street', 'right', streetData.rightBuildingVariant);
+      el.setAttribute('street', 'left', streetData.leftBuildingVariant);
+    }
+    el.setAttribute('street', 'type', 'streetmixSegmentsMetric');
+    // set JSON attribute last or it messes things up
+    el.setAttribute('street', 'JSON', JSON.stringify({ streetmixSegmentsMetric: streetmixSegments }));
+    el.emit('streetmix-loader-street-loaded');
   },
   update: function (oldData) { // fired at start and at each subsequent change of any schema value
     // This method may fire a few times when viewing a streetmix street in 3dstreet:
@@ -75,6 +112,13 @@ AFRAME.registerComponent('streetmix-loader', {
     var data = this.data;
     var el = this.el;
 
+    // load street from provided JSON with streetmix format
+    if (data.streetmixJSON !== '') {
+      this.loadFromJSON(data.streetmixJSON);
+      data.streetmixJSON == '';
+      return;
+    }
+
     // if the loader has run once already, and upon update neither URL has changed, do not take action
     if ((oldData.streetmixStreetURL === data.streetmixStreetURL) && (oldData.streetmixAPIURL === data.streetmixAPIURL)) {
       // console.log('[streetmix-loader]', 'Neither streetmixStreetURL nor streetmixAPIURL have changed in this component data update, not reloading street.')
@@ -95,39 +139,17 @@ AFRAME.registerComponent('streetmix-loader', {
 
     var request = new XMLHttpRequest();
     console.log('[streetmix-loader]', 'GET ' + data.streetmixAPIURL);
+    
+    // for using inside request callback function 
+    const loadFromJSON = this.loadFromJSON.bind(this);
 
     request.open('GET', data.streetmixAPIURL, true);
     request.onload = function () {
       if (this.status >= 200 && this.status < 400) {
         // Connection success
         const streetmixResponseObject = JSON.parse(this.response);
-        // convert units of measurement if necessary
-        const streetData = streetmixUtils.convertStreetValues(streetmixResponseObject.data.street);
-        const streetmixSegments = streetData.segments;
-
-        const streetmixName = streetmixResponseObject.name;
-        console.log('streetmixName', streetmixName);
-        el.setAttribute('streetmix-loader', 'name', streetmixName);
-
-        let currentSceneTitle;
-        if (AFRAME.scenes[0] && AFRAME.scenes[0].getAttribute('metadata')) {
-          currentSceneTitle = AFRAME.scenes[0].getAttribute('metadata').sceneTitle;
-        }
-        if (!currentSceneTitle) { // only set title from streetmix if none exists
-          AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', streetmixName);
-          console.log('therefore setting metadata sceneTitle as streetmixName', streetmixName);
-        }
-
-        el.setAttribute('data-layer-name', 'Streetmix • ' + streetmixName);
-
-        if (data.showBuildings) {
-          el.setAttribute('street', 'right', streetData.rightBuildingVariant);
-          el.setAttribute('street', 'left', streetData.leftBuildingVariant);
-        }
-        el.setAttribute('street', 'type', 'streetmixSegmentsMetric');
-        // set JSON attribute last or it messes things up
-        el.setAttribute('street', 'JSON', JSON.stringify({ streetmixSegmentsMetric: streetmixSegments }));
-        el.emit('streetmix-loader-street-loaded');
+        
+        loadFromJSON(streetmixResponseObject);
       } else {
         // We reached our target server, but it returned an error
         console.log('[streetmix-loader]', 'Loading Error: We reached the target server, but it returned an error');
diff --git a/src/json-utils_1.1.js b/src/json-utils_1.1.js
index f4af4e3dd..a13417bbf 100644
--- a/src/json-utils_1.1.js
+++ b/src/json-utils_1.1.js
@@ -536,6 +536,18 @@ AFRAME.registerComponent('set-loader-from-hash', {
           'streetmixStreetURL',
           streetURL
         );
+      } else if (streetURL.startsWith('streetmix-json:')){
+
+        const JSONString = decodeURIComponent(streetURL.split('streetmix-json:')[1]);
+        console.log(JSONString)
+        const streetmixJSON = JSON.parse(JSONString);
+        console.log(streetmixJSON);
+        this.el.setAttribute('streetmix-loader', 'streetmixJSON', streetmixJSON);
+      } else if (streetURL.startsWith('3dstreet-json:')){
+
+        const JSONString = decodeURIComponent(streetURL.split('3dstreet-json:')[1]);
+        console.log(JSONString)
+        this.createStreetFromJSONData(JSONString);
       } else {
         // try to load JSON file from remote resource
         console.log(
@@ -551,22 +563,31 @@ AFRAME.registerComponent('set-loader-from-hash', {
       // }
     }
   },
+  // parse JSON street data from string and create Street elements
+  createStreetFromJSONData: function (stringJSONData, successMessage) {
+    // remove 'set-loader-from-hash' component from json data
+    const jsonData = JSON.parse(stringJSONData, (key, value) =>
+      key === 'set-loader-from-hash' ? undefined : value
+    );
+
+    console.log(
+      '[set-loader-from-hash]',
+      successMessage
+    );
+    STREET.utils.createElementsFromJSON(jsonData);
+  },
   fetchJSON: function (requestURL) {
     const request = new XMLHttpRequest();
     request.open('GET', requestURL, true);
+
+    const createStreetFromJSONData = this.createStreetFromJSONData;
+
     request.onload = function () {
       if (this.status >= 200 && this.status < 400) {
         // Connection success
-        // remove 'set-loader-from-hash' component from json data
-        const jsonData = JSON.parse(this.response, (key, value) =>
-          key === 'set-loader-from-hash' ? undefined : value
-        );
-
-        console.log(
-          '[set-loader-from-hash]',
-          '200 response received and JSON parsed, now createElementsFromJSON'
-        );
-        STREET.utils.createElementsFromJSON(jsonData);
+        const successMessage = 
+          '200 response received and JSON parsed, now createElementsFromJSON';
+        createStreetFromJSONData(this.response, successMessage);
         const sceneId = getUUIDFromPath(requestURL);
         if (sceneId) {
           console.log('sceneId from fetchJSON from url hash loader', sceneId);