diff --git a/devtools/src/devtools/panel.js b/devtools/src/devtools/panel.js
index c61e79d7..a6c8044a 100644
--- a/devtools/src/devtools/panel.js
+++ b/devtools/src/devtools/panel.js
@@ -32,7 +32,7 @@ function Panel() {
             setResult(result);
           });
 
-          if (action.updateEditor !== false) {
+          if (action.origin !== 'EDITOR') {
             editor.current.setValue(action.query);
           }
           break;
diff --git a/src/components/MarkupEditor.js b/src/components/MarkupEditor.js
index 7b076bd8..81b6e274 100644
--- a/src/components/MarkupEditor.js
+++ b/src/components/MarkupEditor.js
@@ -14,7 +14,7 @@ function MarkupEditor({ markup, dispatch }) {
       dispatch({
         type: 'SET_MARKUP',
         markup,
-        updateEditor: false,
+        origin: 'EDITOR',
         immediate: origin === 'user',
       }),
     [dispatch],
diff --git a/src/components/Preview.js b/src/components/Preview.js
index 2e7bc70a..43f5ce75 100644
--- a/src/components/Preview.js
+++ b/src/components/Preview.js
@@ -66,7 +66,11 @@ function Preview({ markup, variant, forwardedRef, dispatch }) {
         }
 
         case 'SELECT_NODE': {
-          dispatch({ type: 'SET_QUERY', query: suggestion.snippet });
+          dispatch({
+            type: 'SET_QUERY',
+            query: suggestion.snippet,
+            origin: 'SANDBOX',
+          });
           break;
         }
 
diff --git a/src/components/QueryEditor.js b/src/components/QueryEditor.js
index 650c6290..544160d6 100644
--- a/src/components/QueryEditor.js
+++ b/src/components/QueryEditor.js
@@ -14,7 +14,7 @@ function QueryEditor(props) {
       dispatch({
         type: 'SET_QUERY',
         query,
-        updateEditor: false,
+        origin: 'EDITOR',
         immediate: origin === 'user',
       }),
     [dispatch],
diff --git a/src/hooks/usePlayground.js b/src/hooks/usePlayground.js
index 36018a2b..7e18750f 100644
--- a/src/hooks/usePlayground.js
+++ b/src/hooks/usePlayground.js
@@ -52,7 +52,7 @@ function reducer(state, action, exec) {
     }
 
     case 'SET_MARKUP': {
-      if (action.updateEditor !== false) {
+      if (action.origin !== 'EDITOR') {
         exec({ type: 'UPDATE_EDITOR', editor: 'markup' });
       }
 
@@ -66,11 +66,13 @@ function reducer(state, action, exec) {
     }
 
     case 'SET_QUERY': {
-      if (action.updateEditor !== false) {
+      if (action.origin !== 'EDITOR') {
         exec({ type: 'UPDATE_EDITOR', editor: 'query' });
       }
 
-      exec({ type: 'UPDATE_SANDBOX', immediate });
+      if (action.origin !== 'SANDBOX') {
+        exec({ type: 'UPDATE_SANDBOX', immediate });
+      }
 
       return {
         ...state,
diff --git a/src/sandbox.js b/src/sandbox.js
index d7e6b6d2..1cf69440 100644
--- a/src/sandbox.js
+++ b/src/sandbox.js
@@ -117,6 +117,12 @@ function onSelectNode(node, { origin }) {
     cssPath: cssPath(node, true).toString(),
   };
 
+  if (action.type === 'SELECT_NODE') {
+    // optimistically update the highlighted node
+    state.queriedNodes = [node];
+    state.highlighter.highlight({ nodes: state.queriedNodes });
+  }
+
   postMessage(action);
 }