Share live templates
WebStorm stores definitions of custom live template groups and templates added to predefined template groups in automatically generated XML configuration files.
For a custom group, the file contains definitions of all the templates the group includes.
For a modified predefined group, the file contains definitions of the added (or modified) live templates only.
Live template group configuration files are stored in the templates directory of the IDE configuration directory. By copying the relevant files in the templates directory, you can share live templates among team members and multiple WebStorm installations. Moreover, you can share live templates across all IDEs based on the IntelliJ platform.
Share live template using Settings Sync
If you want to synchronize live templates across your IDEs (rather than sharing them with your teammates), you can use Settings Sync. Settings Sync uses the JetBrains server to synchronize IDE settings (including live templates) across the IDEs where you sign in using your JetBrains account.
Press Control+Alt+S to open Settings, go to .
If Settings Sync is not yet enabled, click Enable Settings Sync.
To share live templates, make sure the Code settings checkbox is selected under Configure what to sync. Select this checkbox on other IDEs where you want your code settings (including live templates) to be shared.
The quick way: copy and paste
If you want to share one or a couple of templates and do not need to synchronize them regularly, you can simply copy and paste them from one IDE to another. The XML representation of the template (including its name, description, and variables) will be put into the clipboard.
Press Control+Alt+S to open the IDE settings and then select .
Expand a template group, select one or more templates, and press Control+C (or right-click the template and select Copy).
In the target IDE, press Control+Alt+S to open the IDE settings, navigate to a live template group, and press Control+V.
Export and import live templates manually
WebStorm also lets you export and import all live templates, which may be more convenient than copying individual templates manually.
Export live template configuration
Choose from the menu.
In the Export Settings dialog, make sure that the Live templates checkbox is selected and specify the path and name of the archive, where the exported settings will be saved.
Note that the Live templates checkbox appears in the Export Settings dialog if you have at least one custom live template in your project.
Click OK to generate the file based on live template configuration files. You can share this file with your team members, or import it on another WebStorm installation.
Import live template configuration
Select from the menu.
Specify the path to the archive with the exported live template configuration.
In the Import Settings dialog, select the Live templates checkbox and click OK.
After restarting WebStorm, you will see the imported live templates on the Editor | Live Templates page of the IDE settings Control+Alt+S.
Example of sharing templates between different IDEs
If you import custom templates (updates) from a group that is predefined in the source IDE but is not predefined in the target IDE, such group will be created but will contain only the custom templates (no default predefined templates). The following example illustrates what happens when adding a custom template to a predefined group in WebStorm and then reusing it in PhpStorm.
In WebStorm, the Handlebars template group is predefined and contains one template itar. If you add the t (tag pair) template to it, this update will be saved:
In PhpStorm, there is no Handlebars predefined template group. So when you export live templates from WebStorm and then import them into PhpStorm, the Handlebars group is created, but only contains the t (tag pair) template, which was added to the group in WebStorm before export:
