Skip to main content
Mashups

How to build split-screen plugins.

Ryan avatar
Written by Ryan
Updated this week

TRMNL offers several layout combinations for your plugins. The default layout is full screen, illustrated by the top left icon in the graphic below.

Create a Mashup

When you connect a new plugin, or create a new plugin "instance" (for an existing plugin), TRMNL adds a full screen layout to your Playlist automatically.

To instead leverage a Mashups layout, simply visit your Playlists tab and hover your mouse over the "Add a Plugin" dropdown.

Here you can select a layout, then begin building it out with a few clicks.

In this example above we chose the 50/50 split screen layout, which is the top-right icon in the graphic at the top of this guide.

Next, we can choose any* of our connected plugins from the "Section A" and "Section B" dropdowns.

As you can see, whatever plugin we provide in the Section A plugin will be mapped to the left pane layout, denoted by the 'A' inside the template.

Once you've chosen a plugin for each section, your Playlist will refresh.

See your Mashup

After creating a mashup, it should then take just a few seconds for the Mashup content to be generated. So instead of waiting for your device to fetch this particular content, you can actually refresh your Playlists tab to see the preview image.

If you'd like to inspect your Mashup more closely before it appears on your device, simply right click on the image and choose "Open Image in New Tab."

Edit a Mashup

To update the contents of an individual item / section within a Mashup, hover the gear cog and click Edit.

Troubleshooting Mashups

If you've created a Mashup but still see orange boxes, try waiting a few more seconds for our queue to pick up your inner contents and generate a graphic.

If your Mashup contains Private Plugin or Recipes, and the content is duplicated between unique instances, check that the markup (HTML, CSS, JS) is containerized to be unique across instances. For example, if you have a chart that binds to "#my-chart," then one of your Mashup sections will work, and the other will not.

If your Mashup has some working sections, and some blank sections, consider it's possible our system "timed out" while loading all the content and taking a snapshot for your device. If you have access to the markup and logic of the blank section, try making it smaller and faster. If the blank section is a native plugin, let us know.

Did this answer your question?