To quickly integrate strings from your codebase into Ditto, you can use our JSON import feature to create components in your component library. Using our JSON import, you'll be able to:
This Help Guide will go over how our JSON imports work.
To import a JSON file of strings into your component library, click the "+ New Component" button at the top right of your component library and select the "Import as JSON" option.
👉 Quick note: To access the import functionality, you'll need to have Developer Mode turned on for the Component Library. Learn more about Developer Mode ->
We currently support 3 JSON formats: flat, nested, and structured. In each of the three formats, the component's name will be generated from the keys used in the JSON.
Notably, the default format that is selected when exporting from the component library — Full Component Library JSON — is not supported as an import format.
Example:
Resulting components:
In the flat format, any periods (.) in the key name will be converted into forward slashes (/) in the component name to organize components in the component library. The component's API ID will remain the same as the key.
Example:
Resulting components:
In the nested format, key nesting will be converted into forward slashes (/) in the component name to organize components in the component library.
Example:
Properties that get can parsed from the structured JSON format:
Resulting components:
In the structured format, like in the flat format, any periods (.) in the key name will be converted into forward slashes (/) in the component name to organize components in the component library.
Example:
Resulting components:
Example:
Resulting components:
Have a file format that you'd like to have supported? Let us know!
If all the keys in an imported file match the API IDs of existing components, no new components will be created; instead, the strings in the file will be applied to existing components as a variant.
When importing a file as a variant, text in the JSON file will be matched to components in the component library based on their API ID.