Meta Attributes

In this article we look at what are meta attributes, how to use them & some common use cases.

What are Meta Attributes?

Meta attributes allow you to tag elements in your HTML code with information that Dittofi can use to convert static HTML & CSS code into a high performance React web app. There are currently three main meta attributes: partial-id, actions & variables.

Let’s take a look at how each of these attributes work & what is the use case for your app development.

The partial-id meta attribute

To use the partial-id meta attribute, you need to first have a partial created inside Dittofi. Partials are groups of elements that you can reuse throughout your app. When using meta attributes, the partial can just be an empty placeholder to begin with, as shown below.

Notice that each partial has an ‘id’ associated with it. For example the Partial called Modal Order in the image above has an id 104.

The partial-id meta attribute allows you to tag groups of elements in your HTML code with the a partial id. This is shown in the snippet of HTML code below.

// Some html code
<div partial-id="1">
    <heading>Hello world</heading>
</div>

When you import this block of HTML code into your app, Dittofi will pick out the partial-id meta attribute & translate this into reusable partial with an id equal to 1.

Note

If you design your partials inside Dittofi, Dittofi will automatically add the partial-id meta attribute to your HTML code.

The actions meta attributes

The actions meta attribute allows you to create frontend actions, with ids & triggers directly from within your HTML code. For instance, the following block of code will create an action with an id of 29893 & a trigger of ‘onClick’.

// Some html code
<th actions="[{'action':29893,'trigger':'onClick']" class="text-end min-w-100px sorting">
    <span id="ixgr26">priority</span>
</th>

This means that you can take any HTML template & then turn this into a React template simply by applying the actions meta attribute.

Note

If you attach actions to elements inside Dittofi, Dittofi will automatically add the actions meta attribute to your HTML code.

Meta attribute use cases

The fastest way to build a well styled web app is to pick a template either from Dittofi’s template marketplace, or from popular template libraries such as themeforest or the Webflow tempaltes.

After you’ve chosen a template, you can import the HTML & CSS directly into Dittofi. Using the actions & variables meta attributes, Dittofi will automatically convert your HTML & CSS code into a React web app.

At the same time, Dittofi will scan your imported code for the partial-id meta attribute & convert the elements into reusable collections of partials that you can use from within the Dittofi design studio.