@recontentapp/studio
v0.3.1
Published
> A local environment to develop MJML email templates & layouts
Downloads
9
Readme
Recontent Studio
A local environment to develop MJML email templates & layouts
- Live responsive preview: Check how your template looks for different screen sizes with hot reload
- Localization: Localize content & preview templates in multiple languages
- JSON schemas: Pass variables to templates & preview them with fake data
- Reusable layouts: Share the same structure across multiple templates
- Typed email renderer: Generate a Typescript email renderer for your templates
Installation
Recontent Studio is a command-line interface (CLI) that can be installed globally or as a dev dependency of your project.
npm install -g @recontentapp/studio
npm install @recontentapp/studio --save-dev
Using the studio
A recommended folder structure for MJML templates & layouts looks like this:
- Each
.mjml
template belongs to a dedicated folder with its associated files - Reusable layouts are grouped in a separate folder
You can get started by scaffolding a default folder structure using the following command:
recontent new my-templates
.
├── layouts
│ └── default
│ ├── config.json
│ └── template.mjml
└── templates
└── webinar-announcement
├── config.json
├── content.en.json
├── content.fr.json
└── template.mjml
To launch the studio, run the following command with your folder's path.
recontent studio ./path/to/folder
Generating a typed email renderer
To generate a typed email renderer, run the following command with your folder's path & the desired output folder. An emailRenderer.ts
file will be generated in the output folder.
recontent compile ./path/to/folder --output ./src/emails
To use the email renderer, make sure to install @recontentapp/email-renderer
as a dependency of your project. This package is used to render your email templates as HTML with passed variables.
npm install @recontentapp/email-renderer
yarn add @recontentapp/email-renderer
in your application code, you can then use your typed email renderer to send emails:
import { emailRenderer } from 'src/emails/emailRenderer'
const sendEmail = async () => {
const html = emailRenderer.webinarAnnouncement({
locale: 'en',
data: {
link: 'https://example.com',
},
})
// TODO: Send email
}