or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-mjml-head-preview

MJML head component for setting email preview text that appears in email client inboxes

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/mjml-head-preview@4.15.x

To install, run

npx @tessl/cli install tessl/npm-mjml-head-preview@4.15.0

MJML Head Preview

MJML Head Preview provides the <mj-preview> component for setting email preview text that appears in email client inboxes before emails are opened. This component is part of the MJML email framework ecosystem and enables developers to control the preview text displayed in email clients.

Package Information

Package Name: mjml-head-preview
Package Type: npm
Language: JavaScript
Installation: npm install mjml-head-preview

Core Imports

import MjPreview from "mjml-head-preview";

For CommonJS:

const MjPreview = require("mjml-head-preview");

For component development (extending the component):

import { HeadComponent } from "mjml-core";

Basic Usage

The <mj-preview> component is used within the <mj-head> section of MJML templates to set the preview text:

<mjml>
  <mj-head>
    <mj-preview>Your preview text appears here</mj-preview>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>Email content goes here</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Architecture

The mjml-head-preview package provides a single MJML component class that extends the HeadComponent base class from mjml-core. The component processes the preview text during MJML compilation and adds it to the global context for inclusion in the final HTML output.

Capabilities

MjPreview Component

The main and only export from the package, providing the <mj-preview> MJML component functionality.

/**
 * MJML head component for setting email preview text
 * Extends HeadComponent from mjml-core
 */
export default class MjPreview extends HeadComponent {
  /** Component name used as MJML tag */
  static componentName = 'mj-preview';
  
  /** Indicates component accepts content between tags */
  static endingTag = true;
  
  /** 
   * Processes the component and adds preview text to global context
   * Called during MJML compilation
   */
  handler() {
    const { add } = this.context;
    add('preview', this.getContent());
  }
}

Usage in MJML Templates:

<!-- Basic preview text -->
<mj-head>
  <mj-preview>Check out our latest newsletter!</mj-preview>
</mj-head>

<!-- Preview text with promotional content -->
<mj-head>
  <mj-preview>🎉 Flash Sale: 50% off everything - Limited time offer</mj-preview>
</mj-head>

Component Registration:

When registering with MJML core:

import mjml2html from "mjml-core";
import MjPreview from "mjml-head-preview";

// Component is typically auto-registered in MJML ecosystem
// Manual registration if needed:
mjml2html.registerComponent(MjPreview);

Integration with MJML Core

The MjPreview component integrates with the MJML compilation process through the following mechanisms:

HeadComponent Base Class: Inherits core functionality from mjml-core's HeadComponent
Context Integration: Uses this.context.add('preview', this.getContent()) to set global preview data
Content Processing: Inherits getContent() method from Component base class to extract and trim text content from component tags
Component Registration: Follows MJML component registration patterns for ecosystem integration

The actual implementation:

handler() {
  const { add } = this.context;
  add('preview', this.getContent());
}

HTML Output

The preview text is rendered as a hidden <div> element in the email HTML using the preview helper from mjml-core:

<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Your preview text appears here</div>

This hidden div is positioned early in the HTML structure so email clients can extract it as preview text while keeping it invisible to email recipients. The exact styling and structure is handled by the preview helper function in mjml-core.

Types

/**
 * Base HeadComponent class from mjml-core
 * Extended by MjPreview
 */
class HeadComponent {
  /**
   * Component context with global data and helper methods
   * @property {Function} add - Add data to global context
   */
  context = {
    add(key, value) { /* adds data to global context */ }
  };
  
  /**
   * Get text content from component tags
   * @returns {string} The content between opening and closing tags
   */
  getContent() {
    return this.props.content.trim();
  }
  
  /**
   * Process component during compilation
   * Must be implemented by extending classes
   */
  handler() { /* implementation specific */ }
}