diff --git a/lib/addons/src/types.ts b/lib/addons/src/types.ts
index e2efc16e9423..f773b6e05c8d 100644
--- a/lib/addons/src/types.ts
+++ b/lib/addons/src/types.ts
@@ -59,6 +59,7 @@ export type StoryContext = StoryIdentifier & {
   argTypes: ArgTypes;
   globals: Args;
   hooks?: HooksContext;
+  viewMode?: ViewMode;
 };
 
 export interface WrapperSettings {
diff --git a/lib/client-api/README.md b/lib/client-api/README.md
index a4ca85a7f669..b0134b53f5ee 100644
--- a/lib/client-api/README.md
+++ b/lib/client-api/README.md
@@ -12,6 +12,7 @@ Each story is loaded via the `.add()` API and contains the follow attributes, wh
 - `parameters` - static data about the story, see below.
 - `args` - dynamic inputs to the story, see below.
 - `hooks` - listeners that will rerun when the story changes or is unmounted, see `@storybook/addons`.
+- `viewMode` - property that tells if the story is being rendered in Canvas or Docs tab. Values are `story` for canvas and `docs` for docs.
 
 ## Parameters
 
diff --git a/lib/client-api/src/decorators.test.ts b/lib/client-api/src/decorators.test.ts
index be76e03ba33e..d7513feea95c 100644
--- a/lib/client-api/src/decorators.test.ts
+++ b/lib/client-api/src/decorators.test.ts
@@ -7,9 +7,10 @@ function makeContext(input: Record<string, any>): StoryContext {
     id: 'id',
     kind: 'kind',
     name: 'name',
+    viewMode: 'story',
     parameters: {},
     ...input,
-  };
+  } as StoryContext;
 }
 
 describe('client-api.decorators', () => {
diff --git a/lib/client-api/src/story_store.ts b/lib/client-api/src/story_store.ts
index 1b79abe131da..57db5acb1051 100644
--- a/lib/client-api/src/story_store.ts
+++ b/lib/client-api/src/story_store.ts
@@ -406,6 +406,7 @@ export default class StoryStore {
         args: _stories[id].args,
         argTypes,
         globals: this._globals,
+        viewMode: this._selection?.viewMode,
       });
 
     // Pull out parameters.args.$ || .argTypes.$.defaultValue into initialArgs