CodeMirror Web Component

Available Attributes

  • language
  • readonly
  • code
  • theme

API

You can access the code using the code property:

Create valdocument.getElementById("editor").code
Readme
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const body = `<html>
<head>
<script
type="module"
src="https://raw.esm.sh/code-mirror-web-component@0.0.20/dist/code-mirror.js"
></script>
<script type="module">
document.getElementById("editor").addEventListener("code-change", (e) => {
console.log(e.detail.code);
});
</script>
</head>
<body style="margin: 0px; height: 100vh;">
<code-mirror id="editor" theme="dracula" language="sql" code="SELECT * FROM sqlite;"></code-mirror>
</body>
</html>
`;
export default function() {
return new Response(body, {
headers: {
"Content-Type": "text/html",
},
});
}
👆 This is a val. Vals are TypeScript snippets of code, written in the browser and run on our servers. Create scheduled functions, email yourself, and persist small pieces of data — all from the browser.