# Getting Started
Let's add an editable mathfield to a web page.
**1. Load the Mathfield library from a CDN with a `
```
Alternatively, you can use the **unpkg** CDN to load the module:
```html
```
**2. Add a `` tag.** The content of this tag is the initial value
of the mathfield, as a LaTeX expression.
```html
f(x) = \sin(x+\pi)
```
:::info[Note]
LaTeX is a plain text markup
language for structured documents. Most LaTeX commands start with a `\`, for
example `\sqrt`, `\frac` and `\sin`.
Read more about the
LaTeX commands available in a mathfield
:::
## Try it Out
**In the code playground below, change the content inside the `` tag.**
For example change it to `f(x) = \frac{x}{2}`.
:::info[Note]
The code playground here and in the rest of the documentation are live: when you modify the HTML or JavaScript code the output will update to reflect your changes.
Press **Reset** to bring back the playground to its original state.
:::
```live show-line-numbers mark-html-line=2
:::html
x=\frac{-b\pm \sqrt{b^2-4ac}}{2a}
```
## Vanilla HTML Example
Here's a complete web page using a `` in vanilla HTML:
```html
untitled
x=\frac{-b\pm \sqrt{b^2-4ac}}{2a}
```
## React Example
**To use mathfields in a React project**, use a `` tag with JSX:
```js
import "https://esm.run/mathlive";
import { useState } from "react";
export View = () => {
const [value, setValue] = useState("f(x) = \\frac{x}{2}");
return (
setValue(evt.target.value)}
> {value}
Value: {value}
);
}
```
Read more about using mathfields with **React**
Read more about using mathfields with **Svelte**
## Caution
:::warning[Caution: HTML quirks mode]
The **HTML quirks mode** is not supported.
The host page must use the **strict mode** by including a ``
directive at the top of the page.
Without it, the layout of the expression inside the mathfield may be incorrect.
:::
:::warning[Caution: `file://` protocol]
For security reasons there are some restrictions when using the `file://`
protocol. This happens if you open a file in the browser from your local file
storage. You will notice the adress in the browser address bar starts with `file://`.
In this situation, some functionality may not be available and some errors may
be displayed in the console.
To prevent this, use a **local file server**.
With VSCode, the **Live Server** extension can be used to launch a local
development server with one click.
:::
:::warning[Caution: CSP (Content Security Policy)]
In order to interactively display mathfields, some CSS styles are generated dynamically. If you are using a **Content Security Policy (CSP)**, you may need to adjust it to allow the use of inline styles.
Specifically, you may need to add `'unsafe-inline'` to the `style-src` directive in your CSP.
```html
```
:::
Learn more about other options to add mathfields to your project