Язык разметки TJML Framework построен на базе Vue, поэтому каждый тег TJML является Vue-компонентом. Для начала работы с TJML необходимо подключить нашу JavaScript-библиотеку, а когда письмо будет готово — экспортировать полученный HTML-код.
| IDE | Description |
| JetBrains IDEs (WebStorm, PhpStorm) |
Web-types в WebStorm или PhpStorm помогут активировать подсказки и функцию автозавершения TJML-тегов и атрибутов. Также можно воспользоваться starter pack для быстрого погружения. |
| Visual Studio Code | Установите плагин из Маркетплейса или с github |
Вставьте следующий JavaScript-код сразу после тега <body> :
<script type="text/javascript">
var s=document.createElement("script"),l=document.createElement("link"),d=new Date;s.setAttribute("src","https://app.pixcraft.io/tjml/app.js?ver="+d.getTime()),l.setAttribute("type","text/css"),l.setAttribute("rel","stylesheet"),l.setAttribute("href","https://app.pixcraft.io/tjml/app.css?ver="+d.getTime()),document.head.appendChild(l),document.body.appendChild(s);
</script>Следует придерживаться следующей структуры:
<tjml>
<m-body>
<!-- some TJML code -->
</m-body>
</tjml>Между <m-body> и </m-body> можно вставить любой TJML или HTML код, однако помните, что не любой HTML-код будет корректно работать в AMP-версии письма.
Детальную информацию о тегах (компонентах) и атрибутах можно найти в этой документации.