Quickstart

The standard editor includes everything you need to write beautiful equations: a toolbar, the equation as your readers will see it, and its LaTeX markup. You can integrate this into your website using only the following code.

<head>
  <script src="https://fxeditor.codecogs.com/fxeditor.api.min.js"></script>
  <link rel="stylesheet" href="/api/browser/proxy?url=https%3A%2F%2Ffxeditor.codecogs.com%2Ffxeditor.css"/>
  <script>
    // Your licence key, from the licence manager. Once per page, before any editor is built.
    const ready = EqEditor.init({ licence: 'fx_pk_your-key-here' });

    window.onload = async function () {
      await ready;
      const textarea = EqEditor.TextArea.link('latexInput')
        .addHistoryMenu(new EqEditor.History('history'));
      const mathview = EqEditor.MathView.link('mathview').addTextArea(textarea);

      EqEditor.Toolbar.link('toolbar')
        .addTextArea(textarea)
        .addMathView(mathview);
    }
  </script>
</head>
<body>
  <div id="equation-editor">
    <div id="history"></div>
    <div id="toolbar"></div>
    <div id="mathview"></div>
    <div id="latexInput" placeholder="Write LaTeX here..."></div>
  </div>
</body>Copy

The maths view comes first: the equation itself, drawn as live MathML and edited in place. Beneath it is the LaTeX markup of the same equation. The two stay in step, so an edit in either appears at once in the other, and the toolbar inserts into whichever one you are working in.

More

User guide — what your readers see, and every keyboard shortcut in it.

Examples — popup, inline, multiple inputs, and a toolbar that follows the cursor.

API reference — every class, method and option.

Design — choosing which toolbar panels appear, and in what order.