Variables lets you to integrate dynamic values like names and links into your copy without requiring engineers to manually restructure content or interfering with the display of text in designs.
Variable basics
Ditto supports 5 different types of variables: strings, numbers, links, lists, and maps. Depending on the type, the variable will contain different properties:
String: for dynamic text content (eg. a user's name, company name, selected value)
Example: an example of a value for the variable. The example value is what will get synced back to the design.
Fallback (optional): a value that can be used in production if no value is provided for the variable (eg. a generic word like "user" instead of a name or an explicit fallback like "N/A").
Number: for dynamic numbers (eg. counts, prices)
Example: an example of a value for the variable. The example value is what will get synced back to the design. For numbers, this must be a number (characters in the set [0-9.]+).
Fallback (optional): a value that can be used in production if no value is provided for the variable (eg. a generic word like "a few" instead of a numeric count or an explicit fallback like "N/A").
Link: for hyperlinks in the text
Text: the text that's linked itself. This value is what will get synced back to the design.
URL: the actual URL to be linked for this text. Must be a full URL.
List: for a collection of elements
Value: an element in the collection. A list can have as many values as you'd like. All values need to be unique.
Map: for key-value pairs
Key-Value Pair: each key maps back to a specified value. A map can have as many key-value pairs as you'd like. All keys need to be unique.
Create a variable
You can create and insert a variable anywhere you can edit text in Ditto.
Create a new variable:
Select a text item and click + Insert variable
Create a new variable or insert an existing variable from the dropdown menu
Select the appropriate Type of variable, fill in the relevant fields, and click Create Variable
Save the edit
💡 The variable will be inserted where you previously had your cursor, so select the appropriate location in your string before creating/inserting the variable
How developers can use variables
Variables in Ditto were built with the primary purpose of saving developer time, so that developers no longer have to manually interpolate their product text. Ditto provides a UI for inserting dynamic values to use in production, while also allowing non-developers to interpolate product text.
Text with variables fetched via our developer integrations (API, CLI, and JSON export) will be written with mustache interpolation. The variables used in a text item will be included as metadata in the text object in the JSON.
For example, the following text item in Ditto will appear like this in a string: Welcome {{fullName}}
Manage variables
All of your variables live inside in your Variables library. View and manage the variables in your workspace by opening up the Variables tab in the Ditto web app.
Here, you can search for the variable by their name, create and edit variables, as well as see all variable activity in your workspace. If a variable is not currently used in any projects/components, you can also delete it from your workspace.