Plain HTML
One HTML file that loads the editor from a CDN with <script type="module"> and mounts it: no framework and no bundler, but the package must be on the CDN.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>OpenMarkdown editor: plain HTML</title>
<!-- Framework-free is not build-free: this page needs the package on npm, for esm.sh to serve.
Unpublished package, or no CDN allowed? Build it once and serve the files yourself:
https://openmarkdown.dev/editor/docs/guides/self-hosting/ -->
<style>
#editor { height: 360px; border: 1px solid #d9d6cf; border-radius: 8px; overflow: hidden; }
#editor .cm-editor { height: 100%; }
</style>
</head>
<body>
<div id="editor"></div>
<script type="module">
import { createEditorState, mountEditor } from "https://esm.sh/@openmarkdown-dev/editor@0.1.0";
mountEditor(
document.getElementById("editor"),
createEditorState({
doc: "# Hello\n\nThis editor came from a CDN. No framework, no bundler.\n\n- [ ] Try a checkbox\n- **Bold** and `code` render as you type\n",
}),
);
</script>
</body>
</html>{
"name": "openmarkdown-editor-example-html-script",
"private": true,
"type": "module",
"scripts": {
"dev": "npx --yes serve ."
}
}Docs: Self-hosting (no CDN, no bundler) Source on GitHub Open in StackBlitz