# Svelte CodeMirror - Multiple Instances

**URL:** <https://discuss.codemirror.net/t/svelte-codemirror-multiple-instances/9171>\
**Category:** v6\
**Created:** [April 27, 2025, 8:30pm UTC](https://discuss.codemirror.net/t/svelte-codemirror-multiple-instances/9171 "2025-04-27T20:30:57Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Caseter](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/caseter/32/5090_2.png) [@Caseter](https://discuss.codemirror.net/u/Caseter)\
**Post date:** [April 27, 2025, 8:30pm UTC](https://discuss.codemirror.net/t/svelte-codemirror-multiple-instances/9171/1 "2025-04-27T20:30:57Z")

</div>

Hello,

Recently started using CodeMirror on a single page Svelte based project (using this component version [GitHub - touchifyapp/svelte-codemirror-editor: A svelte component to create a CodeMirror 6+ editor](https://github.com/touchifyapp/svelte-codemirror-editor)).

My first code editor instance worked absolutely fine, displays the data I expect it to and accepts inputs to update it live.

However, for some weird reason when I add my second code editor under a different tab to call other data (from stores), it always pulls the info from the first code editor no matter what I do.

If I maully refer the data in a p e.g.

```auto
<p class="text-xs p-2 bg-muted rounded break-words whitespace-pre-wrap">
{$recipePreview}
</p>

```

This one loads absolutely fine, so I know its not the data itself, but the fact CodeMirror for some reason its displaying the same instance twice and not respecting the two different ones I created.

My first one is:

```auto
<CodeMirror bind:value={$manifestPreview} lang={xml()} theme={$mode === 'dark' ? vscodeDark : vscodeLight} readonly lineWrapping/>

```

And this is my second:

```auto
<CodeMirror bind:value={$recipePreview} lang={xml()} theme={$mode === 'dark' ? vscodeDark : vscodeLight} readonly lineWrapping/>

```

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [April 28, 2025, 6:20am UTC](https://discuss.codemirror.net/t/svelte-codemirror-multiple-instances/9171/2 "2025-04-28T06:20:01Z")

</div>

The CodeMirror library keeps no observeable global state, so I am pretty certain the issue here would be in the Svelte wrapper you use.

---

<div class="post-metadata">

**Author:** ![ym-han](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/ym-han/32/4261_2.png) [@ym-han](https://discuss.codemirror.net/u/ym-han)\
**Post date:** [April 16, 2026, 9:26am UTC](https://discuss.codemirror.net/t/svelte-codemirror-multiple-instances/9171/3 "2026-04-16T09:26:41Z")

</div>

I’ve used CM6 with Svelte 5 (with my own wrapper); I haven’t had any issues with mounting multiple CM instances on a page.