Try a complete HTML example
Copy this into an HTML file and open it in a browser with an internet connection. Write in the editor, then use the buttons to view its output.
Start with a small CDN example
This complete HTML file creates a working text editor. Use the extended example for code highlighting and equations.
- Create an HTML file
Create a file named editor.html and paste the complete example into it.
- Load the editor from the CDN
The script address loads SolidEdit. The textarea provides the starting text, and mountContentEditor turns it into an editor.
- Open the file and write
Open editor.html in a browser with an internet connection. Change the starting text or set toolbarSize to mini for a compact editor.
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My first SolidEdit document</title>
</head>
<body>
<textarea id="documentBody" aria-label="Editable example document"><p>Start writing here.</p></textarea>
<script>
window.CONTENT_EDITOR_AUTOSTART = false;
window.CONTENT_EDITOR_AUTOINIT = false;
</script>
<script src="https://cdn.jsdelivr.net/gh/statground/solid-edit@ba2b1a6097fa2c677d9a51499a9a5e332afe4fb5/versions/0.0.4/editor.js"
integrity="sha384-o1lxhgutT7T8DymtCkYZMTZogs02eQQ49iziFUhnjFTwe4XR8OWMyrzZAvy9wS7Q"
crossorigin="anonymous"></script>
<script>
const editor = window.mountContentEditor("#documentBody", {
lang: "en",
storageKey: "my-solid-edit-document",
placeholder: "Start writing here."
});
</script>
</body>
</html>Try a complete HTML example
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My first SolidEdit document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/statground/Statground_CDN@fd6e979921018a373002f672a8ddfca760d06e0f/scripts_go/statground_go_20260531_1545/scripts3/toolbox/solid_edit/highlight_20260822_1631.css">
<style>
body { max-width: 960px; margin: 32px auto; padding: 0 20px; font-family: sans-serif; }
button { margin: 16px 8px 0 0; padding: 10px 16px; cursor: pointer; }
pre { padding: 16px; background: #f1f5f9; white-space: pre-wrap; overflow-wrap: anywhere; }
</style>
</head>
<body>
<h1>My first SolidEdit document</h1>
<textarea id="documentBody" aria-label="Editable example document"><p>Start writing here.</p></textarea>
<button id="readHTML" type="button">View HTML</button>
<button id="readMarkdown" type="button">View Markdown</button>
<pre id="output"></pre>
<script>
window.CONTENT_EDITOR_AUTOSTART = false;
window.CONTENT_EDITOR_AUTOINIT = false;
window.MathJax = {
tex: { inlineMath: [], displayMath: [["$$", "$$"]] },
svg: { fontCache: "global" },
startup: { typeset: false }
};
window.CONTENT_EDITOR_MATHJAX_CDN_URL = "https://cdn.jsdelivr.net/gh/mathjax/MathJax@600692ad9d3552cc25f85510d5797bc942ecc9f7/es5/tex-svg.js";
window.CONTENT_EDITOR_MATHJAX_BUNDLE_URL = "https://cdn.jsdelivr.net/gh/mathjax/MathJax@600692ad9d3552cc25f85510d5797bc942ecc9f7/es5/tex-svg.js";
window.CONTENT_EDITOR_HLJS_SCRIPT_SRC = "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@91724c0adaf7bea7e5c5c85e4ea1d672f6c0ed23/build/highlight.min.js";
window.CONTENT_EDITOR_HLJS_STYLE_HREF = "https://cdn.jsdelivr.net/gh/statground/Statground_CDN@fd6e979921018a373002f672a8ddfca760d06e0f/scripts_go/statground_go_20260531_1545/scripts3/toolbox/solid_edit/highlight_20260822_1631.css";
</script>
<script src="https://cdn.jsdelivr.net/gh/mathjax/MathJax@600692ad9d3552cc25f85510d5797bc942ecc9f7/es5/tex-svg.js" integrity="sha384-KKWa9jJ1MZvssLeOoXG6FiOAZfAgmzsIIfw8BXwI9+kYm0lPCbC6yTQPBC00F1/L" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@91724c0adaf7bea7e5c5c85e4ea1d672f6c0ed23/build/highlight.min.js" integrity="sha384-RH2xi4eIQ/gjtbs9fUXM68sLSi99C7ZWBRX1vDrVv6GQXRibxXLbwO2NGZB74MbU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/statground/solid-edit@ba2b1a6097fa2c677d9a51499a9a5e332afe4fb5/versions/0.0.4/editor.js"
integrity="sha384-o1lxhgutT7T8DymtCkYZMTZogs02eQQ49iziFUhnjFTwe4XR8OWMyrzZAvy9wS7Q"
crossorigin="anonymous"></script>
<script>
const editor = window.mountContentEditor("#documentBody", {
lang: "en",
storageKey: "my-solid-edit-document",
placeholder: "Start writing here."
});
// Refresh code and equations after document changes.
let renderTimer;
function refreshRenderers() {
clearTimeout(renderTimer);
renderTimer = setTimeout(() => {
editor.renderAllCodeBlocks();
const mathOutput = window.MathJax?.startup?.output;
if (mathOutput?.options && mathOutput.options.fontCache !== "none") {
mathOutput.options.fontCache = "none";
editor.renderAllMath(true);
}
}, 250);
}
["input", "change", "click", "keyup"].forEach(name => {
editor.root.addEventListener(name, refreshRenderers);
});
document.querySelector("#documentBody").addEventListener("input", refreshRenderers);
refreshRenderers();
window.addEventListener("pagehide", () => clearTimeout(renderTimer));
const output = document.querySelector("#output");
document.querySelector("#readHTML").addEventListener("click", () => {
output.textContent = editor.getHTML();
});
document.querySelector("#readMarkdown").addEventListener("click", () => {
output.textContent = editor.getMarkdown();
});
</script>
</body>
</html>Add SolidEdit to your website
Open a task to see the JavaScript you need. The complete HTML example creates the editor used by the remaining snippets.
Create an editor in a text field
Place a textarea in your page and call mountContentEditor after the library loads. Set toolbarSize to mini for a compact toolbar.
const editor = window.mountContentEditor("#documentBody", {
lang: "en",
storageKey: "my-solid-edit-document",
placeholder: "Start writing here."
});The text field becomes an editable document. Keep the returned editor to read or change its contents.
Read the document as HTML or Markdown
Call these methods when the reader chooses to save, copy, or export. Both return text; your website decides where to store it.
const html = editor.getHTML();
const markdown = editor.getMarkdown();
console.log(html);
console.log(markdown);HTML retains document formatting. Markdown converts supported elements into a text format.
Load another document
Use setHTML to replace the editor contents with HTML from your own trusted document source. Ask the reader before replacing unsaved work.
editor.setHTML("<h2>Next meeting</h2><p>Add the agenda here.</p>");The editor shows the new document and updates the original text field.
Remove an editor when leaving a screen
Read the content you need before removing the editor. Use this when a page component is closed or replaced.
const finalHTML = editor.getHTML();
window.destroyLocalRichEditor(editor);The editing interface is removed and the original textarea becomes available again. This does not delete a stored draft.