diff --git a/.changeset/twenty-places-pump.md b/.changeset/twenty-places-pump.md
new file mode 100644
index 0000000000..13508d3c48
--- /dev/null
+++ b/.changeset/twenty-places-pump.md
@@ -0,0 +1,7 @@
+---
+"@lynx-js/rspeedy": patch
+---
+
+feat: support web preview in rspeedy dev
+
+- support web preview in rspeedy dev (experimental)
diff --git a/packages/rspeedy/core/package.json b/packages/rspeedy/core/package.json
index 83107bf69c..c974bcce08 100644
--- a/packages/rspeedy/core/package.json
+++ b/packages/rspeedy/core/package.json
@@ -56,6 +56,7 @@
   "dependencies": {
     "@lynx-js/cache-events-webpack-plugin": "workspace:^",
     "@lynx-js/chunk-loading-webpack-plugin": "workspace:^",
+    "@lynx-js/web-rsbuild-server-middleware": "workspace:*",
     "@lynx-js/webpack-dev-transport": "workspace:^",
     "@lynx-js/websocket": "workspace:^",
     "@rsbuild/core": "catalog:rsbuild",
diff --git a/packages/rspeedy/core/src/plugins/dev.plugin.ts b/packages/rspeedy/core/src/plugins/dev.plugin.ts
index c82599ede2..1d2e830691 100644
--- a/packages/rspeedy/core/src/plugins/dev.plugin.ts
+++ b/packages/rspeedy/core/src/plugins/dev.plugin.ts
@@ -74,6 +74,18 @@ export function pluginDev(
 
       debug(`dev.assetPrefix is normalized to ${assetPrefix}`)
 
+      api.onBeforeStartDevServer(async ({ environments, server }) => {
+        if (environments['web']) {
+          const { createWebVirtualFilesMiddleware } = await import(
+            '@lynx-js/web-rsbuild-server-middleware'
+          )
+          // Add the web preview middleware
+          server.middlewares.use(
+            createWebVirtualFilesMiddleware('/__web_preview'),
+          )
+        }
+      })
+
       api.modifyRsbuildConfig((config, { mergeRsbuildConfig }) => {
         return mergeRsbuildConfig(config, {
           dev: {
diff --git a/packages/rspeedy/core/test/plugins/dev.plugin.test.ts b/packages/rspeedy/core/test/plugins/dev.plugin.test.ts
index 4c4f416908..c27e4588dc 100644
--- a/packages/rspeedy/core/test/plugins/dev.plugin.test.ts
+++ b/packages/rspeedy/core/test/plugins/dev.plugin.test.ts
@@ -650,4 +650,22 @@ describe('Plugins - Dev', () => {
     expect(hostname).toBe('example.com')
     expect(pathname).toBe('/dist/')
   })
+
+  test('environment.web to have middleware installed', async () => {
+    const rsbuild = await createStubRspeedy({
+      source: {
+        entry: path.resolve(__dirname, './fixtures/hello-world/index.js'),
+      },
+      environments: {
+        web: {},
+        lynx: {},
+      },
+    })
+    const middleware = await import('@lynx-js/web-rsbuild-server-middleware')
+    vi.spyOn(middleware, 'createWebVirtualFilesMiddleware')
+
+    await using server = await rsbuild.usingDevServer()
+    await server.waitDevCompileDone()
+    expect(vi.mocked(middleware.createWebVirtualFilesMiddleware)).toBeCalled()
+  })
 })
diff --git a/packages/rspeedy/core/tsconfig.json b/packages/rspeedy/core/tsconfig.json
index d65ff4ac77..17b289fa8e 100644
--- a/packages/rspeedy/core/tsconfig.json
+++ b/packages/rspeedy/core/tsconfig.json
@@ -21,5 +21,6 @@
     { "path": "../../webpack/cache-events-webpack-plugin/tsconfig.build.json" },
     { "path": "../../webpack/chunk-loading-webpack-plugin/tsconfig.build.json" },
     { "path": "../../webpack/css-extract-webpack-plugin/tsconfig.build.json" },
+    { "path": "../../web-platform/web-rsbuild-server-middleware/tsconfig.json" },
   ],
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 723616af86..37379dbf9f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -365,6 +365,9 @@ importers:
       '@lynx-js/chunk-loading-webpack-plugin':
         specifier: workspace:^
         version: link:../../webpack/chunk-loading-webpack-plugin
+      '@lynx-js/web-rsbuild-server-middleware':
+        specifier: workspace:*
+        version: link:../../web-platform/web-rsbuild-server-middleware
       '@lynx-js/webpack-dev-transport':
         specifier: workspace:^
         version: link:../../webpack/webpack-dev-transport