diff --git a/resources/js/components/MarkdownEditor.vue b/resources/js/components/MarkdownEditor.vue
new file mode 100644
index 0000000..c803913
--- /dev/null
+++ b/resources/js/components/MarkdownEditor.vue
@@ -0,0 +1,35 @@
+<template>
+    <textarea v-model="markdown" cols="30" rows="10"></textarea>
+    <div ref="target" v-html="html"></div>
+</template>
+
+<script>
+import { debounce } from "../helpers";
+
+export default {
+    data() {
+        return {
+            markdown: "",
+            html: null,
+            converter: null,
+            onChange: () => {}
+        };
+    },
+    mounted() {
+        this.converter = new showdown.Converter();
+        this.onChange = debounce(() => {
+            this.onChangeHandler();
+        }, 500);
+    },
+    methods: {
+        onChangeHandler() {
+            this.html = this.converter.makeHtml(this.markdown);
+        }
+    },
+    watch: {
+        markdown() {
+            this.onChange();
+        }
+    }
+}
+</script>