Advanced Taxi Syntax

In Our Minimum Viable Language we learned about using the <editable> tag to make content editable in a Taxi Design System. In this article we will look at how you can use more advanced techniques to give you more control over how your Design System can be edited.

We will cover things like how you can make content appear in more than one place and how you can use different types of controls in the editor interface. To get started we will look back at what we've already been doing. When you put an <editable> tag into a Taxi Design System some extra Taxi Syntax is generated automatically and this code uses the techniques and tags that we will be learning in this article. Here's some code you might have entered to make an editable paragraph:

<module name="MainContent">
<editable name="ArticleText">Hello</editable>
</module>

And here is the code after it has been preprocessed by Taxi:

<module name="MainContent">
<editable name="ArticleText">
<field name="content" default="Hello"></field>
<content replace="{{content}}">Hello</content>
</editable>
</module>

Taxi has created a <field> tag | this is what causes the field to appear in the editor. The field is given a name (content) and a the default value for the field is found from the HTML inside the original editable tag.

A content tag is also created. A content tag has the special property of vanishing at export but leaving it's content behind. This content tag has a replace attribute. A replace attribute can go on any element and it tells Taxi that the content of that element needs to be replaced with something.

The value of the replace attribute is {{content}} The curly braces {{ }} tell Taxi to look at the value of a field and the name of the field in this case is 'content' which is the same as the name attribute on the field. As you would expect the value of the content field gets put into the content tag.

Remember, the field tag is all about what gets put into the content editor, whereas the content is defining what gets put into the email HTML. When the email is exported all of the Taxi tags (<content>, <field>, <module>, <editable>) and attributes get removed leaving only the intended content.

Next: Use field tags to specify exactly what type of content should be added

Back to Advanced Syntax