TRMNL is a versatile custom web component that provides a stylish terminal-like frame for displaying content. It supports both iframe sources and direct HTML content with multiple styling options.

Features

Multiple Content Sources: Load content from external URLs or inject HTML directly
Custom Color Themes: Choose from white, black, sage, gray, and wood themes
Multiple Device Frames: Render the original TRMNL or the TRMNL X via the model attribute
Responsive Design: Automatically adapts to its container size
JavaScript API: Programmatically control content and appearance
CSS Scoping: Content is isolated in an iframe for better style encapsulation

Installation

<script src="trmnl-component.js" defer></script>

Or import from CDN

<script src="https://trmnl.com/js/latest/trmnl-component.js" defer></script>

Basic Usage

Loading External Content

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

TRMNL X Frame

<trmnl-frame model="x">
  <div class="screen">
    <div class="view view--full">
      <h1>Rendered at TRMNL X size</h1>
    </div>
  </div>
</trmnl-frame>

Slotted content is automatically rendered at the X's screen size: the component adds the framework's screen--v2 class to your .screen elements (1040×780 logical, 1872×1404 physical at pixel-ratio 1.8). External src pages style themselves — they load in a 1872×1404 viewport and must size their own markup (e.g. include plugins.css and use class="screen screen--v2").

With Direct HTML Content

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

Customizing Appearance

<trmnl-frame 
  color="black" 
  class="w-full h-64"
  style="margin: 20px auto;"
  src="https://example.com/dashboard.html">
</trmnl-frame>

API Reference

Attributes

Attribute	Description	Default
`src`	URL to load in the iframe	-
`color`	Color theme (white, black, sage, gray, wood; `mint` is a deprecated alias for `sage`)	`"white"`
`model`	Device frame to render (`og`, `x`)	`"og"`
`class`	CSS classes to apply to the component	-
`style`	Inline styles to apply to the component	-

Methods

Method	Description
`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
`setModel(model)`	Sets the device frame (`og` or `x`)

JavaScript 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');

// Clear content
terminal.clearContent();

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

Content Structure

When inserting content directly, it's wrapped in a standard HTML template that includes TRMNL styles:

<!doctype html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="https://trmnl.com/css/latest/plugins.css"/>
        <script type="text/javascript" src="https://trmnl.com/js/latest/plugins.js"></script>
        <meta charset="utf-8" />
        <title>TRMNL</title>
    </head>
    <body class="trmnl">
        <!-- Your content here -->
    </body>
</html>

Browser Support

TRMNL uses modern web technologies including Custom Elements and Shadow DOM. It is supported in all major browsers:

Chrome/Edge (latest)
Firefox (latest)
Safari (latest)

Examples

You can find more examples in the examples.html file within this repository.

License

MIT License

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

README.md Unescape Escape

TRMNL Web Component

Overview