Value Helpers

Styleguide provides helpers for generating mock data in the preview at runtime. For example, suppose you have a template with the following markup:

{{#element "reporter"}}
    <div class="{{elementName}}">
        <p>{{this}}</p>
    </div>
{{/element}}

You can use a value helper in the data file to generate a random name.

{
  "_template": "/absolute/path/to/template.hbs",
  "reporter": "{{name}}
}

At runtime, Styleguide evaluates the helper and generates the following HTML:

<div class="Article-reporter">
    <p>Alfalfa Mail</p>
</div>

The following sections describe the available value helpers.

date

Generates a random date.

Syntax

Form Result
{{date}} Returns date as July 4, 1776
{{date('unformatted')}} Returns date as Tue Jul 04 1776 07:31:28 GMT-0400 (EDT).
{{date('short')}} Returns date as 7/4/1776.
{{date('iso')}} Returns date as 1776-7-4.

Example

{
   "dateBorn": "{{date('iso')}}"
}

hexColor

Generates a random hex color.

Syntax

Form Result
{{hexColor}} Returns a random RGB color in lower-case hexadecimal, such as #0c4d6a.
{{hexColor(luminosity)}} Returns the lower-case hexadecimal color corresponding to the provided luminosity (0≤luminosity≤100).

Example

{
  "textColor": "{{hexColor(45)}}"
}

image

Returns the URL for use in an HTML <img src="url" /> tag.

Syntax

Form Result
{{image(width,height)}} Returns the path to a mock image with the passed width and height. Styleguide stores the mock image in <project-root>/_build/placeholder-image/.

Example

{
  "headShot": "{{image(100, 500)}}"
}

You implement this value helper in the template file as follows:

<img src="{{headShot}}" />

name

Generates a random name.

Syntax

Form Result
{{name}} Returns a mock first and last name.

Example

{
  "authorName": "{{name}}"
}

number

Generates a random number.

Syntax

Form Result
{{number(value)}} Returns the passed value.
{{number[lower,upper]}} Returns a random number between lower and upper.

All arguments and returned values are integers.

Example

{
  "age": "{{number([1,100])}}"
}

paragraphs

Generates mock paragraphs.

Syntax

Form Result
{{paragraphs(paragraphCount, sentenceCount, wordCount)}} Returns the passed number of paragraphs, each containing the passed number of sentences. Each sentence contains the passed number of words. Some words may be a two-letter name.

Example

The following snippet generates three HTML <p> tags with four sentences in each. Each sentence has five random words.

{
  "articleBody": "{{paragraphs(3,4,5)}}"
}

Because this helper provides the <p> tags, you don’t need to include them in the template file.

sentences

Generates mock sentences.

Syntax

Form Result
{{sentences(sentenceCount, wordCount)}} Returns the passed number of sentences, each containing the passed number of words. Some words may be a two-letter name.

Example

The following snippet generates three sentences with seven words each.

{
  "byLine": "{{sentences(3,7)}}"
}

var

Returns the value of a variable defined in the vars object in your Styleguide’s _config.json file. This value helper is used mostly with Brightspot projects.

Syntax

Form Result
{{var('keyname')}} Returns the value for the passed keyname. If the passed key does not exist in _config.json, returns blank.

This value helper is available for use within a data file only; you cannot use it in a template.

Example

Suppose you have a file _config.json with the following vars object:

{
  "vars": {
    "color": "blue"
  }
}

You can retrieve the color using var.

{
    "headline": "The sky is {{var('color')}} today."
}

words

Generates mock words.

Syntax

Form Result
{{words(wordCount)}} Returns the passed number of words. Some words may be a two-letter name.

Example

The following snippet generates 15 words.

{
  "headline": "{{words(15)}}"
}