diff --git a/app/html/package.json b/app/html/package.json
index 8c5f87db01fe..d348693504d3 100644
--- a/app/html/package.json
+++ b/app/html/package.json
@@ -26,6 +26,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
+    "@storybook/addons": "5.2.0-alpha.41",
     "@storybook/core": "5.2.0-alpha.41",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
diff --git a/app/html/src/client/preview/index.ts b/app/html/src/client/preview/index.ts
index b85e13e84a71..981aa6f432a4 100644
--- a/app/html/src/client/preview/index.ts
+++ b/app/html/src/client/preview/index.ts
@@ -1,34 +1,37 @@
+/* eslint-disable prefer-destructuring */
 import { start } from '@storybook/core/client';
+import { ClientStoryApi } from '@storybook/addons';
 
 import './globals';
 import render from './render';
+import { StoryFnHtmlReturnType, IStorybookSection } from './types';
 
-export type StoriesOfArgs = [string, typeof module];
-
-export type LoadFnArgs = [RequireContext, typeof module, string];
+const framework = 'html';
 
-export interface RequireContext {
-  keys(): string[];
-  (id: string): any;
-  <T>(id: string): T;
-  resolve(id: string): string;
+interface ClientApi extends ClientStoryApi<StoryFnHtmlReturnType> {
+  setAddon(addon: any): void;
+  configure(loaders: () => void, module: NodeModule): void;
+  getStorybook(): IStorybookSection[];
+  clearDecorators(): void;
+  forceReRender(): void;
+  raw: () => any; // todo add type
+  load: (req: any, m: NodeModule, framework: string) => void;
 }
 
-const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
-
-export const {
-  setAddon,
-  addDecorator,
-  addParameters,
-  clearDecorators,
-  getStorybook,
-  raw,
-} = clientApi;
-
-const framework = 'html';
-export const storiesOf = (...args: StoriesOfArgs) =>
-  clientApi.storiesOf(...args).addParameters({ framework });
-export const load = (...args: LoadFnArgs) => coreLoad(...args, framework);
-
-export const { configure } = configApi;
-export { forceReRender };
+const api = start(render);
+
+export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
+  return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
+    framework,
+  });
+};
+
+export const load: ClientApi['load'] = (...args) => api.load(...args, framework);
+export const addDecorator: ClientApi['addDecorator'] = api.clientApi.addDecorator;
+export const addParameters: ClientApi['addParameters'] = api.clientApi.addParameters;
+export const clearDecorators: ClientApi['clearDecorators'] = api.clientApi.clearDecorators;
+export const setAddon: ClientApi['setAddon'] = api.clientApi.setAddon;
+export const configure: ClientApi['configure'] = api.configApi.configure;
+export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
+export const getStorybook: ClientApi['getStorybook'] = api.clientApi.getStorybook;
+export const raw: ClientApi['raw'] = api.clientApi.raw;
diff --git a/app/html/src/client/preview/render.ts b/app/html/src/client/preview/render.ts
index 3d0b571d4830..760cbd0e1e96 100644
--- a/app/html/src/client/preview/render.ts
+++ b/app/html/src/client/preview/render.ts
@@ -1,19 +1,6 @@
 import { document, Node } from 'global';
 import { stripIndents } from 'common-tags';
-
-export interface ShowErrorArgs {
-  title: string;
-  description: string;
-}
-
-export interface RenderMainArgs {
-  storyFn: () => string | Node | undefined;
-  selectedKind: string;
-  selectedStory: string;
-  showMain: () => void;
-  showError: (args: ShowErrorArgs) => void;
-  forceRender: boolean;
-}
+import { RenderMainArgs } from './types';
 
 const rootElement = document.getElementById('root');
 
diff --git a/app/html/src/client/preview/types.ts b/app/html/src/client/preview/types.ts
new file mode 100644
index 000000000000..36432e1a4558
--- /dev/null
+++ b/app/html/src/client/preview/types.ts
@@ -0,0 +1,27 @@
+import { StoryFn } from '@storybook/addons';
+
+export type StoryFnHtmlReturnType = string | Node;
+
+export interface IStorybookStory {
+  name: string;
+  render: () => any;
+}
+
+export interface IStorybookSection {
+  kind: string;
+  stories: IStorybookStory[];
+}
+
+export interface ShowErrorArgs {
+  title: string;
+  description: string;
+}
+
+export interface RenderMainArgs {
+  storyFn: () => StoryFn<StoryFnHtmlReturnType>;
+  selectedKind: string;
+  selectedStory: string;
+  showMain: () => void;
+  showError: (args: ShowErrorArgs) => void;
+  forceRender: boolean;
+}
diff --git a/app/html/src/server/options.ts b/app/html/src/server/options.ts
index 03953efd592f..27701b0063c8 100644
--- a/app/html/src/server/options.ts
+++ b/app/html/src/server/options.ts
@@ -1,4 +1,5 @@
-import packageJson from '../../package.json';
+// tslint:disable-next-line: no-var-requires
+const packageJson = require('../../package.json');
 
 export default {
   packageJson,
diff --git a/app/html/src/typings.d.ts b/app/html/src/typings.d.ts
index 13d3559cb8b3..690e93343de2 100644
--- a/app/html/src/typings.d.ts
+++ b/app/html/src/typings.d.ts
@@ -1,4 +1,5 @@
+declare module '@storybook/core/*';
 declare module 'global';
-declare module '*.json';
-declare module '@storybook/core/client';
-declare module '@storybook/core/server';
+
+// will be provided by the webpack define plugin
+declare var NODE_ENV: string | undefined;