Option 1 - Use the Code Editor in Spira
When you use the Code Editor option in Spira, it lets you enter text in a plain-text, fixed-width format that is easier to creating simple equations than the standard rich text editor directly:
Which will then display like this inline:
so that lets you create and line up simple formulas using text easily in Spira. It's not as good for more complicated formulas, but it has the advantage of being easily to edit and change later, and requires no additional tool beyond just Spira itself.
Option 2 - Use a Graphical Equation Editor
There are a variety of free online equation editors you can use with Spira. For example, in this article we used Mathcha (https://www.mathcha.io/editor) which lets you create complex mathematical formulas pretty easily:
Once you have created the formula, there is then a way to export these into common graphic formats such as PNG, SVG, PDF:
and you can then simply paste that right into Spira:
This is best for complex formulas where you want them to display easily in reports, look print ready and don't need them to be editable in Spira.
Option 3 - Use MathML and MathJax
The ultimate option would be to use the same formula creation tool (e.g. Mathcha) and instead of exporting the equation into a graphic, have it export into either Latex or MathML markup formats. For example, that same formula would look like:
Latex
\begin{gather*}
\begin{array}{ c c c }
! & \int ^{a}_{b} f'( x) dx=f( b) -f( a) & \underbrace{\frac{1}{4} W_{\mu \nu } \cdot W^{\mu \nu } -\frac{1}{4} B_{\mu \nu } B^{\mu \nu } -\frac{1}{4} G^{a}_{\mu \nu } G^{\mu \nu }_{a}}_{\mathrm{kinetic\ energies\ and\ self-interactions\ of\ the\ gauge\ bosons}}\\
& \Vert x+y\Vert \geq \bigl|\Vert x\Vert -\Vert y\Vert \bigr| & \nabla \cdot \mathbf{D} =\rho \ \mathrm{and} \ \nabla \cdot \mathbf{B} =0\ \\
& & \nabla \times \mathbf{E} =-\frac{\partial \mathbf{B}}{\partial t} \ \mathrm{and} \ \nabla \times \mathbf{H} =\mathbf{J} +\frac{\partial \mathbf{D}}{\partial t}\\
& y=\frac{\sum\limits _{i} w_{i} y_{i}}{\sum\limits _{i} w_{i}} \ \ ,i=1,2...k & e=\lim\limits _{n\rightarrow \infty }\left( 1+\frac{1}{n}\right)^{n}\\
& &
\end{array}\\
\dot{x}_{i} =a_{i} x_{i'} -( d+a_{i0} +a_{i1}) x_{i} +rx_{i}( f_{i} -\phi )
\end{gather*}
MathML
<?xml version="1.0" encoding="UTF-8"?>
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mtable columnwidth="100%" width="100%" columnalign="center">
<mtr>
<mtd>
<mtable columnalign="center center center">
<mtr>
<mtd>
<mi>!</mi>
</mtd>
<mtd>
<mrow>
<munderover>
<mo largeop="true" movablelimit="true">∫</mo>
<mi>b</mi>
<mi>a</mi>
</munderover>
<mi>f</mi>
<mi>'</mi>
<mo fence="true" stretchy="false">(</mo>
<mi>x</mi>
<mo fence="true" stretchy="false">)</mo>
<mi>d</mi>
<mi>x</mi>
<mo form="infix">=</mo>
<mi>f</mi>
<mo fence="true" stretchy="false">(</mo>
<mi>b</mi>
<mo fence="true" stretchy="false">)</mo>
<mo form="infix">-</mo>
<mi>f</mi>
<mo fence="true" stretchy="false">(</mo>
<mi>a</mi>
<mo fence="true" stretchy="false">)</mo>
</mrow>
</mtd>
<mtd>
<munder>
<munder>
<mrow>
<mfrac>
<mn>1</mn>
<mn>4</mn>
</mfrac>
<msub>
<mi>W</mi>
<mrow>
<mi>𝜇</mi>
<mi>𝜈</mi>
</mrow>
</msub>
<mo form="infix">⋅</mo>
<msup>
<mi>W</mi>
<mrow>
<mi>𝜇</mi>
<mi>𝜈</mi>
</mrow>
</msup>
<mo form="infix">-</mo>
<mfrac>
<mn>1</mn>
<mn>4</mn>
</mfrac>
<msub>
<mi>B</mi>
<mrow>
<mi>𝜇</mi>
<mi>𝜈</mi>
</mrow>
</msub>
<msup>
<mi>B</mi>
<mrow>
<mi>𝜇</mi>
<mi>𝜈</mi>
</mrow>
</msup>
<mo form="infix">-</mo>
<mfrac>
<mn>1</mn>
<mn>4</mn>
</mfrac>
<msubsup>
<mi>G</mi>
<mrow>
<mi>𝜇</mi>
<mi>𝜈</mi>
</mrow>
<mi>a</mi>
</msubsup>
<msubsup>
<mi>G</mi>
<mi>a</mi>
<mrow>
<mi>𝜇</mi>
<mi>𝜈</mi>
</mrow>
</msubsup>
</mrow>
<mo>⏟</mo>
</munder>
<mrow>
<mi mathvariant="normal">k</mi>
<mi mathvariant="normal">i</mi>
<mi mathvariant="normal">n</mi>
<mi mathvariant="normal">e</mi>
<mi mathvariant="normal">t</mi>
<mi mathvariant="normal">i</mi>
<mi mathvariant="normal">c</mi>
<mspace is="true" width="0.22em" />
<mi mathvariant="normal">e</mi>
<mi mathvariant="normal">n</mi>
<mi mathvariant="normal">e</mi>
<mi mathvariant="normal">r</mi>
<mi mathvariant="normal">g</mi>
<mi mathvariant="normal">i</mi>
<mi mathvariant="normal">e</mi>
<mi mathvariant="normal">s</mi>
<mspace is="true" width="0.22em" />
<mi mathvariant="normal">a</mi>
<mi mathvariant="normal">n</mi>
<mi mathvariant="normal">d</mi>
<mspace is="true" width="0.22em" />
<mi mathvariant="normal">s</mi>
<mi mathvariant="normal">e</mi>
<mi mathvariant="normal">l</mi>
<mi mathvariant="normal">f</mi>
<mo form="infix" mathvariant="normal">-</mo>
<mi mathvariant="normal">i</mi>
<mi mathvariant="normal">n</mi>
<mi mathvariant="normal">t</mi>
<mi mathvariant="normal">e</mi>
<mi mathvariant="normal">r</mi>
<mi mathvariant="normal">a</mi>
<mi mathvariant="normal">c</mi>
<mi mathvariant="normal">t</mi>
<mi mathvariant="normal">i</mi>
<mi mathvariant="normal">o</mi>
<mi mathvariant="normal">n</mi>
<mi mathvariant="normal">s</mi>
<mspace is="true" width="0.22em" />
<mi mathvariant="normal">o</mi>
<mi mathvariant="normal">f</mi>
<mspace is="true" width="0.22em" />
<mi mathvariant="normal">t</mi>
<mi mathvariant="normal">h</mi>
<mi mathvariant="normal">e</mi>
<mspace is="true" width="0.22em" />
<mi mathvariant="normal">g</mi>
<mi mathvariant="normal">a</mi>
<mi mathvariant="normal">u</mi>
<mi mathvariant="normal">g</mi>
<mi mathvariant="normal">e</mi>
<mspace is="true" width="0.22em" />
<mi mathvariant="normal">b</mi>
<mi mathvariant="normal">o</mi>
<mi mathvariant="normal">s</mi>
<mi mathvariant="normal">o</mi>
<mi mathvariant="normal">n</mi>
<mi mathvariant="normal">s</mi>
</mrow>
</munder>
</mtd>
</mtr>
<mtr>
<mtd>
<mrow />
</mtd>
<mtd>
<mrow>
<mo fence="true" stretchy="false">‖</mo>
<mi>x</mi>
<mo form="infix">+</mo>
<mi>y</mi>
<mo fence="true" stretchy="false">‖</mo>
<mo form="infix">≥</mo>
<mo maxsize="1.2em" minsize="1.2em">|</mo>
<mo fence="true" stretchy="false">‖</mo>
<mi>x</mi>
<mo fence="true" stretchy="false">‖</mo>
<mo form="infix">-</mo>
<mo fence="true" stretchy="false">‖</mo>
<mi>y</mi>
<mo fence="true" stretchy="false">‖</mo>
<mo maxsize="1.2em" minsize="1.2em">|</mo>
</mrow>
</mtd>
<mtd>
<mrow>
<mo form="prefix">∇</mo>
<mo form="infix">⋅</mo>
<mi mathvariant="bold">D</mi>
<mo form="infix">=</mo>
<mi>𝜌</mi>
<mspace is="true" width="0.22em" />
<mi mathvariant="normal">a</mi>
<mi mathvariant="normal">n</mi>
<mi mathvariant="normal">d</mi>
<mspace is="true" width="0.22em" />
<mo form="prefix">∇</mo>
<mo form="infix">⋅</mo>
<mi mathvariant="bold">B</mi>
<mo form="infix">=</mo>
<mn>0</mn>
<mspace is="true" width="0.22em" />
</mrow>
</mtd>
</mtr>
<mtr>
<mtd>
<mrow />
</mtd>
<mtd>
<mrow />
</mtd>
<mtd>
<mrow>
<mo form="prefix">∇</mo>
<mo form="infix">×</mo>
<mi mathvariant="bold">E</mi>
<mo form="infix">=</mo>
<mo form="infix">-</mo>
<mfrac>
<mrow>
<mi>∂</mi>
<mi mathvariant="bold">B</mi>
</mrow>
<mrow>
<mi>∂</mi>
<mi>t</mi>
</mrow>
</mfrac>
<mspace is="true" width="0.22em" />
<mi mathvariant="normal">a</mi>
<mi mathvariant="normal">n</mi>
<mi mathvariant="normal">d</mi>
<mspace is="true" width="0.22em" />
<mo form="prefix">∇</mo>
<mo form="infix">×</mo>
<mi mathvariant="bold">H</mi>
<mo form="infix">=</mo>
<mi mathvariant="bold">J</mi>
<mo form="infix">+</mo>
<mfrac>
<mrow>
<mi>∂</mi>
<mi mathvariant="bold">D</mi>
</mrow>
<mrow>
<mi>∂</mi>
<mi>t</mi>
</mrow>
</mfrac>
</mrow>
</mtd>
</mtr>
<mtr>
<mtd>
<mrow />
</mtd>
<mtd>
<mrow>
<mi>y</mi>
<mo form="infix">=</mo>
<mfrac>
<mrow>
<munderover>
<mo largeop="true" movablelimit="true">∑</mo>
<mi>i</mi>
<mrow />
</munderover>
<msub>
<mi>w</mi>
<mi>i</mi>
</msub>
<msub>
<mi>y</mi>
<mi>i</mi>
</msub>
</mrow>
<mrow>
<munderover>
<mo largeop="true" movablelimit="true">∑</mo>
<mi>i</mi>
<mrow />
</munderover>
<msub>
<mi>w</mi>
<mi>i</mi>
</msub>
</mrow>
</mfrac>
<mspace is="true" width="0.44em" />
<mo separator="true">,</mo>
<mi>i</mi>
<mo form="infix">=</mo>
<mn>1</mn>
<mo separator="true">,</mo>
<mn>2.</mn>
<mo separator="true">.</mo>
<mo separator="true">.</mo>
<mi>k</mi>
</mrow>
</mtd>
<mtd>
<mrow>
<mi>e</mi>
<mo form="infix">=</mo>
<munderover>
<mo movablelimit="true">lim</mo>
<mrow>
<mi>n</mi>
<mo>→</mo>
<mi>∞</mi>
</mrow>
<mrow />
</munderover>
<mo fence="true">(</mo>
<mn>1</mn>
<mo form="infix">+</mo>
<mfrac>
<mn>1</mn>
<mi>n</mi>
</mfrac>
<msup>
<mo fence="true">)</mo>
<mi>n</mi>
</msup>
</mrow>
</mtd>
</mtr>
<mtr>
<mtd>
<mrow />
</mtd>
<mtd>
<mrow />
</mtd>
<mtd>
<mrow />
</mtd>
</mtr>
</mtable>
</mtd>
</mtr>
<mtr>
<mtd>
<mrow>
<msub>
<mover accent="true">
<mi>x</mi>
<mo>.</mo>
</mover>
<mi>i</mi>
</msub>
<mo form="infix">=</mo>
<msub>
<mi>a</mi>
<mi>i</mi>
</msub>
<msub>
<mi>x</mi>
<mrow>
<mi>i</mi>
<mi>'</mi>
</mrow>
</msub>
<mo form="infix">-</mo>
<mo fence="true" stretchy="false">(</mo>
<mi>d</mi>
<mo form="infix">+</mo>
<msub>
<mi>a</mi>
<mrow>
<mi>i</mi>
<mn>0</mn>
</mrow>
</msub>
<mo form="infix">+</mo>
<msub>
<mi>a</mi>
<mrow>
<mi>i</mi>
<mn>1</mn>
</mrow>
</msub>
<mo fence="true" stretchy="false">)</mo>
<msub>
<mi>x</mi>
<mi>i</mi>
</msub>
<mo form="infix">+</mo>
<mi>r</mi>
<msub>
<mi>x</mi>
<mi>i</mi>
</msub>
<mo fence="true" stretchy="false">(</mo>
<msub>
<mi>f</mi>
<mi>i</mi>
</msub>
<mo form="infix">-</mo>
<mi>𝜙</mi>
<mo fence="true" stretchy="false">)</mo>
</mrow>
</mtd>
</mtr>
</mtable>
</math>
You can then save these files into Spira in the normal Documents repository and link them to your requirements.
Finally, they can then be dynamically rendered as SVG inside Spira using a JavaScript library such as MathJax:
http://docs.mathjax.org/en/latest/basic/mathematics.html