Writing an equation

The two views

The equation is the large view. Click anywhere in it and type: what you write appears as mathematics, not as source. This is the one to use if you do not know LaTeX.

The markup is the line beneath it — the LaTeX the equation is written from. Use it if you already know LaTeX, or to fix something faster than clicking.

They are the same equation. Edit either and the other follows immediately; there is no convert step and nothing to keep in sync. If the markup line is not showing, the host site has switched it off.

Typing

Start typing a command and a list of matches appears. ↑ and ↓ move through it, Enter or Tab accepts, Esc dismisses it. You can ignore the list entirely and keep typing.

Inserting something like \frac{}{} leaves empty boxes behind. Tab jumps to the next one and Shift+Tab to the previous, the way a form moves between fields — the fastest way to fill in a fraction, an integral or a matrix. It goes round rather than stopping at the last box, so the other half of a fraction is always one Tab away.

Once every box is filled Tab moves by word instead, stopping at the start of each word, number and command and stepping over the brackets, operators and spacing between them. At the end of a finished equation it does what Tab does everywhere else and moves focus out of the editor.

Ctrl/Cmd with ← or → travels by structure rather than by word: into a group, to the end of it, into the next one. On \frac{abc}{12} that is the start and the end of the numerator, then the start and the end of the denominator, and finally the end of the equation. In a matrix it is the start and the end of each cell, whether or not the cell has anything in it.

Both keys work the same way in the equation and in the markup, and on the same equation they visit the same positions in the same order.

Matrices

The toolbar's matrix panel asks for a size and inserts an empty grid. From there Tab treats the cells as the boxes to fill: it visits all four of a 2×2 in reading order, so the whole thing can be typed without reaching for the mouse, and once some are filled it offers only the ones still empty. Ctrl/Cmd with ← or → moves between cells whether they are empty or not. \begin{matrix} and \end{matrix} are stepped over — the name of the environment is a declaration rather than something you edit.

The grid stays rectangular

This applies while you are working in the equation itself. The markup pane leaves you alone entirely — see below.

Adding a cell divider — & — opens that column in every row, not just the one you are in, and starting a new row with \\ fills that row out to the same width as the others. So a row or a column can be added in the middle of a matrix without the rest of it sliding out of line.

Taking one away works the same way round, as far as it can. Delete a & and the column goes from every row — provided it is empty in all of them. Delete a \\ and the row goes — provided the row it would swallow is empty. Where it is not, the divider comes back instead: the alternative is the editor quietly throwing away something you typed. Empty those cells first and it will go.

The correction and the keystroke that caused it are a single step, so one Ctrl/Cmd+Z takes back both. And nothing is rewritten while you are simply typing into a cell — only a divider going in or out changes the shape, so your own layout of the markup is left as you wrote it.

Adding and removing rows and columns

Right-click inside a matrix and the menu offers Insert row above, Insert row below, Insert column left, Insert column right, Delete row and Delete column, each acting on the cell you clicked in. These are the only way to reach those commands — there is no keystroke for "insert a column to the left of this one", and the toolbar cannot offer it because it does not know where your cursor is when you press it. See the right-click menu.

Unlike the tidying above, these are commands and they do as they are told: Delete row deletes the row whether or not you have typed in it. Being asked for something and getting half of it is worse than either answer. One Ctrl/Cmd+Z puts it back.

The markup pane does none of this

Writing in the markup is writing LaTeX, and there you can do as you please: leave a row short, put an & somewhere that makes no sense yet, delete a \\ and run two rows together. Nothing is added, nothing is refused, and a matrix left ragged stays ragged — including if you go back to the equation and carry on typing in it. Only a divider going in or out there will square it up again.

This covers matrix and its relatives — pmatrix, bmatrix, vmatrix, smallmatrix — and array. It deliberately leaves align and cases alone, where rows of different lengths are perfectly normal.

The toolbar

Each button opens a panel of symbols — Greek letters, operators, arrows, matrices and so on. Click one to insert it at the cursor.

It is entirely usable from the keyboard. Hold Alt and a letter appears on every panel; Alt plus that letter opens it. Some letters carry more than one panel — press the same letter again to cycle through them. With a panel open, Tab moves to the next panel and Esc closes it.

The right-click menu

Right-clicking in either the equation or the markup opens a menu with Cut, Copy, Paste, Undo and Redo on it. Cut and Copy are greyed unless something is selected, and Redo unless there is something to redo. Right-clicking inside a selection keeps it, so the menu acts on what you had already highlighted; right-clicking anywhere else moves the cursor there first.

Inside a matrix the menu grows a second half, with the six row and column commands. Each carries a small picture of a grid: the row or column shown in green is the one you are about to get, the one in red is the one about to go. Insert column left and Insert column right differ by a single word, and the picture saves you reading them twice.

Help is always the last entry, whether or not the matrix commands are there, and opens this guide in a new tab.

The menu works from the keyboard once open: ↑ and ↓ move through it, Enter runs the highlighted command, Esc closes it and puts the cursor back where it was.

Two things worth knowing. Hold Shift while right-clicking to get your browser's own menu instead, for spelling, translation and anything else it offers. And Paste asks your browser for permission to read the clipboard, which it may refuse or remember from an earlier answer — if nothing appears, Ctrl/Cmd+V always works, because that route hands the text over without anyone having to be asked.

Every shortcut

Equations you have written before

The clock at the top left keeps your recent equations. Open it and click one to bring it back. They are kept in your own browser — nothing is sent anywhere, and clearing your browser data clears them.

Taking the equation away

What the editor gives you back depends on the site it is embedded in. Where you see buttons beside the equation:

LaTeX copies the source — the shortest form, and the one to keep if you may want to edit it later.

MathML copies the mathematics itself, with the spoken text that lets a screen reader read it properly. Longer, but it needs nothing to display it.

PNG copies a picture to the clipboard, ready to paste into a document or a chat.

SVG downloads a vector file, which stays sharp at any size.

Equations people can hear

Every equation carries generated spoken text alongside its markup, so a screen reader says “the fraction x plus one over y minus one, end fraction” rather than spelling out the source character by character. It is on by default and there is nothing to switch on.

The accessibility test bench shows exactly what is read aloud for a range of equations, and compares the four ways it can be attached.

More

Putting the editor on your own site — the two lines that embed it.

The editor API — every option, for developers.

CKEditor and TinyMCE plugins.

Support — if something here does not work the way this page says it does.