index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown Editor</title>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/1.11/simplemde.min.css">
    <script src="https://cdn.jsdelivr.net/simplemde/1.11/simplemde.min.js"></script>
</head>
<body>
    <div
    x-data="{
        value: '',
        init() {
            let editor = new SimpleMDE({ element: this.$refs.editor })
 
            editor.value(this.value)
 
            editor.codemirror.on('change', () => {
                this.value = editor.value()
            })
        },
    }"
    class="prose mx-auto"
>
    <textarea x-ref="editor"></textarea>
</div>
</body>
</html>