ThumbsmithThumbsmiththumbsmith
  • Documentation
  • Meta tags debugger
  • Preview your website
  • Pricing
Press shift + F to focus
Get started
IntroductionCreating a templateMustache cheatsheetUsing a template
Packages
@thumbsmith/cli@thumbsmith/url

Mustache cheatsheet

Common syntax for writing mustache templates.

You can find the official documentation here.



Given this data (click to expand)
Example data passed to the template :
{
  name: 'John',
  isFeatured: true,
  tags: ['Tag A', 'Tag B', 'Tag C'],
  categories: [
    { name: 'Category A' },
    { name: 'Category B' },
    { name: 'Category C' },
  ],
  image: 'https://website.com/path/image.jpg'
}

You can write your thumbnail template as such :

Basic tag

<h1>Hello {{name}} !!</h1>

Conditional rendering by truthy value

{{#isFeatured}}
  <p>isFeatured is truthy!</p>
{{/isFeatured}}

Conditional rendering by falsy value

{{^foobar}}
  <p>foobar is falsy!</p>
{{/foobar}}

Loop through a list of strings

<ul>
  {{#tags}}
    <li>{{.}}</li>
  {{/tags}}
</ul>

Loop through a list of objects

<ul>
  {{#categories}}
    <li>{{name}}</li>
  {{/categories}}
</ul>

Render raw values

This is useful for passing URLs in HTML attributes which contain special characters.

<img src="{{{imageUrl}}}" />
On this page
Mustache cheatsheetBasic tagConditional rendering by truthy valueConditional rendering by falsy valueLoop through a list of stringsLoop through a list of objectsRender raw values

Thumbsmith

HomeMeta tags debuggerProject roadmapDocumentationContact usAbout

Legal

Terms of ServicePrivacy policy

Follow us

@thumbsmithapp
© Copyright 2022, thumbsmith.com
validate-magic-link
×