diff --git a/web/codemirror-imports.ts b/web/codemirror-imports.ts
new file mode 100644
index 0000000..6db3037
--- /dev/null
+++ b/web/codemirror-imports.ts
@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import 'codemirror';
+
+import {EditorConfiguration} from 'codemirror';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'codemirror-element': CodeMirrorElement;
+  }
+}
+
+/**
+ * The type `codemirror.EditorConfiguration` is just outdated, so we have to add
+ * some props manually here.
+ */
+export interface CodeMirrorConfig extends EditorConfiguration {
+  autoCloseBrackets?: boolean;
+  matchBrackets?: boolean;
+  showTabs?: boolean;
+  showTrailingSpace?: boolean;
+  lineSeparator?: string;
+  rulers?: false | ReadonlyArray<number | Ruler> | undefined;
+}
+
+/**
+ * <codemirror-element> is defined in a separate javascript bundle, so let's
+ * define its interface here.
+ */
+interface CodeMirrorElement extends HTMLElement {
+  lineNum?: number;
+  params?: CodeMirrorConfig;
+}
+
+interface Ruler {
+  column: number;
+  className?: string | undefined;
+  color?: string | undefined;
+  lineStyle?: string | undefined;
+  width?: string | undefined;
+}
diff --git a/web/element/codemirror-element.ts b/web/element/codemirror-element.ts
index 34068fa..3cdd668 100644
--- a/web/element/codemirror-element.ts
+++ b/web/element/codemirror-element.ts
@@ -4,9 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import './codemirror-imports';
+
 import {EditorConfiguration} from 'codemirror';
 import {css, html, LitElement} from 'lit';
 import {customElement, property, query} from 'lit/decorators.js';
+
 import {codemirrorStyles} from './codemirror-css';
 import {dialogStyles} from './dialog-css';
 import {foldgutterStyles} from './foldgutter-css';
diff --git a/web/gr-editor.ts b/web/gr-editor.ts
index fb59a66..04a0425 100644
--- a/web/gr-editor.ts
+++ b/web/gr-editor.ts
@@ -3,14 +3,13 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import 'codemirror';
-import 'codemirror/addon/display/rulers';
+import './codemirror-imports';
 import '@gerritcodereview/typescript-api/gerrit';
-import {EditorConfiguration} from 'codemirror';
 import {PluginApi} from '@gerritcodereview/typescript-api/plugin';
 import {html, LitElement} from 'lit';
 import {customElement, property, query} from 'lit/decorators.js';
 
+import {CodeMirrorConfig} from './codemirror-imports';
 import {setScriptSrc} from './safe-script';
 
 declare global {
@@ -39,18 +38,6 @@
 }
 
 /**
- * The type `codemirror.EditorConfiguration` is just outdated, so we have to add
- * some props manually here.
- */
-interface CodeMirrorConfig extends EditorConfiguration {
-  autoCloseBrackets?: boolean;
-  matchBrackets?: boolean;
-  showTabs?: boolean;
-  showTrailingSpace?: boolean;
-  lineSeparator?: string;
-}
-
-/**
  * This component just loads the CodeMirror js bundle lazily and converts the
  * Gerrit preferences into CodeMirror params.
  */