Pencil Actions

Version updated for https://github.com/RemoteState/pencil-actions to version v1.

  • This action is used across all versions by ? repositories.

Action Type

This is a Node action using Node version 20.

Go to the GitHub Marketplace to find the latest changes.

Action Summary

Pencil Actions is a GitHub Action designed to automate design file reviews by generating visual previews of .pen files directly within pull requests. It detects changes to design files, compares updated frames with their previous versions, and provides before/after screenshots, facilitating streamlined design code reviews. This action solves the problem of manual design comparison in PRs, enhancing collaboration and accuracy in design development workflows.

Release notes

Visual design diffs in GitHub PRs. Before/after screenshots for every .pen design change.

Code review, but for designs.

Features

  • 🔍 Diff mode — Only renders changed frames with before/after comparison
  • 📸 Full mode — Renders every frame in changed files
  • 💬 PR comments — Automatically posts/updates design previews
  • 📦 Artifacts — Optionally uploads screenshots as workflow artifacts
  • 🆓 Free forever — 1,000 screenshots/month, no API key needed

Quick Start

name: Design Review
on:
  pull_request:
    paths: ['**/*.pen']

permissions:
  contents: read
  pull-requests: write
  id-token: write

jobs:
  review:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: remotestate/pencil-actions@v1
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}