diff --git a/src/vector/screenshots.html b/src/vector/screenshots.html
new file mode 100644
index 0000000000..9f3bb5cbd2
--- /dev/null
+++ b/src/vector/screenshots.html
@@ -0,0 +1,106 @@
+
+
+
+
+
+ Element Screenshots
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <% for (var i=0; i < htmlWebpackPlugin.files.css.length; i++) {
+ var file = htmlWebpackPlugin.files.css[i];
+ var match = file.match(/^bundles\/.*?\/theme-(.*)\.css$/);
+ if (match) {
+ var title = match[1].charAt(0).toUpperCase() + match[1].slice(1);
+ %>
+
+ <% } else { %>
+
+ <% }
+ } %>
+
+ <% for (var i=0; i < htmlWebpackPlugin.tags.headTags.length; i++) {
+ var tag = htmlWebpackPlugin.tags.headTags[i];
+ var path = tag.attributes && tag.attributes.href;
+ if (path.indexOf("Inter") !== -1) { %>
+
+ <% }
+ } %>
+
+
+
+
+
+
+
+
+  %>)
+  %>)
+  %>)
+  %>)
+  %>)
+  %>)
+  %>)
+  %>)
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/vector/screenshots.tsx b/src/vector/screenshots.tsx
new file mode 100644
index 0000000000..b72119ccee
--- /dev/null
+++ b/src/vector/screenshots.tsx
@@ -0,0 +1,140 @@
+/*
+Copyright 2022 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+// This file is a cut-down copy of index.ts. It goes together with
+// screenshots.html to create a page allowing you to choose a component,
+// Which is rendered with example data, allowing us to take screenshots
+// (using code in matrix-react-sdk/tests/end-to-end-tests/screenshots.js)
+// and compare for any changes against previous versions.
+
+import './modernizr';
+import * as ReactDOM from "react-dom";
+import React, { ChangeEvent, ReactElement } from 'react';
+import { MatrixClientPeg } from "matrix-react-sdk/src/MatrixClientPeg";
+import { screenshotNotificationUserSettingsTab } from './screenshots/notification_user_settings_tab';
+
+let widthInput: HTMLInputElement;
+let heightInput: HTMLInputElement;
+let classInput: HTMLInputElement;
+
+async function settled(...promises: Array>) {
+ for (const prom of promises) {
+ try {
+ await prom;
+ } catch (e) {
+ console.error(e);
+ }
+ }
+}
+
+async function start() {
+ const {
+ preparePlatform,
+ loadSkin,
+ loadLanguage,
+ loadTheme,
+ } = await import(
+ /* webpackChunkName: "init" */
+ /* webpackPreload: true */
+ "./init");
+
+ try {
+ preparePlatform();
+ const loadLanguagePromise = loadLanguage();
+ const loadThemePromise = loadTheme();
+ const loadSkinPromise = loadSkin();
+ await settled(loadSkinPromise, loadThemePromise, loadLanguagePromise);
+
+ await loadSkinPromise;
+ await loadThemePromise;
+ await loadLanguagePromise;
+
+ await myLoadApp();
+ } catch (err) {
+ console.error(err);
+ }
+}
+
+async function myLoadApp() {
+ // We know that MatrixClientPeg is a MatrixClientPegClass
+ await (MatrixClientPeg as any).createClient({});
+
+ window.matrixChat = ReactDOM.render(
+
+
+
+
+
+
+