> For the complete documentation index, see [llms.txt](https://editor-docs.ravenapp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://editor-docs.ravenapp.dev/get-started/installation-and-usage.md).

# Installation and Usage

This page will help you install and run the email editor.

**Install the NPM package**

The first step to add the email editor to your web app is to install the raven-react-email-editor from NPM and include it in your react build process. It is a react.js wrapper around email editor. 

{% hint style="success" %}
npm i raven-react-email-editor
{% endhint %}

**Import the EmailEditor component and render it with JSX**

```
import React, { useState, useCallback, useRef } from "react";
import EmailEditor from "raven-react-email-editor";

const myStyle = {
  div: {
    height: "100vh",
  },
  nav: {
    height: "8%",
    borderBottom: "1px solid #a39f9f",
  },
  button: {
    float: "right",
    margin: "10px 20px 10px 10px",
    padding: "10px 40px",
    color: "white",
    border: "1px solid rgba(88, 80, 236, 0.5)",
    fontSize: "0.875rem",
    backgroundColor: "#5850EC",
    borderRadius: "4px",
    cursor: "pointer",
  },
  editor: {
    height: "91.9%",
  },
};

function App() {
  const [savedState, setSavedState] = useState({ state: "", html: "" });
  const [isLoaded, setIsLoaded] = useState(false);
  const editorRef = useRef(null);
  const onLoad = () => {
    setIsLoaded(true);
  };

  const onFetched = useCallback((state, html) => {
    setSavedState((prevState) => ({
      ...prevState,
      state: state,
      html: html,
    }));
    setIsLoaded(true);
  }, []);

  const onEditorSave = useCallback(() => {
    if (isLoaded) {
      setIsLoaded(false);
      editorRef.current.fetchState();
    }
  }, [isLoaded]);

  return (
    <div style={myStyle.div}>
      <nav style={myStyle.nav}>
        <button onClick={onEditorSave} style={myStyle.button}>
          SAVE
        </button>
      </nav>
      <div style={myStyle.editor}>
        <EmailEditor
          state={savedState.state}
          onEditorLoad={onLoad}
          onFetched={onFetched}
          ref={editorRef}
          //editorHostUrl={add your email editor's url}
        />
      </div>
    </div>
  );
}

export default App;
```

**Properties**

<table><thead><tr><th width="150">Props</th><th>Description</th></tr></thead><tbody><tr><td>state</td><td>describes the editor's state. pass a state you saved earlier to load an already designed email. pass empty to load an empty editor.</td></tr><tr><td>onEditorLoad</td><td>callback when editor has loaded completely. Params - empty</td></tr><tr><td>onFetched</td><td>callback that gives the state of editor and html of the email. Params - state, html</td></tr><tr><td>editorHostUrl</td><td>defines the URL of the editor to be used. If you want to use your own email editor, just pass that URL to editorHostUrl.</td></tr></tbody></table>