Visual Editor (IDE)

Our private plugin markup editor featuring version control and debugging tools has gotten us to 1,000 published plugins in the marketplace.

But it also left users wanting more. So much that we built trmnlp, a local development toolkit and CLI for developing plugins outside the TRMNL interface.

Now we're bringing these concepts together with the Visual Editor.

Navigate to any private plugin you've created or forked, then click Edit Markup.

You'll land inside the legacy Markup Editor. Now click "Visual Editor" on the right side of the page.

Upon entering the IDE you'll be greeted with helpful tips and shortcuts.

The visual editor is constructed of panes. Each may be resized or hidden with the toolbar across the top right of your screen.

Nested tree of your markup elements. May be re-arranged via drag and drop.

Bottom left corner, chat with AI to build plugins from scratch or make tweaks.

Zoom and pan between all possible layouts, or click a layout in the top bar to jump directly into its markup.

Located in the bottom center, here you can write HTML, CSS, and JavaScript just like in the legacy markup editor.

These tabs in the Code Editor unlock shared markup and serverless capabilities.

Inject merge variables, drag/drop components, or templates to kickstart a new design

Point-and-click style editor; update CSS, swap out components, read docs, and customize how elements look on different devices and orientations.

Use the icons along the top to rearrange the code editor to a left/right split (vs top/bottom) and show or hide other panes you may not need to access.

Find a list of helpful keyboard shortcuts with shift+? (shift + /) , or refresh the page for the full welcome menu.

Click on elements inside the preview area, then continue double-clicking on them, to drill into that element's markup inside the Code Editor.

Drag and drop nested elements from the left sidebar to rearrange layouts without copy/pasting code blocks.