PHPackages                             nicholashamilton/craft-preview-mate - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. nicholashamilton/craft-preview-mate

ActiveCraft-plugin[Utility & Helpers](/categories/utility)

nicholashamilton/craft-preview-mate
===================================

Find live preview matrix blocks with ease.

4.1.1(4mo ago)36163mitPHPPHP >=8.2CI failing

Since Oct 31Pushed 4mo ago2 watchersCompare

[ Source](https://github.com/nicholashamilton/craft-preview-mate)[ Packagist](https://packagist.org/packages/nicholashamilton/craft-preview-mate)[ RSS](/packages/nicholashamilton-craft-preview-mate/feed)WikiDiscussions craft-5 Synced 1mo ago

READMEChangelog (10)Dependencies (2)Versions (12)Used By (0)

PreviewMate v4
==============

[](#previewmate-v4)

Find live preview matrix blocks with ease.

Requirements
------------

[](#requirements)

This plugin supports Craft CMS 5.x

> **Note:** PreviewMate 1.x and 2.x are only compatible with Craft CMS 4.x. PreviewMate 3.x and 4.x are only compatible with Craft CMS 5.x.

Installation
------------

[](#installation)

To install the plugin, follow these instructions.

1. Open your terminal and go to your Craft project:

    cd /path/to/project
2. Then tell Composer to load the plugin:

    composer require nicholashamilton/craft-preview-mate
3. In the Control Panel, go to Settings → Plugins and click the “Install” button for PreviewMate.

How to use
----------

[](#how-to-use)

[![PreviewMate v4 Demo](./resources/img/PreviewMate_v4_Demo.gif)](./resources/img/PreviewMate_v4_Demo.gif)

Preview blocks will be tracked in live preview by adding `data-preview-block-id` attribute to the entry's HTML element.

```
{# option 1 (recommended) - only rendered in live preview #}
{{ craft.previewMate.previewBlock(entry) }}
```

or

```
{# option 2 - manually set the preview block id #}
data-preview-block-id="{{ entry.id }}"
```

Clicking a preview block will now scroll to and highlight the editor block.

Usage example
-------------

[](#usage-example)

```
{# Matrix field #}
{% set blocks = entry.blocksBuilder.all() %}

{# Render blocks #}
{% for block in blocks %}

        {{ block.render() }}

{% endfor %}
```

It's recommended to add styles for preview blocks using `data-preview-block-id`. Adding the following styles will highlight the preview block on hover.

```
[data-preview-block-id] {
    position: relative;
}
[data-preview-block-id]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px dashed rgba(0, 0, 0, .333);
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms ease;
}
[data-preview-block-id].preview-block-hover::after {
    opacity: 1;
}
```

###  Health Score

47

—

FairBetter than 94% of packages

Maintenance77

Regular maintenance activity

Popularity21

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity65

Established project with proven stability

 Bus Factor1

Top contributor holds 92.1% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~129 days

Recently: every ~105 days

Total

10

Last Release

125d ago

Major Versions

v1.0.2 → 3.0.02024-11-11

2.0.0 → 3.0.22024-11-13

3.0.2 → 4.0.02024-11-13

PHP version history (2 changes)v1.0.1PHP ^8.0.2

3.0.0PHP >=8.2

### Community

Maintainers

![](https://www.gravatar.com/avatar/53413379d71db0f38c32b8d95d0c34cbeaeece338474c3d15b65b8939efb35d5?d=identicon)[nhco](/maintainers/nhco)

---

Top Contributors

[![nicholashamilton](https://avatars.githubusercontent.com/u/16893152?v=4)](https://github.com/nicholashamilton "nicholashamilton (70 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (5 commits)")[![gliving-pw](https://avatars.githubusercontent.com/u/93151254?v=4)](https://github.com/gliving-pw "gliving-pw (1 commits)")

---

Tags

craftcms-plugincmsCraftcraftcmscraft-pluginpreviewmatelive preview

### Embed Badge

![Health badge](/badges/nicholashamilton-craft-preview-mate/health.svg)

```
[![Health](https://phpackages.com/badges/nicholashamilton-craft-preview-mate/health.svg)](https://phpackages.com/packages/nicholashamilton-craft-preview-mate)
```

###  Alternatives

[verbb/navigation

Create navigation menus for your site.

90683.7k17](/packages/verbb-navigation)[verbb/formie

The most user-friendly forms plugin for Craft.

101372.9k40](/packages/verbb-formie)[verbb/comments

Add comments to your site.

13753.1k](/packages/verbb-comments)[verbb/tablemaker

Create customizable and user-defined table fields.

40168.8k1](/packages/verbb-tablemaker)[supercool/tablemaker

Create customizable and user-defined table fields.

40141.7k](/packages/supercool-tablemaker)[pennebaker/craft-architect

CraftCMS plugin to generate content models from JSON/YAML data.

72148.5k5](/packages/pennebaker-craft-architect)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)