Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

zahedkamal87's avatar

CodeMirror 6 on Full Page component

Hi, I'm new with Livewire. Trying to create a basic component where when user types something in CodeMirror element it would copy the content to a textarea. Here is the code

use Livewire\Attributes\Layout;
use Livewire\Attributes\Title;
use Livewire\Volt\Component;

new
#[Layout('layouts.guest')]
#[Title('Title')]
class extends Component {
    public $code;
}; ?>

<div class="container py-5">
    <div id="code-editor" wire:model.live="code" wire:ignore></div>

    <textarea>{{$code}}</textarea>
</div>

@script
    <script>
        new EditorView({
            doc: "console.log('hello')\n",
            extensions: [basicSetup, javascript()],
            parent: document.getElementById("code-editor")
        });
    </script>
@endscript

and, in an external JS file (before built the file), I've this -

import {basicSetup, EditorView} from "codemirror"
import {javascript} from "@codemirror/lang-javascript"

I'm getting this error in console -

Alpine Expression Error: EditorView is not defined

Expression: "new EditorView({
            doc: "console.log('hello')\n",
            extensions: [basicSetup, javascript()],
            parent: document.getElementById("code-editor")
        });"

Can someone help what i'm doing wrong or whats the correct way to do it? Thank you

0 likes
0 replies

Please or to participate in this conversation.