diff --git a/defs.bzl b/defs.bzl
index fd3d60bfe..b42396795 100644
--- a/defs.bzl
+++ b/defs.bzl
@@ -7,7 +7,6 @@ load(":protobuf.bzl", "setup_protobuf_binary")
 load("//rslib:clang_format.bzl", "setup_clang_format")
 load("@build_bazel_rules_nodejs//:index.bzl", "node_repositories", "yarn_install")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_repositories")
-load("@build_bazel_rules_svelte//:defs.bzl", "rules_svelte_dependencies")
 load("@com_github_ali5h_rules_pip//:defs.bzl", "pip_import")
 load("//pip/pyqt5:defs.bzl", "install_pyqt5")
 
@@ -53,5 +52,3 @@ def setup_deps():
     )
 
     sass_repositories()
-
-    rules_svelte_dependencies()
diff --git a/repos.bzl b/repos.bzl
index 37ebae38e..ce38f751d 100644
--- a/repos.bzl
+++ b/repos.bzl
@@ -109,24 +109,6 @@ def register_repos():
         sha256 = "224ae14b8d2166b3ab4c5fa9b2ae1828f30620ac628dc152e6c0859c7853bb97",
     )
 
-    # svelte
-    ##########
-
-    # native.local_repository(
-    #     name = "build_bazel_rules_svelte",
-    #     path = "../rules_svelte",
-    # )
-
-    maybe(
-        http_archive,
-        name = "build_bazel_rules_svelte",
-        strip_prefix = "rules_svelte-anki-2021-02-06",
-        urls = [
-            "https://github.com/ankitects/rules_svelte/archive/anki-2021-02-06.tar.gz",
-        ],
-        sha256 = "f77a96ae5a354f8c3c24045f3bee8521bfe56224292d4f71184a3382784640eb",
-    )
-
     # translations
     ################
 
diff --git a/ts/congrats/BUILD.bazel b/ts/congrats/BUILD.bazel
index e82bcf847..86c1a5bcd 100644
--- a/ts/congrats/BUILD.bazel
+++ b/ts/congrats/BUILD.bazel
@@ -1,9 +1,8 @@
-load("@build_bazel_rules_svelte//:defs.bzl", "svelte")
 load("@npm//@bazel/typescript:index.bzl", "ts_library")
 load("@npm//@bazel/rollup:index.bzl", "rollup_bundle")
 load("//ts:prettier.bzl", "prettier_test")
 load("//ts:eslint.bzl", "eslint_test")
-load("//ts:svelte.bzl", "svelte_check")
+load("//ts/svelte:svelte.bzl", "svelte", "svelte_check")
 
 svelte(
     name = "CongratsPage",
diff --git a/ts/graphs/BUILD.bazel b/ts/graphs/BUILD.bazel
index b216438ff..79a39e900 100644
--- a/ts/graphs/BUILD.bazel
+++ b/ts/graphs/BUILD.bazel
@@ -1,6 +1,6 @@
 load("@npm//@bazel/typescript:index.bzl", "ts_library")
 load("@npm//@bazel/rollup:index.bzl", "rollup_bundle")
-load("//ts:svelte.bzl", "compile_svelte", "svelte_check")
+load("//ts/svelte:svelte.bzl", "compile_svelte", "svelte_check")
 load("//ts:prettier.bzl", "prettier_test")
 load("//ts:eslint.bzl", "eslint_test")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
diff --git a/ts/package.json b/ts/package.json
index ae08ac96f..0c41ea628 100644
--- a/ts/package.json
+++ b/ts/package.json
@@ -42,8 +42,9 @@
         "rollup-plugin-terser": "^7.0.2",
         "sass": "^1.32.6",
         "semver": "^7.3.4",
-        "svelte": "^3.28.0",
+        "svelte": "=3.24.1",
         "svelte-check": "^1.0.61",
+        "svelte-preprocess": "^4.6.9",
         "svelte2tsx": "^0.1.133",
         "tmp": "^0.2.1",
         "tslib": "^2.0.3",
diff --git a/ts/svelte.bzl b/ts/svelte.bzl
deleted file mode 100644
index 4641c1d9c..000000000
--- a/ts/svelte.bzl
+++ /dev/null
@@ -1,30 +0,0 @@
-load("@build_bazel_rules_svelte//:defs.bzl", "svelte")
-load("@npm//svelte-check:index.bzl", _svelte_check = "svelte_check_test")
-
-def compile_svelte(name, srcs):
-    for src in srcs:
-        svelte(
-            name = src.replace(".svelte", ""),
-            entry_point = src,
-        )
-
-    native.filegroup(
-        name = name,
-        srcs = srcs,
-    )
-
-def svelte_check(name = "svelte_check", srcs = []):
-    _svelte_check(
-        name = name,
-        args = [
-            "--workspace",
-            native.package_name(),
-        ],
-        data = [
-            "//ts:tsconfig.json",
-            "//ts/lib",
-            "//ts/lib:backend_proto",
-            "@npm//sass"
-        ] + srcs,
-        link_workspace_root = True,
-    )
diff --git a/ts/svelte/BUILD.bazel b/ts/svelte/BUILD.bazel
new file mode 100644
index 000000000..730042df6
--- /dev/null
+++ b/ts/svelte/BUILD.bazel
@@ -0,0 +1,24 @@
+load("@build_bazel_rules_nodejs//:index.bzl", "nodejs_binary")
+
+nodejs_binary(
+    name = "typescript",
+    data = [
+        "@npm//typescript",
+    ],
+    entry_point = "@npm//:node_modules/typescript/lib/tsc.js",
+    visibility = ["//visibility:public"],
+)
+
+nodejs_binary(
+    name = "svelte",
+    data = [
+        ":svelte.js",
+        "@npm//sass",
+        "@npm//svelte",
+        "@npm//svelte-preprocess",
+        "@npm//svelte2tsx",
+    ],
+    entry_point = ":svelte.js",
+    templated_args = ["--bazel_patch_module_resolver"],
+    visibility = ["//visibility:public"],
+)
diff --git a/ts/svelte/README.md b/ts/svelte/README.md
new file mode 100644
index 000000000..f2d47b990
--- /dev/null
+++ b/ts/svelte/README.md
@@ -0,0 +1,4 @@
+Originally forked from https://github.com/thelgevold/rules_svelte (MIT) into
+https://github.com/ankitects/rules_svelte, and modified to generate TypeScript
+definitions in addition to mjs files. The parts we need are now integrated into
+this repo, so we can modify them more easily.
diff --git a/ts/svelte/svelte.bzl b/ts/svelte/svelte.bzl
new file mode 100644
index 000000000..581305359
--- /dev/null
+++ b/ts/svelte/svelte.bzl
@@ -0,0 +1,103 @@
+load("@npm//svelte-check:index.bzl", _svelte_check = "svelte_check_test")
+
+"Implementation of the svelte rule"
+
+load("@build_bazel_rules_nodejs//:providers.bzl", "declaration_info")
+
+SvelteFilesInfo = provider("transitive_sources")
+
+def get_transitive_srcs(srcs, deps):
+    return depset(
+        srcs,
+        transitive = [dep[SvelteFilesInfo].transitive_sources for dep in deps],
+    )
+
+def _svelte(ctx):
+    base = ctx.attr.name + ".svelte"
+    temp = ctx.actions.declare_directory(base + ".temp")
+    temptsx = temp.path + "/" + base + ".tsx"
+    ctx.actions.run_shell(
+        mnemonic = "Svelte",
+        command = """\
+{svelte} {input} {output_js} {temp} && \
+{tsc} {tsc_args} {temptsx} {shims} && \
+mv {temp}/{base}.d.ts {output_def} && \
+rm {temptsx}""".format(
+            svelte = ctx.executable._svelte.path,
+            input = ctx.file.entry_point.path,
+            output_js = ctx.outputs.build.path,
+            tsc = ctx.executable._typescript.path,
+            output_def = ctx.outputs.buildDef.path,
+            temp = temp.path,
+            temptsx = temptsx,
+            base = base,
+            tsc_args = "--jsx preserve --emitDeclarationOnly --declaration --skipLibCheck",
+            shims = " ".join([f.path for f in ctx.files._shims]),
+        ),
+        outputs = [ctx.outputs.build, ctx.outputs.buildDef, temp],
+        inputs = [ctx.file.entry_point] + ctx.files._shims,
+        tools = [ctx.executable._svelte, ctx.executable._typescript],
+    )
+
+    trans_srcs = get_transitive_srcs(ctx.files.srcs + [ctx.outputs.build, ctx.outputs.buildDef], ctx.attr.deps)
+
+    return [
+        declaration_info(depset([ctx.outputs.buildDef]), deps = [ctx.attr._shims]),
+        SvelteFilesInfo(transitive_sources = trans_srcs),
+        DefaultInfo(files = trans_srcs),
+    ]
+
+svelte = rule(
+    implementation = _svelte,
+    attrs = {
+        "entry_point": attr.label(allow_single_file = True),
+        "deps": attr.label_list(),
+        "srcs": attr.label_list(allow_files = True),
+        "_svelte": attr.label(
+            default = Label("//ts/svelte:svelte"),
+            executable = True,
+            cfg = "host",
+        ),
+        "_typescript": attr.label(
+            default = Label("//ts/svelte:typescript"),
+            executable = True,
+            cfg = "host",
+        ),
+        "_shims": attr.label(
+            default = Label("@npm//svelte2tsx:svelte2tsx__typings"),
+            allow_files = True,
+        ),
+    },
+    outputs = {
+        "build": "%{name}.svelte.mjs",
+        "buildDef": "%{name}.svelte.d.ts",
+    },
+)
+
+def compile_svelte(name, srcs):
+    for src in srcs:
+        svelte(
+            name = src.replace(".svelte", ""),
+            entry_point = src,
+        )
+
+    native.filegroup(
+        name = name,
+        srcs = srcs,
+    )
+
+def svelte_check(name = "svelte_check", srcs = []):
+    _svelte_check(
+        name = name,
+        args = [
+            "--workspace",
+            native.package_name(),
+        ],
+        data = [
+            "//ts:tsconfig.json",
+            "//ts/lib",
+            "//ts/lib:backend_proto",
+            "@npm//sass",
+        ] + srcs,
+        link_workspace_root = True,
+    )
diff --git a/ts/svelte/svelte.js b/ts/svelte/svelte.js
new file mode 100644
index 000000000..259cde4fc
--- /dev/null
+++ b/ts/svelte/svelte.js
@@ -0,0 +1,56 @@
+const fs = require("fs");
+const process = require("process");
+const path = require("path");
+
+const input = process.argv[2];
+const outputJs = process.argv[3];
+const temp = process.argv[4];
+
+
+const svelte = require("svelte/compiler");
+
+const source = fs.readFileSync(input, "utf8");
+
+const preprocessOptions = require("svelte-preprocess")({});
+preprocessOptions.filename = input;
+
+const svelte2tsx = require("svelte2tsx");
+
+let tsoutput = svelte2tsx(source, {
+  filename: input,
+  strictMode: true,
+  isTsFile: true,
+});
+let codeLines = tsoutput.code.split("\n");
+// replace the "///<reference types="svelte" />" with a line
+// turning off checking, as we'll use svelte-check for that
+codeLines[0] = "// @ts-nocheck";
+const outputBase = path.basename(outputJs.replace(".mjs", ".tsx"));
+const outputTs = path.join(temp, outputBase);
+fs.writeFileSync(outputTs, codeLines.join("\n"));
+
+svelte.preprocess(source, preprocessOptions).then(
+  (processed) => {
+    let result;
+    try {
+      result = svelte.compile(processed.toString(), {
+        format: "esm",
+        generate: "dom",
+        filename: outputJs,
+      });
+    } catch (err) {
+      console.log(`compile failed: ${err}`);
+      return;
+    }
+    if (result.warnings.length > 0) {
+      console.log(`warnings during compile: ${result.warnings}`);
+      return;
+    }
+
+    let code = result.js.code;
+    fs.writeFileSync(outputJs, code);
+  },
+  (error) => {
+    console.log(`preprocess failed: ${error}`);
+  }
+);
diff --git a/ts/yarn.lock b/ts/yarn.lock
index 48761f49c..dac4c2575 100644
--- a/ts/yarn.lock
+++ b/ts/yarn.lock
@@ -2350,6 +2350,16 @@ svelte-preprocess@^4.0.0:
     detect-indent "^6.0.0"
     strip-indent "^3.0.0"
 
+svelte-preprocess@^4.6.9:
+  version "4.6.9"
+  resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.6.9.tgz#073d923eb351b98b6c6a454ba5feee981cd9dbf5"
+  integrity sha512-SROWH0rB0DJ+0Ii264cprmNu/NJyZacs5wFD71ya93Cg/oA2lKHgQm4F6j0EWA4ktFMzeuJJm/eX6fka39hEHA==
+  dependencies:
+    "@types/pug" "^2.0.4"
+    "@types/sass" "^1.16.0"
+    detect-indent "^6.0.0"
+    strip-indent "^3.0.0"
+
 svelte2tsx@^0.1.133:
   version "0.1.166"
   resolved "https://registry.yarnpkg.com/svelte2tsx/-/svelte2tsx-0.1.166.tgz#0424747e13f1babb40c7f3637f01415398ddab18"
@@ -2358,10 +2368,10 @@ svelte2tsx@^0.1.133:
     dedent-js "^1.0.1"
     pascal-case "^3.1.1"
 
-svelte@^3.28.0:
-  version "3.32.1"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.32.1.tgz#c4b6e35517d0ed77e652cc8964ef660afa2f70f3"
-  integrity sha512-j1KmD2ZOU0RGq1/STDXjwfh0/eJ/Deh2NXyuz1bpR9eOcz9yImn4CGxXdbSAN7cMTm9a7IyPUIbuBCzu/pXK0g==
+svelte@=3.24.1:
+  version "3.24.1"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.24.1.tgz#aca364937dd1df27fe131e2a4c234acb6061db4b"
+  integrity sha512-OX/IBVUJSFo1rnznXdwf9rv6LReJ3qQ0PwRjj76vfUWyTfbHbR9OXqJBnUrpjyis2dwYcbT2Zm1DFjOOF1ZbbQ==
 
 table@^5.2.3:
   version "5.4.6"