Using the Tangible "Loops and Logic" language

LiveCanvas v4 introduces a new method to fetch and display dynamic content — [eg   querying posts and creating post loops, maybe to display latest blog article titles on your homepage] —  integrating support for the Tangible / Loops and Logic language: a beautiful, simple, and secure way to manage dynamic data. 

The "Tangible" Loops and Logic (LNL) language is a straightforward, open-source, WordPress-specific templating language — similar to Twig, Blade, or even Smarty (for veteran developers).

It offers a safe and intuitive way to query your database and render dynamic content, including custom post types and fields.

Using the LNL language, which is now "built in" LiveCanvas, you can very easily retrieve post data and custom fields, but also express conditionals and dynamic tags like <Loop>, <Field>, and <If>, directly within your HTML.

It works both in all your LiveCanvas "pages" and in dynamic templates.

To run code, Wrap any "Loops and Logic" syntax inside a <tangible> tag directly in the HTML editor.

Add the class live-refresh to your <tangible> tag to see real-time updates while editing.

Example:

<tangible class="live-refresh">
  .....your Loops and Logic code here.....
</tangible>

Most important highlights

  • Due to strict HTML parsing in the LiveCanvas editor, LNL tags are automatically converted to lowercase by the parser — but no worries,  they are equally processed.
  • Best practice: Always use explicit syntax when referencing fields. EG: to grab a custom field, please write  <field name="title"> over <field title> for better clarity and consistency.
  • Check out the Practical Code Examples below to learn how to build powerful loops and display any type of content easily.
  • LiveCanvas includes ready-made Post Loops starting from version 4+, available in the section library.
  • Dynamic templates support: Loops and Logic works in LiveCanvas Dynamic Templates as well. We have re-coded all the standard templates (single, archive, 404) in LNL syntax. (WooCommerce templates are still shortcode-based for now.)
  • Explore the full Loops and Logic documentation.
  • Join the Tangible Community Forum to share and learn.
  • Use our Custom GPT tool for Tangible Elements to speed up your development, but trust it sparingly.

Note for long-time users

The classic [lc_get_posts] shortcodes still work and remains fully supported if you prefer using them.

If you don’t feel comfortable using <tangible> yet, you can always fall back to shortcodes.

However, once you get used to it, you’ll appreciate the power, flexibility, and elegance of Loops and Logic.

Practical Code Example: Simple Posts Loop

Code

<tangible class="live-refresh">
  <div id="archiveHomePosts" class="d-grid gap-3 mw-8 mx-auto">
    <loop type="post" count="5" orderby="date" order="desc">
      <div class="col-12 py-5 border-top">
        <div class="row align-items-center">
          <div class="col-lg mb-3 mb-lg-0">
            <if field="image">
              <img loading="lazy" src="{Field image_url size='thumbnail'}" srcset="{Field image_srcset}" sizes="{Field image_sizes}" class="img-fluid" alt="{Field image_alt}">
            <else>
              <img loading="lazy" src="https://placehold.co/150" class="img-fluid" alt="Placeholder">
            </else>
            </if>
          </div>
          <div class="col-lg-9 mb-3 mb-lg-0">
            <div class="mw-4">
              <span class="text-body text-opacity-75 mb-1 d-block">
                <field name="publish_date" date_format="F j, Y"></field>
              </span>
              <h3 class="fw-bold">
                <field name="title"></field>
              </h3>
            </div>
          </div>
          <div class="col-lg ms-lg-auto">
            <a class="d-inline-flex align-items-center fw-semibold icon-link icon-link-hover" href="{Field url}">
              <span>Read</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path d="M5,17.59L15.59,7H9V5H19V15H17V8.41L6.41,19L5,17.59Z"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </loop>
  </div>
</tangible>

Preview

Simple Posts Loop Preview

Practical Code Example: Three Columns Posts Loop

Code

<tangible class="live-refresh">
  <div id="myPostsGrid" class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-xl-5">
    <loop type="post" count="6" orderby="date" order="desc">
      <div class="position-relative">
        <div class="row">
          <div class="col-12">
            <if field="image">
              <img loading="lazy" src="{Field image_url size='large'}" srcset="{Field image_srcset}" sizes="{Field image_sizes}" class="img-fluid mb-3 w-100 object-fit-cover rounded-3 shadow" style="aspect-ratio:4/3" alt="{Field image_alt}">
            <else>
              <img loading="lazy" src="https://placehold.co/300x200" class="img-fluid mb-3 w-100 object-fit-cover rounded-3 shadow" style="aspect-ratio:4/3" alt="Placeholder">
            </else>
            </if>
          </div>
          <div class="col-12">
            <a class="stretched-link text-decoration-none" href="{Field url}">
              <h3 class="fw-bold fs-4 ls-n1">
                <field name="title"></field>
              </h3>
            </a>
            <p class="text-body text-opacity-50">
              <field name="publish_date" date_format="F j, Y"></field>
            </p>
          </div>
        </div>
      </div>
    </loop>
  </div>
</tangible>

Preview

Three Columns Posts Loop Preview