TRMNL Component Demo

Interactive demonstration of the TRMNL custom web component

Interactive Demo

Hello TRMNL!

TRMNL Web Component

Component Controls

Component Color Theme

External Content Demo

This component loads content from an external source using the src attribute

Change Color Theme

TRMNL Component API

Properties and Methods Reference

Documentation for the available properties and methods of the TRMNL component.

Attributes: src - URL to load in the iframe

color - Color theme (white, black, mint, gray, wood)

class - CSS classes to apply to the component

style - Inline styles to apply to the component

dark - Dark mode support (invert the screen colors). Options: true, false, auto
Methods: setHTML(html) - Sets HTML content directly inside the component

clearContent() - Clears all content from the component

setSrc(url) - Sets the URL to load in the iframe

getHTML() - Gets the current HTML content

setDark(mode) - Sets the dark mode of the iframe true, false or auto

setColor(color) - Sets the color of the TRMNL (white, black, mint, gray, wood)

Usage Examples

Basic Usage

<trmnl-frame src="https://example.com/content.html"></trmnl-frame>

With Direct Content

<trmnl-frame color="mint" dark="true">
  <div class="screen">
    <div class="view">
      <h1>My Custom Content</h1>
    </div>
  </div>
</trmnl-frame>

JavaScript API Usage

// Get reference to the component
const terminal = document.getElementById('my-terminal');

// Set HTML content
terminal.setHTML('<div>Dynamic content</div>');

// Change source
terminal.setSrc('https://example.com/new-content.html');

// Set the dark mode to 'dark'
terminal.setDark('true');

// Set the dark mode to 'light'
terminal.setDark('false');

// Set the dark mode to 'auto'
terminal.setDark('auto');

// Set the color TRMNL to 'white'
terminal.setColor('white');

// Set the color TRMNL to 'black'
terminal.setColor('black');

// Set the color TRMNL to 'mint'
terminal.setColor('mint');

// Set the color TRMNL to 'gray'
terminal.setColor('gray');

// Set the color TRMNL to 'wood'
terminal.setColor('wood');

// Clear content
terminal.clearContent();

// Get current HTML content
const content = terminal.getHTML();