Menu

The Taxi Editor

To understand Taxi Syntax we first need to understand the editor interface. The editable fields appear on the right hand side of the editor screen, next to the live preview:


The editor interface is divided into Modules which are subdivided into editables, and editables are divided into fields.

Modules

Modules organise related content together to make it easier for the user editing the content. Modules can contain as many or as few editables as you like.

Editables

An editable groups together fields which relate to a single visual element of the email, an image, a CTA button, a headline, etc. All of the editables in an Email Design System must be grouped into modules.

All modules and editables must be given a name. This is to help Taxi map content back to the right place when HTML is updated after content has been entered.

Our Minimum Viable Language

To make part of your Design System editable you can get started by adding two HTML tags to your code: 

<module name="module1">
 <span style="color:red;">
  <editable name="headline">
   this is the headline text
  </editable>
 </span>
</module>

Our Minimum Recommended Language

We'll look at naming structure a bit later, but adding a label attribute helps a lot. We recommend using it on all modules and editables. 

<module name="module1" label="Module with a headline">
 <span style="color:red;">
  <editable name="headline" label="Headline">
   this is the headline text
  </editable>
 </span>
</module>

The <editable> tag

Wrap an <editable> tag around the content you wish to make editable. The editable tag should be around the content but should not include any formatting. Taxi recognises standard HTML tags and adds fields in the editor as necessary | you can wrap editable tags around text, links or images (or linked images if you're fancy).

  • Editable tags should not be nested within one another.
  • It's important to close the </editable> tag in a semantic way.

Around text

If you wrap an editable tag around text, that text becomes editable: 

<td style="font-size:18px; font-family:Helvetica, Arial, sans-serif; color:#111111">
 <editable name="headline" label="Main headline">
  Headline text
 </editable>
</td>

Taxi will provide a text area for the editor to update the content.

Around links

A link is made editable by wrapping an <editable> tag around an <a> tag. 

<editable name="cta" label="CTA Button">
 <a href="http://www.taxiforemail.com">Find out more</a>
</editable>

Taxi will provide fields for the href and link text.

Around images

An image is made editable by wrapping <editable> around an <img> tag. 

<editable name="heroimage" label="Hero Image">
 <img src="http://placekitten.com/200/300" height="200" width="300" alt="kittens!" style="display:block">
</editable>

Taxi will provide fields for the image source, height, width and alt text. The editor will be able to upload images, or provide a url for the image location (image uploads may not be turned on for your organisation, but this doesn't affect how we code the Design System).

Around linked images

If you wrap an editable tag around an <a> tag that contains (only) an <img>, then Taxi will provide both the link and image fields, plus a button to remove the link if required.

Around anything else

If you wrap an editable tag around code that Taxi doesn't understand, or multiples of the above (eg. Text and an image) then Taxi will make all of that code editable in a paragraph field.

Names, labels and hints

<editable name="headline" label="Main Headline" hint="Please ensure you use sentence case only"></editable>

name=
required
Every editable tag must have a name= attribute. This helps Taxi when saving and retrieving content, and maps the content in the Taxi database to a space in the Design System.

  • If you change the name attribute, Taxi may not be able to map any existing content back to this editable tag.
  • All editables within a given module must have unique name attributes.
  • Name attributes are case sensitive and must only include letters, numbers, hyphens and underscores.

label=
optional, recommended
We recommend also including a label= attribute. This provides a user friendly name for the editable tag, that is shown in the editor.

  • If there is no label attribute included in your code, Taxi will use the name attribute.
  • You can include spaces and other characters in a label attribute.

hint=
optional
If you need, you can add additional help text for editors and marketers using the hint= attribute.

  • You can include spaces and other characters in a label attribute.
  • Try to keep hints short, to avoid adding clutter to the interface.

The <module> tag

All editable tags must be contained within a module tag. Module tags are used to group together editables in a way that makes sense for an editor, for example all of the navigation elements, or a block with an image, a headline and a CTA button.

  • <module> is an html tag and it has to be used semantically | otherwise Taxi wouldn't know if an editable was inside it or not.
  • You can wrap a <module> tag around any html you like and not all of the html needs to be inside module tags.
  • A module tag must not go inside another module tag.
  • You can include multiple editable tags within a module tag.
  • Modules also have name="", label="" and hint="" as attributes.
  • Spoiler alert! You can let editors manipulate how modules are displayed using Modulezones.

Get Started

That's it | you're ready to get started building a Design System. If you head to the Email Design System section of your Taxi account, you can download some existing HTML and see this code in action, or you can add Taxi Syntax to your own HTML build and upload it into Taxi.

Next: Control how Modules are displayed using Modulezones

← Back to /Code