Ditch Google Docs: This Vue 3 + Tiptap Editor Will Change How You Write Online!

For years, we’ve been stuck in a writing loop — Google Docs, Microsoft Word, Notion, rinse, repeat. If you’re a developer, you’ve probably sighed at the clunky formatting issues. If you’re a tech enthusiast, you’ve wondered why web-based document editors still feel like they’re running on the same engine from a decade ago.

Well, what if I told you there’s a new kid on the block? A sleek, modern, and developer-friendly document editor powered by Vue 3 and Tiptap that’s here to shake things up.

Yes, you heard that right. We’re talking about an editor that ditches the unnecessary fluff and gives you full control over how you write, format, and structure your content — whether you’re a blogger, a developer building the next big app, or just someone who loves a good writing experience.

Forget dealing with bloated toolbars or clunky UI. This editor is snappy, lightweight, and highly customizable, making it perfect for those who want a seamless writing experience without being boxed into someone else’s idea of what a document editor should be.

So, what makes this Vue 3 + Tiptap-powered editor so special? Buckle up, because we’re about to dive into a writing tool that might just make you rethink everything you know about online document editing. 🚀

🥁🥁🥁 Drumroll, please… 🥁🥁🥁

Introducing Umo Editor — the Vue 3 + Tiptap-powered document editor that might just make you forget Google Docs exists! 🚀

In the world of online writing tools, most editors fall into two categories: either too basic to be useful or too bloated to be enjoyable. Umo Editor strikes the perfect balance — it’s lightweight, powerful, and packed with features that make document editing not just easy, but actually fun.

So, What’s the Hype About?

Umo Editor is an open-source document editor built on Vue 3 and Tiptap, designed to give users a seamless and modern writing experience. It offers everything from pagination (like Microsoft Word) to Markdown support, ensuring that whether you’re writing a blog post, technical documentation, or a business proposal, you have the tools you need at your fingertips.

And the best part? It works right out of the box — no crazy configurations, no endless tweaking. Just open it and start writing. ✍️

Features That Make It Stand Out

✅ Zero-config, out-of-the-box usability — No setup headaches, just instant productivity.
✅ Pagination mode — Like Microsoft Word, but inside your browser!
✅ Lightweight & fast — No sluggish performance, just smooth editing.
✅ WYSIWYG editing — What you see is actually what you get.
✅ Rich-text & Markdown support — Whether you prefer clicking buttons or typing in raw Markdown, Umo has you covered.
✅ AI assistant — Need writing help? Let AI jump in!
✅ Custom plugins & extensions — Tailor the editor to your needs.
✅ Dark mode & theme customization — Because aesthetics matter.
✅ Presentation mode, document sharing, and export options — Collaborate and distribute with ease.
✅ Shortcut keys & multi-language support — Built for efficiency and accessibility.

🚀 Try It Out

Curious to see Umo Editor in action? Here’s how you can try it right now:

🔗 Live Demo: Umo Editor Playground (Check out the editor in your browser!)
🔗 Forked GitHub Repo: Umo Editor on GitHub (English repo: we at januscaler use this because official one sets default locale as chinese so we made some modification to use only english as default)
🔗 GitHub Repo: Umo Editor on GitHub (chinese repo: official one)

Vue App Integration

To integrate UMO Editor into your Nuxt or Vue project, follow these steps:

Step 1: Configure the Plugin

Create a file named umoeditor.client.ts in the plugins directory and add the following code:

import { useUmoEditor, UmoEditorOptions } from '@januscaler/umoeditor' 
export default defineNuxtPlugin((app) => { 
    const options = {} 
    app.vueApp.use(useUmoEditor, options as unknown as UmoEditorOptions); 
});

Step 2: Use the Editor in a Component

Now, create a component named msWord.vue and insert the following code:

<template> 
  <div class="box"> 
    <umo-editor @created="onEditorCreated" ref="editorRef" v-bind="options" /> 
  </div> 
</template> 
 
<script setup lang="ts"> 
const options = ref({}) 
const editorRef = ref() 
 
function onEditorCreated(editor: any) { 
  options.value = { 
    toolbar: { 
      enableSourceEditor: true, 
    }, 
    page: { 
      showBreakMarks: false 
    }, 
    document: { 
      content: localStorage.getItem('document.content') ?? '<p>测试文档</p>', 
    }, 
    cdnUrl: 'https://cdn.umodoc.com', 
    shareUrl: 'https://umodoc.com', 
    file: { 
      allowedMimeTypes: [ 
        'application/pdf', 
        'image/svg+xml', 
        'video/mp4', 
        'audio/*', 
      ], 
    }, 
    assistant: { 
      enabled: true, 
    }, 
    user: { 
      userId: 'umoeditor', 
      nickName: 'Umo Editor', 
      avatarUrl: 'https://tdesign.gtimg.com/site/avatar.jpg', 
    }, 
    async onSave(content: string, page: number, document: { content: string }) { 
      localStorage.setItem('document.content', document.content) 
      return new Promise((resolve, reject) => { 
        setTimeout(() => { 
          if (true) { 
            console.log('onSave', { content, page, document }) 
            resolve('Save successful') 
          } else { 
            reject(new Error('Save failed')) 
          } 
        }, 2000) 
      }) 
    }, 
    async onFileUpload(file: File & { url?: string }) { 
      if (!file) throw new Error('No file found for upload') 
 
      console.log('Uploading file:', file) 
      await new Promise((resolve) => setTimeout(resolve, 3000)) 
 
      return { 
        id: 7, 
        url: file.url ?? URL.createObjectURL(file), 
        name: file.name, 
        type: file.type, 
        size: file.size, 
      } 
    }, 
    async onAssistant() { 
      return await Promise.resolve('<p>AI Assistant Test</p>') 
    }, 
    async onCustomImportWordMethod() { 
      return await Promise.resolve({ value: '<p>Test Word Import</p>' }) 
    }, 
  } 
} 
</script> 
 
<style> 
.box { 
  margin: 20px; 
  height: calc(100vh - 40px); 
  border: 1px solid #ddd; 
  box-sizing: border-box; 
  position: relative; 
} 
</style>

🎉 Conclusion

And there you have it — Umo Editor is not just another document editor, it’s a game-changer for anyone who values seamless, modern, and powerful tools for writing online. Whether you’re a developer looking for full control or a writer in need of a distraction-free space, Umo Editor delivers the best of both worlds. With its incredible flexibility, rich-text and Markdown support, and AI-powered features, it’s designed to make your writing process smooth and efficient.

Ready to make the switch? Give Umo Editor a try and ditch the outdated editors once and for all!

If you found this article helpful or exciting, don’t forget to clap to show your support! 🙌 And for more tips, tricks, and cool web tools, hit that follow button. Stay tuned for more tech insights and fun discoveries! 🚀