diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 99b2acfb..9629e2c7 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -221,7 +221,7 @@ jobs:
     - name: Print directory structure
       run: ls -R
     - name: Build demo
-      run: yarn start &
+      run: yarn build-demo
     - name: Integration tests
       run: yarn test-playwright --forbid-only
 
diff --git a/demo/build.js b/demo/build.js
new file mode 100644
index 00000000..6685ba17
--- /dev/null
+++ b/demo/build.js
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+// @ts-check
+
+const path = require('path');
+const webpack = require('webpack');
+
+/**
+ * This webpack config builds and watches the demo project. It works by taking the output from tsc
+ * (via `yarn watch`) which is put into `out/` and then webpacks it into `demo/dist/`. The aliases
+ * are used fix up the absolute paths output by tsc (because of `baseUrl` and `paths` in
+ * `tsconfig.json`.
+ *
+ * For production builds see `webpack.config.js` in the root directory. If that is built the demo
+ * can use that by switching out which `Terminal` is imported in `client.ts`, this is useful for
+ * validating that the packaged version works correctly.
+ *
+ * @type {import('webpack').Configuration}
+ */
+const clientConfig = {
+  entry: path.resolve(__dirname, 'client.ts'),
+  devtool: 'inline-source-map',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/
+      },
+      {
+        test: /\.js$/,
+        use: ["source-map-loader"],
+        enforce: "pre",
+        exclude: /node_modules/
+      }
+    ]
+  },
+  resolve: {
+    modules: [
+      'node_modules',
+      path.resolve(__dirname, '..'),
+      path.resolve(__dirname, '../addons')
+    ],
+    extensions: [ '.tsx', '.ts', '.js' ],
+    alias: {
+      common: path.resolve('./out/common'),
+      browser: path.resolve('./out/browser')
+    },
+    fallback: {
+      // The ligature modules contains fallbacks for node environments, we never want to browserify them
+      stream: false,
+      util: false,
+      os: false,
+      path: false,
+      fs: false
+    }
+  },
+  output: {
+    filename: 'client-bundle.js',
+    path: path.resolve(__dirname, 'dist')
+  },
+  mode: 'development',
+  watch: true
+};
+const compiler = webpack(clientConfig);
+
+compiler.compile(() => (err, stats) => {
+  if (err) {
+    console.error(err);
+  }
+  console.log(stats?.toString({
+    colors: true
+  }));
+});
diff --git a/package.json b/package.json
index 89bd072e..59cdf9e3 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "package-headless": "webpack --config ./webpack.config.headless.js",
     "postpackage-headless": "node ./bin/package_headless.js",
     "start": "node demo/start",
+    "build-demo": "node demo/build",
     "start-debug": "node --inspect-brk demo/start",
     "lint": "eslint -c .eslintrc.json --max-warnings 0 --ext .ts src/ addons/",
     "lint-api": "eslint --no-eslintrc -c .eslintrc.json.typings --max-warnings 0 --no-ignore --ext .d.ts typings/",