A customizable terminal-style display component for modern web applications.
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.
- Multiple Content Sources: Load content from external URLs or inject HTML directly
- Custom Color Themes: Choose from white, black, and mint themes
- 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
<script src="trmnl-component.js" defer></script>Or import from CDN
<script src="https://usetrmnl.com/js/latest/trmnl-component.js" defer></script><trmnl-frame src="https://example.com/content.html"></trmnl-frame><trmnl-frame color="mint">
<div class="screen">
<div class="view">
<h1>My Custom Content</h1>
</div>
</div>
</trmnl-frame><trmnl-frame
color="black"
class="w-full h-64"
style="margin: 20px auto;"
src="https://example.com/dashboard.html">
</trmnl-frame>| Attribute | Description | Default |
|---|---|---|
src |
URL to load in the iframe | - |
color |
Color theme (white, black, mint) | "white" |
class |
CSS classes to apply to the component | - |
style |
Inline styles to apply to the component | - |
| 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 |
// 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();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://usetrmnl.com/css/latest/plugins.css"/>
<script type="text/javascript" src="https://usetrmnl.com/css/latest/plugins.js"></script>
<meta charset="utf-8" />
<title>TRMNL</title>
</head>
<body class="trmnl">
<!-- Your content here -->
</body>
</html>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)
You can find more examples in the examples.html file within this repository.
MIT License
Contributions are welcome! Please feel free to submit a Pull Request.