diff --git a/addons/knobs/src/components/Panel.js b/addons/knobs/src/components/Panel.js
index 09ccad36914..798fee76ad0 100644
--- a/addons/knobs/src/components/Panel.js
+++ b/addons/knobs/src/components/Panel.js
@@ -5,6 +5,7 @@ import { document } from 'global';
 import styled from '@emotion/styled';
 import copy from 'copy-to-clipboard';
 
+import { STORY_CHANGED } from '@storybook/core-events';
 import { Placeholder, TabWrapper, TabsState, ActionBar, ActionButton } from '@storybook/components';
 import { RESET, SET, CHANGE, SET_OPTIONS, CLICK } from '../shared';
 
@@ -37,11 +38,11 @@ export default class KnobPanel extends PureComponent {
     channel.on(SET, this.setKnobs);
     channel.on(SET_OPTIONS, this.setOptions);
 
-    this.stopListeningOnStory = api.onStory(() => {
+    this.stopListeningOnStory = api.on(STORY_CHANGED, () => {
       if (this.mounted) {
-        this.setState({ knobs: {} });
+        this.setKnobs({ knobs: {} });
       }
-      channel.emit(RESET);
+      this.setKnobs({ knobs: {} });
     });
   }
 
diff --git a/addons/knobs/src/index.js b/addons/knobs/src/index.js
index 544bdb4b983..da328c31b08 100644
--- a/addons/knobs/src/index.js
+++ b/addons/knobs/src/index.js
@@ -87,9 +87,9 @@ export const withKnobs = makeDecorator({
     const storyOptions = parameters || options;
     const allOptions = { ...defaultOptions, ...storyOptions };
 
-    manager.setOptions(allOptions);
     const channel = addons.getChannel();
     manager.setChannel(channel);
+    manager.setOptions(allOptions);
     channel.emit(SET_OPTIONS, allOptions);
 
     registerKnobs();
diff --git a/addons/knobs/src/registerKnobs.js b/addons/knobs/src/registerKnobs.js
index 891e57f9224..ae4c2388b56 100644
--- a/addons/knobs/src/registerKnobs.js
+++ b/addons/knobs/src/registerKnobs.js
@@ -1,5 +1,6 @@
 import addons from '@storybook/addons';
-import Events from '@storybook/core-events';
+import { STORY_CHANGED, FORCE_RE_RENDER, REGISTER_SUBSCRIPTION } from '@storybook/core-events';
+
 import KnobManager from './KnobManager';
 import { CHANGE, CLICK, RESET, SET } from './shared';
 
@@ -7,7 +8,7 @@ export const manager = new KnobManager();
 const { knobStore } = manager;
 
 function forceReRender() {
-  addons.getChannel().emit(Events.FORCE_RE_RENDER);
+  addons.getChannel().emit(FORCE_RE_RENDER);
 }
 
 function setPaneKnobs(timestamp = +new Date()) {
@@ -45,6 +46,7 @@ function disconnectCallbacks() {
   const channel = addons.getChannel();
   channel.removeListener(CHANGE, knobChanged);
   channel.removeListener(CLICK, knobClicked);
+  channel.removeListener(STORY_CHANGED, resetKnobs);
   channel.removeListener(RESET, resetKnobs);
   knobStore.unsubscribe(setPaneKnobs);
 }
@@ -53,6 +55,7 @@ function connectCallbacks() {
   const channel = addons.getChannel();
   channel.on(CHANGE, knobChanged);
   channel.on(CLICK, knobClicked);
+  channel.on(STORY_CHANGED, resetKnobs);
   channel.on(RESET, resetKnobs);
   knobStore.subscribe(setPaneKnobs);
 
@@ -60,5 +63,5 @@ function connectCallbacks() {
 }
 
 export function registerKnobs() {
-  addons.getChannel().emit(Events.REGISTER_SUBSCRIPTION, connectCallbacks);
+  addons.getChannel().emit(REGISTER_SUBSCRIPTION, connectCallbacks);
 }
diff --git a/lib/core-events/index.js b/lib/core-events/index.js
index 2b6c685fd93..aa8bd0fa478 100644
--- a/lib/core-events/index.js
+++ b/lib/core-events/index.js
@@ -7,6 +7,7 @@ module.exports = {
   SELECT_STORY: 'selectStory',
   APPLY_SHORTCUT: 'applyShortcut',
   STORY_ADDED: 'storyAdded',
+  STORY_CHANGED: 'storyChanged',
   FORCE_RE_RENDER: 'forceReRender',
   REGISTER_SUBSCRIPTION: 'registerSubscription',
   STORY_INIT: 'storyInit',
diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js
index 4fa9fa5d0ec..a4dffcfc14c 100644
--- a/lib/core/src/client/preview/start.js
+++ b/lib/core/src/client/preview/start.js
@@ -129,6 +129,10 @@ export default function start(render, { decorateStory } = {}) {
         document.documentElement.scrollTop = 0;
       }
 
+      if (!forceRender) {
+        addons.getChannel().emit(Events.STORY_CHANGED, storyStore.getSelection().id);
+      }
+
       render({
         ...context,
         story,
diff --git a/lib/ui/src/core/init-provider-api.js b/lib/ui/src/core/init-provider-api.js
index a513be65a06..5195ff86ab0 100644
--- a/lib/ui/src/core/init-provider-api.js
+++ b/lib/ui/src/core/init-provider-api.js
@@ -1,6 +1,6 @@
 import qs from 'qs';
 
-import { STORY_RENDERED } from '@storybook/core-events';
+import { STORY_CHANGED } from '@storybook/core-events';
 
 export default ({ provider, api, store, eventHandler }) => {
   provider.handleAPI({
@@ -22,7 +22,7 @@ export default ({ provider, api, store, eventHandler }) => {
 
     // TODO deprecate this
     onStory(cb) {
-      return this.on(STORY_RENDERED, cb);
+      return this.on(STORY_CHANGED, cb);
     },
 
     ...api,