Design
Choose which parts of the editor to show: the toolbar, LaTeX markup, equation view, undo history and live suggestions. You can also customise the toolbar panels, rows, button sizes and colours. Use the builder below to preview your editor and generate its code, or read on to configure the toolbar yourself.
Try it: Build your own
Choose the components to show, drag panels from More panels into up to three toolbar rows, and adjust the colour and sizes. Select an output format to preview the rendered equation. Try your configuration in the live editor, then copy the generated code below.
More panels 0
School levels
The code
Toolbar Selection
Use a preset to select a common set of toolbar panels, such as the mini toolbar:
<div id="toolbar"></div>
<div id="input"></div>
<script>
var tb = new EqEditor.Toolbar('toolbar','mini');
tb.addLaTeXView(new EqEditor.LaTeXView('input'), true);
</script>
Alternatively, provide an array of panel names. Each nested array defines one toolbar row:
<div id="toolbar"></div>
<div id="input"></div>
<script>
var tb = new EqEditor.Toolbar('toolbar', [["operators_core","greeklower","chemfig",
"mhchem","mhchem_arrows","colors"]]);
...
</script>
Toolbar Collections
The following presets are available:
| Name | Panels on each row |
|---|---|
| "full" | style | spaces | binary | symbols | foreign | subsupset | accents | accents_ext | arrows |
| operators | brackets | greeklower | greekupper | relations | matrix | colors | |
| "mini" | operators_core | brackets | greeklower | arrows | matrix | colors |
| "chemistry" | operators | brackets | symbols | arrows | matrix | colors |
| mhchem | mhchem_arrows | chemfig | chemfig_ext |
Toolbar Panels
The available standard panels include:
| Panel Name | Description |
|---|---|
| "brackets" | Brackets and groups |
| "matrix" | Matrices and vectors |
| "binary" | Binary operators and symbols |
| "subsupset" | Superscripts and subscripts |
| "relations" | Set relations |
| "arrows" | Arrows |
| "style" | Styling |
| "foreign" | Non-ASCII letters |
| "symbols" | Symbols |
| "spaces" | Spacing between letters |
| "accents" | Common letter accents |
| "accents_ext" | Extended set of letter accents |
| "greeklower" | Lowercase Greek letters |
| "greekupper" | Uppercase Greek letters |
| "operators" | Full set of supported operators, including \sum and \prod |
| "operators_core" | Most commonly used operators, such as \sum |
| "geometry" | Geometry symbols |
| "colors" | Foreground colours |
| "mhchem" | Chemical formulae, with the mhchem package |
| "mhchem_arrows" | Reaction arrows, with the mhchem package |
| "chemfig" | Structural formulae, with the chemfig package |
| "chemfig_ext" | Charges, names and reaction schemes, with the chemfig package |
| "picture" | Shapes and solids to label, and the picture editor |
| "editors" | Advanced editors: just the picture editor and the Chemistry Structure Editor |
School levels
Each of these holds the operators, brackets and matrices used at one level of teaching - the levels are those of fxQuiz, and University.
| Panel Name | Description |
|---|---|
| "primary" | Powers, fractions, roots, long division and brackets |
| "lower_secondary" | Primary, with subscripts, braces and absolute values |
| "secondary" | Adds aligned working and cases, for solving and rearranging |
| "upper_secondary" | Calculus - derivatives, integrals, limits and sums - and simple matrices |
| "university" | Partial derivatives, contour and double integrals, norms and matrices |
These are the standard panels. To request another panel, send us the LaTeX commands you would like it to include.
More
API reference — the methods that build a toolbar panel by panel.
Examples — worked examples of each arrangement.
Contact us — to have a panel added to the base set.