A Modern WYSIWYG Rich-text Editor Built on top Of Tiptap and Quasar for Vue.js


A modern WYSIWYG rich-text editor built on top of tiptap and Quasar Framework for Vue.js.

Examples & Demos


  • Extensions: tiptap official extensions, and dozens of great extensions
  • Markdown
  • Diagram and LaTex Math formula
  • I18n support (en-us, zh-hans, pl, pt-br)
  • Fully extensible for editor extensions, menubar


  • en-us default
  • zh-hans
  • pl by @qyloxe
  • pt-br by @fal-pasa



quasar-tiptap is built on top of Quasar Framework and tiptap, therefore it should be used in Quasar App and depends on several packages.

# required
yarn add tiptap
yarn add tiptap-extensions

# optional (required if diagram and latex formula enabled)
yarn add vue-codemirror
yarn add mermaid
yarn add katex


yarn add quasar-tiptap


Use mdi-v5 icon set and v-close-popup directive.

extras: [
framework: [
  directives: [


Register quasar-tiptap globally by installing plugin, or import QuasarTiptap component as needed.

Install plugin

import Vue from 'vue'
import { QuasarTiptapPlugin, RecommendedExtensions } from 'quasar-tiptap'

Vue.use(QuasarTiptapPlugin, {
  language: 'zh-hans',
  spellcheck: true

Import component

    <quasar-tiptap v-bind="options" @update="onUpdate" />

import { QuasarTiptap, RecommendedExtensions } from 'quasar-tiptap'
import 'quasar-tiptap/lib/index.css'

export default {
  data () {
    return {
      options: {
        content: 'content',
        editable: true,
        extensions: [
          // other extenstions
          // name string, or custom extension
        toolbar: [
          // other toolbar buttons
          // name string
      json: '',
      html: ''
  components: {
  methods: {
    onUpdate ({ getJSON, getHTML }) {
      this.json = getJSON()
      this.html = getHTML()
      console.log('html', this.html)
  mounted () {
    // set language dynamically

Editor Properties

Property Type Default Description
content `Object String` null
editable Boolean true When set to false the editor is read-only.
extensions Array [] A list of extensions used, by the editor. This can be String, Nodes, Marks or Plugins.
toolbar Array [] A list of toolbar button used, by the editor. This can be String, Vue components
tableToolbar Array [] A list of toolbar button used, by the table. This can be String, Vue components


Available Extensions

Extensions provided by tiptap official and quasar-tip:

export const TipTapExtensions = [

export const QuasarTipTapExtensions = [

export const RecommendedExtensions = [
extensions and toolbar in options
extension toolbar Remarks
‘Bold’ ‘bold’
‘Italic’ ‘italic’
‘Strike’ ‘strike’
‘Underline’ ‘underline’
‘Code’ ‘code’
‘CodeBlock’ ‘code_blok’
‘BulletList’ ‘bullet_list’
‘OrderedList’ ‘ordered_list’
‘TodoList’ ‘todo_list’
‘HorizontalRule’ ‘horizontal’
‘Table’ ‘table’
‘Image’ ‘photo’
‘OBlockquote’ ‘blockquote’
‘OHeading’ ‘heading’
‘OIndent’ ‘indent’, ‘outdent’
‘OAlignment’ ‘align-dropdown’, ‘align-group’
‘OLineHeight’ ‘line-height’
‘OForeColor’ ‘fore-color’
‘OBackColor’ ‘back-color’
‘OFontFamily’ ‘font-family’
‘OIframe’ ‘add-more’
‘ODiagram’ ‘add-more’
‘OKatexBlock’ ‘add-more’
‘OKatexInline’ ‘add-more’
‘OFormatClear’ ‘format_clear’

🏗 Contributing PR or ISSUE

  1. 🍴Fork it
  2. 🔀Create your branch: git checkout -b your-branch
  3. 🎨Make your changes
  4. 📝Commit your changes with Semantic Commit Messages (recommended)
  5. 🚀Push to the branch: git push origin your-branch
  6. 🎉Submit a PR to dev branch


A todo list will be shown in QuasarTiptap Project kanban.


Download Details:

Author: donotebase

Demo: https://donotebase.github.io/quasar-tiptap/

Source Code: https://github.com/donotebase/quasar-tiptap

#vue #vuejs #javascript

A Modern WYSIWYG Rich-text Editor Built on top Of Tiptap and Quasar for Vue.js
32.35 GEEK