# Troubleshooting Common issues developers run into when integrating Traven, and how to fix them. --- ## The editor doesn't appear on the page **Symptom:** The `` tag renders as nothing — the page is blank where the editor should be. **Most likely cause:** The Traven ` ``` **Checklist:** 1. The ` ``` If you are self-hosting, the paths point to your local copies of these files. --- ## Editor layout jumps or misaligns on first load **Symptom:** When the page first loads, the editor appears briefly in the wrong size, then snaps to the correct layout. Or character positions are slightly off. **Cause:** If the page loads custom web fonts (e.g., from Google Fonts), the editor initializes before the fonts finish downloading. CodeMirror caches character width measurements on init, and if the font isn't loaded yet, those measurements are wrong. **Fix:** Initialize the editor only after fonts are ready: ```javascript document.fonts.ready.then(() => { const editor = new TravenEditor({ element: document.getElementById("editor"), initialValue: "# Hello" }); }); ``` If you are using the `` Web Component (which auto-initializes), this is handled for you automatically. The manual `document.fonts.ready` guard is only needed when using the `new TravenEditor()` constructor directly. --- ## Multiple editors on one page load the script multiple times **Symptom:** You have several `` tags on one page and wonder if you need multiple ` ``` --- ## Read-only mode isn't working **Symptom:** You added `read-only` to the tag but the user can still type. **Cause:** In HTML, `read-only` without a value is treated as the attribute being set to the empty string `""`. For boolean attributes on ``, this *should* work — but if you're setting it via JavaScript, make sure you're passing the boolean `true`: ```html

Content

``` --- ## Theme / skin doesn't change when I switch the `` at runtime **Symptom:** You change the skin `` href dynamically, but the editor appearance doesn't update. **This should work.** Traven skins are pure CSS, so swapping the `` `href` at runtime causes the browser to re-apply styles immediately. If it's not working: 1. Make sure the new skin file actually exists at the URL you're pointing to (open it directly in your browser to verify). 2. If the skin is loaded via CDN, make sure the URL is correct and the file is accessible (no CORS issues). 3. Hard-refresh the page (`Ctrl+Shift+R`) to bypass the browser cache if you're developing locally. See [Skins](skins.md) for a working skin-picker example. --- ## Where to get help If none of the above resolves your issue: - Check the [API Reference](api-reference.md) for the complete list of constructor options and methods. - Check the [Cheat Sheet](cheatsheet.md) for every attribute you can put on ``. - Check the [Installation & Setup](installation-setup.md) guide for CDN vs. local hosting details.