---
title: Quick Start
description: Get the Templatical email editor running in under 5 minutes.
---
# Quick Start
## 1. Install packages
::: code-group
```bash [npm]
npm install @templatical/editor @templatical/renderer
```
```bash [pnpm]
pnpm add @templatical/editor @templatical/renderer
```
```bash [yarn]
yarn add @templatical/editor @templatical/renderer
```
```bash [bun]
bun add @templatical/editor @templatical/renderer
```
:::
## 2. Mount the editor
```html
Templatical Editor
```
Your backend receives both the JSON (store it to let users edit later) and the MJML. `toMjml()` does not produce HTML.
## 3. Compile MJML to HTML
On the server, compile the MJML you just posted with any [MJML library](https://mjml.io) — Node, PHP, Python, Ruby, and others. [How Rendering Works](/getting-started/how-rendering-works) lists them. The Node package is `mjml`:
::: code-group
```bash [npm]
npm install mjml
```
```bash [pnpm]
pnpm add mjml
```
```bash [yarn]
yarn add mjml
```
```bash [bun]
bun add mjml
```
:::
```ts
import mjml2html from "mjml";
const { html } = mjml2html(mjml);
// html is ready to send
```
From a saved JSON file, without mounting the editor (also needs `mjml`):
::: code-group
```bash [npm]
npx -y @templatical/template-tools render template.json --format html -o email.html
```
```bash [pnpm]
pnpm dlx @templatical/template-tools render template.json --format html -o email.html
```
```bash [yarn]
yarn dlx @templatical/template-tools render template.json --format html -o email.html
```
```bash [bun]
bunx @templatical/template-tools render template.json --format html -o email.html
```
:::
See [Template Tools](/api/template-tools).
::: info Shadow DOM by default
The editor mounts inside a Shadow DOM, so host page CSS cannot cascade into editor elements. Use a `
` — or any [shadow-host-eligible element](/api/editor#container-element-requirements) — as the container; elements like `