Awesome Open Source
Awesome Open Source


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

Codacy Badge Build Status semantic-release Join the chat at discord

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 The editor content
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.



The MIT License (MIT). Please see License File for more information.

Alternatives To Quasar Tiptap
Select To Compare

Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,155,559
Vue (72,905
Editor (31,786
Toolbar (2,673
Text Editor (2,448
Wysiwyg (1,549
Wysiwyg Editor (501
Rich Text (490
Quasar Framework (313
Quasar (206
Tiptap (48