diff --git a/code/frameworks/html-vite/README.md b/code/frameworks/html-vite/README.md
new file mode 100644
index 000000000000..b1d04f7a5d67
--- /dev/null
+++ b/code/frameworks/html-vite/README.md
@@ -0,0 +1 @@
+# Storybook for HTML
diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json
new file mode 100644
index 000000000000..1b36174b63d2
--- /dev/null
+++ b/code/frameworks/html-vite/package.json
@@ -0,0 +1,85 @@
+{
+  "name": "@storybook/html-vite",
+  "version": "7.0.0-alpha.57",
+  "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/html-vite",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "frameworks/html-vite"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preset": {
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.mjs",
+      "types": "./dist/preset.d.ts"
+    },
+    "./package.json": {
+      "require": "./package.json",
+      "import": "./package.json",
+      "types": "./package.json"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "types/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "check": "tsc --noEmit",
+    "prep": "../../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@storybook/addons": "7.0.0-alpha.57",
+    "@storybook/builder-vite": "7.0.0-alpha.57",
+    "@storybook/channel-postmessage": "7.0.0-alpha.57",
+    "@storybook/channel-websocket": "7.0.0-alpha.57",
+    "@storybook/client-api": "7.0.0-alpha.57",
+    "@storybook/core-server": "7.0.0-alpha.57",
+    "@storybook/html": "7.0.0-alpha.57",
+    "@storybook/node-logger": "7.0.0-alpha.57",
+    "@storybook/preview-web": "7.0.0-alpha.57",
+    "magic-string": "^0.26.1",
+    "vite": "3"
+  },
+  "devDependencies": {
+    "@types/node": "^16.0.0",
+    "typescript": "~4.6.3",
+    "vite": "^3.1.0"
+  },
+  "engines": {
+    "node": "^14.18 || >=16"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/preset.ts"
+    ],
+    "platform": "node"
+  },
+  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+}
diff --git a/code/frameworks/html-vite/preset.js b/code/frameworks/html-vite/preset.js
new file mode 100644
index 000000000000..a83f95279e7f
--- /dev/null
+++ b/code/frameworks/html-vite/preset.js
@@ -0,0 +1 @@
+module.exports = require('./dist/preset');
diff --git a/code/frameworks/html-vite/src/index.ts b/code/frameworks/html-vite/src/index.ts
new file mode 100644
index 000000000000..d3ded0cdbbb9
--- /dev/null
+++ b/code/frameworks/html-vite/src/index.ts
@@ -0,0 +1 @@
+export type { StorybookConfig } from '@storybook/builder-vite';
diff --git a/code/frameworks/html-vite/src/preset.ts b/code/frameworks/html-vite/src/preset.ts
new file mode 100644
index 000000000000..8e2f55a64687
--- /dev/null
+++ b/code/frameworks/html-vite/src/preset.ts
@@ -0,0 +1,6 @@
+import type { StorybookConfig } from '@storybook/builder-vite';
+
+export const core: StorybookConfig['core'] = {
+  builder: '@storybook/builder-vite',
+  renderer: '@storybook/html',
+};
diff --git a/code/frameworks/html-vite/tsconfig.json b/code/frameworks/html-vite/tsconfig.json
new file mode 100644
index 000000000000..534e4ddd108a
--- /dev/null
+++ b/code/frameworks/html-vite/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["node"],
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.*", "src/**/__testfixtures__/**"]
+}
diff --git a/code/lib/cli/scripts/generate-sb-packages-versions.js b/code/lib/cli/scripts/generate-sb-packages-versions.js
index cba52deaca75..14159fbae83c 100755
--- a/code/lib/cli/scripts/generate-sb-packages-versions.js
+++ b/code/lib/cli/scripts/generate-sb-packages-versions.js
@@ -16,6 +16,8 @@ const run = async () => {
 
   if (!semver.valid(updatedVersion)) throw new Error(`Invalid version: ${updatedVersion}`);
 
+  logger.log(`Generating versions.ts with v${updatedVersion}`);
+
   const storybookPackagesPaths = await globby(
     `${rootDirectory}/@(frameworks|addons|lib|renderers|presets)/**/package.json`,
     {
@@ -40,15 +42,19 @@ const run = async () => {
     .sort((package1, package2) => package1.name.localeCompare(package2.name))
     .reduce((acc, { name }) => ({ ...acc, [name]: updatedVersion }), {});
 
+  const versionsPath = path.join(__dirname, '..', 'src', 'versions.ts');
+
   await writeFile(
-    path.join(__dirname, '..', 'src', 'versions.ts'),
+    versionsPath,
     dedent`
       // auto generated file, do not edit
       export default ${JSON.stringify(packageToVersionMap, null, 2)}
     `
   );
 
-  exec(`yarn lint:js:cmd --fix ${path.join(__dirname, '..', 'src', 'versions.ts')}`, {
+  logger.log(`Updating versions and formatting results at: ${versionsPath}`);
+
+  exec(`yarn lint:js:cmd --fix ${versionsPath}`, {
     cwd: path.join(__dirname, '..', '..', '..'),
   });
 };
diff --git a/code/lib/cli/src/automigrate/fixes/new-frameworks.ts b/code/lib/cli/src/automigrate/fixes/new-frameworks.ts
index 8f2382043a37..d0a47b8a5d60 100644
--- a/code/lib/cli/src/automigrate/fixes/new-frameworks.ts
+++ b/code/lib/cli/src/automigrate/fixes/new-frameworks.ts
@@ -44,6 +44,7 @@ const packagesMap: Record<string, { webpack5?: string; vite?: string }> = {
   },
   '@storybook/html': {
     webpack5: '@storybook/html-webpack5',
+    vite: '@storybook/html-vite',
   },
 };
 
diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts
index fda06425b5b0..50414a568e56 100644
--- a/code/lib/cli/src/repro-templates.ts
+++ b/code/lib/cli/src/repro-templates.ts
@@ -162,6 +162,28 @@ export const allTemplates: Record<string, Template> = {
       builder: '@storybook/builder-webpack5',
     },
   },
+  'html-vite/default-js': {
+    name: 'HTML Vite JS',
+    script: 'yarn create vite . --template vanilla && echo "export default {}" > vite.config.js',
+    expected: {
+      framework: '@storybook/html-vite',
+      renderer: '@storybook/html',
+      builder: '@storybook/builder-vite',
+    },
+    // TODO: remove this once html-vite framework is released
+    inDevelopment: true,
+  },
+  'html-vite/default-ts': {
+    name: 'HTML Vite TS',
+    script: 'yarn create vite . --template vanilla-ts && echo "export default {}" > vite.config.js',
+    expected: {
+      framework: '@storybook/html-vite',
+      renderer: '@storybook/html',
+      builder: '@storybook/builder-vite',
+    },
+    // TODO: remove this once html-vite framework is released
+    inDevelopment: true,
+  },
   'svelte-vite/default-js': {
     name: 'Svelte Vite (JS)',
     script: 'yarn create vite . --template svelte',
diff --git a/code/lib/cli/src/versions.ts b/code/lib/cli/src/versions.ts
index 18c0dfc55f9d..099e94816641 100644
--- a/code/lib/cli/src/versions.ts
+++ b/code/lib/cli/src/versions.ts
@@ -42,6 +42,7 @@ export default {
   '@storybook/ember': '7.0.0-alpha.57',
   '@storybook/html': '7.0.0-alpha.57',
   '@storybook/html-webpack5': '7.0.0-alpha.57',
+  '@storybook/html-vite': '7.0.0-alpha.57',
   '@storybook/instrumenter': '7.0.0-alpha.57',
   '@storybook/nextjs': '7.0.0-alpha.57',
   '@storybook/node-logger': '7.0.0-alpha.57',
diff --git a/code/package.json b/code/package.json
index 5d213f7c57bb..eeb3d2212722 100644
--- a/code/package.json
+++ b/code/package.json
@@ -191,6 +191,7 @@
     "@storybook/ember": "workspace:*",
     "@storybook/eslint-config-storybook": "^3.1.2",
     "@storybook/html": "workspace:*",
+    "@storybook/html-vite": "workspace:*",
     "@storybook/html-webpack5": "workspace:*",
     "@storybook/instrumenter": "workspace:*",
     "@storybook/jest": "^0.0.10",
diff --git a/code/workspace.json b/code/workspace.json
index c258a3c9aa41..20e7a1073f85 100644
--- a/code/workspace.json
+++ b/code/workspace.json
@@ -211,6 +211,11 @@
       "root": "renderers/html",
       "type": "library"
     },
+    "@storybook/html-vite": {
+      "implicitDependencies": [],
+      "root": "frameworks/html-vite",
+      "type": "library"
+    },
     "@storybook/html-webpack5": {
       "implicitDependencies": [],
       "root": "frameworks/html-webpack5",
diff --git a/code/yarn.lock b/code/yarn.lock
index c9e794c2770e..118415a861f7 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6416,6 +6416,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/html-vite@workspace:*, @storybook/html-vite@workspace:frameworks/html-vite":
+  version: 0.0.0-use.local
+  resolution: "@storybook/html-vite@workspace:frameworks/html-vite"
+  dependencies:
+    "@storybook/addons": 7.0.0-alpha.57
+    "@storybook/builder-vite": 7.0.0-alpha.57
+    "@storybook/channel-postmessage": 7.0.0-alpha.57
+    "@storybook/channel-websocket": 7.0.0-alpha.57
+    "@storybook/client-api": 7.0.0-alpha.57
+    "@storybook/core-server": 7.0.0-alpha.57
+    "@storybook/html": 7.0.0-alpha.57
+    "@storybook/node-logger": 7.0.0-alpha.57
+    "@storybook/preview-web": 7.0.0-alpha.57
+    "@types/node": ^16.0.0
+    magic-string: ^0.26.1
+    typescript: ~4.6.3
+    vite: ^3.1.0
+  languageName: unknown
+  linkType: soft
+
 "@storybook/html-webpack5@workspace:*, @storybook/html-webpack5@workspace:frameworks/html-webpack5":
   version: 0.0.0-use.local
   resolution: "@storybook/html-webpack5@workspace:frameworks/html-webpack5"
@@ -6941,7 +6961,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preview-web@workspace:*, @storybook/preview-web@workspace:lib/preview-web":
+"@storybook/preview-web@7.0.0-alpha.57, @storybook/preview-web@workspace:*, @storybook/preview-web@workspace:lib/preview-web":
   version: 0.0.0-use.local
   resolution: "@storybook/preview-web@workspace:lib/preview-web"
   dependencies:
@@ -7138,6 +7158,7 @@ __metadata:
     "@storybook/ember": "workspace:*"
     "@storybook/eslint-config-storybook": ^3.1.2
     "@storybook/html": "workspace:*"
+    "@storybook/html-vite": "workspace:*"
     "@storybook/html-webpack5": "workspace:*"
     "@storybook/instrumenter": "workspace:*"
     "@storybook/jest": ^0.0.10