diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte
index d320cc30c2..e503406aaa 100644
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@@ -105,6 +105,7 @@
       {#if !query.fields.steps?.length}
         <div class="controls">
           <Button
+            disabled={!editable}
             secondary
             slot="buttons"
             on:click={() => {
@@ -131,6 +132,7 @@
                       {#if index > 0}
                         <ActionButton
                           quiet
+                          disabled={!editable}
                           on:click={() => {
                             updateEditorsOnSwap(index, index - 1)
                             const target = query.fields.steps[index - 1].key
@@ -144,6 +146,7 @@
                       {#if index < query.fields.steps.length - 1}
                         <ActionButton
                           quiet
+                          disabled={!editable}
                           on:click={() => {
                             updateEditorsOnSwap(index, index + 1)
                             const target = query.fields.steps[index + 1].key
@@ -156,6 +159,7 @@
                       {/if}
                     </div>
                     <ActionButton
+                      disabled={!editable}
                       on:click={() => {
                         updateEditorsOnDelete(index)
                         query.fields.steps.splice(index, 1)
@@ -169,6 +173,7 @@
                   <div class="fields">
                     <div class="block-field">
                       <Select
+                        disabled={!editable}
                         value={step.key}
                         options={schema.steps.map(s => s.key)}
                         on:change={({ detail }) => {
@@ -178,6 +183,7 @@
                       <Editor
                         bind:this={stepEditors[index]}
                         editorHeight={height / 2}
+                        readOnly={!editable}
                         mode="json"
                         value={typeof step.value === "string"
                           ? step.value
@@ -194,9 +200,11 @@
             <div class="separator" />
             {#if index === query.fields.steps.length - 1}
               <Icon
+                disabled={!editable}
                 hoverable
                 name="AddCircle"
                 size="S"
+                readOnly={!editable}
                 on:click={() => {
                   query.fields.steps = [
                     ...query.fields.steps,