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>&#x1d707;</mi>
                                    <mi>&#x1d708;</mi>
                                 </mrow>
                              </msub>
                              <mo form="infix">⋅</mo>
                              <msup>
                                 <mi>W</mi>
                                 <mrow>
                                    <mi>&#x1d707;</mi>
                                    <mi>&#x1d708;</mi>
                                 </mrow>
                              </msup>
                              <mo form="infix">-</mo>
                              <mfrac>
                                 <mn>1</mn>
                                 <mn>4</mn>
                              </mfrac>
                              <msub>
                                 <mi>B</mi>
                                 <mrow>
                                    <mi>&#x1d707;</mi>
                                    <mi>&#x1d708;</mi>
                                 </mrow>
                              </msub>
                              <msup>
                                 <mi>B</mi>
                                 <mrow>
                                    <mi>&#x1d707;</mi>
                                    <mi>&#x1d708;</mi>
                                 </mrow>
                              </msup>
                              <mo form="infix">-</mo>
                              <mfrac>
                                 <mn>1</mn>
                                 <mn>4</mn>
                              </mfrac>
                              <msubsup>
                                 <mi>G</mi>
                                 <mrow>
                                    <mi>&#x1d707;</mi>
                                    <mi>&#x1d708;</mi>
                                 </mrow>
                                 <mi>a</mi>
                              </msubsup>
                              <msubsup>
                                 <mi>G</mi>
                                 <mi>a</mi>
                                 <mrow>
                                    <mi>&#x1d707;</mi>
                                    <mi>&#x1d708;</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>&#x1d70c;</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>&#x1d719;</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