Import, export and share Studio templates

Shotstack Studio, is an online video editor designed for bulk video editing. It's a unique tool because it allows you to edit videos, images and audio using JSON templates. The templates can be created using code or designed using the Studio, a drag and drop style video editor. Templates are typically used with the video editing API and media automation workflows.

Because templates use JSON, it is very easy to import, export, save and share them with other users and teams. They can also be copied and pasted from tutorials and guides. Many of our developer articles include JSON examples.

In this guide you will learn how to work with JSON and the Studio Editor.

Creating a JSON template

You need a Shotstack account to follow along with this guide. If you do not already have one, you can sign up for a free account.

Once you have signed up, log in to the dashboard and click on Studio on the menu panel on the left. This will open up the template design tool.

Click on the Create Blank Template button to start your edit from scratch or you can use any of the Studio templates from the templates gallery. Let's first look at using a blank template and then we will look at another example with one of the Studio templates.

The template modal will appear when you click the New Template button.

Enter a name for the template, select Video as the output, and click Done. This will open the timeline based video editor. You can switch between the design mode and JSON mode using the JSON VIEW toggle at the bottom-left corner (see screenshot below).

Below is a screenshot of the JSON editor.

When you make any change in the design mode of the editor, it automatically updates the JSON. Also, any changes you make in the JSON template update the layout in the design mode.

Switch back to the design view and add a few assets to the template such as text, video clips and images.

Importing JSON into the Studio

Now that you know how to create a template and switch between the JSON and design view, you can easily import a JSON template by copying the contents of a file, email body, blog article or any text based application. Then, paste it into the JSON view of the Studio editor. You may want to do this when you need to use one of our Studio templates, online tutorials or a template created by a teammate or freelancer.

You can easily import a JSON edit file by copying the content of the file and pasting it into the JSON VIEW of the Studio editor. You may want to do this when you need to use one of our Studio templates or a template created by a teammate or freelancer.

Let's see an example of how you can import JSON using one of the Studio templates.

Visit the Studio templates gallery to check out the available templates you can use in your projects. For this example, we are using the hotel review slideshow template.

When you select a template from the gallery, you'll see a preview of the template. You will also see a JSON tab attached to the preview (see the screenshot above). Click on the tab to reveal the JSON for the template.

Select the JSON and copy it, or simply press the COPY button. Return to the Studio, make sure the JSON view is visible and paste it into the window. When you switch back to the preview view the design view will download all the assets and display the preview and timeline.

Exporting and sharing JSON with others

How about when you need to export or share your JSON edit from the Studio editor with others? Once your design is complete, switch to the JSON view and highlight all of the JSON in the editor. Then, copy the JSON and paste it in to a text file, email body, chat window, CMS or any other application that lets you share text.

Using template IDs instead of JSON

When you create a template, an ID is automatically generated for the template. You can interact with the API using the template ID. That way, you don't need to copy and paste the entire JSON template into your code. What you will need is the ID and the merge fields.

To use the template ID, click the Use Template button at the top-right corner of the editor. This will open the "Use Template" modal. Select API from the available options.

A Code Snippet panel opens up to the right of the screen. Select your preferred language/library from the LANGUAGE/LIBRARY dropdown menu and select Template ID from the DATA FORMAT option. The template id is circled in the example below.

You can copy the code snippet and give it to your developer or integrate it in to your application or workflow.

Conclusion

In this guide, you have learned about how Shotstack Studio templates are created using JSON. You also learned how to create JSON templates from scratch using the design view, and how to import and export the templates to and from JSON. Because JSON is a universal standard, and a text based, they can easily be shared and stored. You could use this approach to create your own database of templates and easily adapt them for your applications and workflows.