2.3.0 • Public • Published

    MathQuill 4 Quill

    Build Status Version Code Style: prettier License

    What's this?

    This module adds support for rich math authoring to the Quill editor.

    Basic demo of mathquill4quill

    Live demo

    Usage example

    Plain Javascript

    This module depends on MathQuill, Quill and KaTeX, so you'll need to add references to their JS and CSS files in addition to adding a reference to mathquill4quill.js and mathquill4quill.css. Official builds as well as minified assets can be found on the releases page.

    Next, initialize your Quill object and load the formula module:

    // setup quill with formula support
    var quill = new Quill('#editor', {
      modules: {
        formula: true,
        toolbar: [['formula']]
      theme: 'snow'

    Last step: replace Quill's native formula authoring with MathQuill.

    // enable mathquill formula editor
    var enableMathQuillFormulaAuthoring = mathquill4quill();

    A working demo application can be found here (live).


    A demo application integrating this module with react-quill can be found here (live).

    Optional features

    Custom operator buttons

    You can also add in operator buttons (buttons that allow users not familiar with latex to add in operators/functions like square roots) to the editor by passing the operators option to the enableMathQuillFormulaAuthoring() function. Example:

    enableMathQuillFormulaAuthoring(quill, {
      operators: [["\\sqrt[n]{x}", "\\nthroot"], ["\\frac{x}{y}","\\frac"]]

    The operators variable is an array of arrays. The outside array contains all of the different arrays which describe the operator buttons. The arrays inside of the main array consist of two values. The first value is the latex that gets rendered as the value on the button, and the second value is the latex that gets inserted into the MathQuill editor.

    Demo of mathquill4quill with custom operator buttons

    List of previous formulas

    Previous formulas can be saved and re-used. The available related configurations are:

    enableMathQuillFormulaAuthoring(quill, {
      displayHistory: true, // defaults to false
      historyCacheKey: '__my_app_math_history_cachekey_', // optional
      historySize: 20 // optional (defaults to 10)

    This works by saving formula to a list (and local storage by default) everytime a new formula is used. Then displaying this list when a user opens the formula tooltip.

    Demo of mathquill4quill with formula history


    For user convenience, mathquill4quill defaults to focusing the math input field when the formula button is pressed. You can disable this behavior via the autofocus option in the enableMathQuillFormulaAuthoring() function. Example:

    enableMathQuillFormulaAuthoring(quill, {
      autofocus: false

    Development setup

    First, install the development dependencies:

    npm install

    You can now start the development server using npm start, verify code style compliance with npm run lint and run the tests with npm test.




    npm i mathquill4quill

    DownloadsWeekly Downloads






    Unpacked Size

    35.5 kB

    Total Files


    Last publish


    • c-w
    • boomanaiden154