Skip to main content

​
Playwright Plugin

The Playwright renderer plugin uses the Playwright browser automation engine to render your Angular pages into static HTML. Playwright is a modern alternative to Puppeteer that offers cross-browser support (Chromium, Firefox, and WebKit) and improved performance.
This plugin is currently in Preview/Beta status.

​
Installation

Install the plugin using npm: 
npm install @scullyio/scully-plugin-playwright

​
Configuration

Import the plugin in your Scully configuration file: 
// scully.<project-name>.config.ts
import '@scullyio/scully-plugin-playwright';
import { ScullyConfig } from '@scullyio/scully';

export const config: ScullyConfig = {
  projectRoot: './src',
  projectName: 'my-app',
  outDir: './dist/static',
  routes: {}
};

​
Usage

Once the plugin is imported, it automatically replaces the default Puppeteer renderer. You can use Scully as you normally would: 
# Build your Angular application
npx ng build

# Run Scully with Playwright renderer
npx scully
The plugin will:
  1. Automatically install Playwright dependencies on first run
  2. Launch a Playwright browser instance
  3. Render each route using Playwright
  4. Generate static HTML files

​
Features

​
Automatic Browser Installation

The plugin automatically installs required Playwright browser binaries when you first run Scully: 
npx playwright install

​
Cross-Browser Support

Playwright supports multiple browser engines. You can configure which browser to use: 
import { setPluginConfig } from '@scullyio/scully';

setPluginConfig('getPWLaunchedBrowser', {
  browser: 'chromium', // 'chromium', 'firefox', or 'webkit'
});

​
Manual Idle Detection

For routes that require manual control over when rendering is complete: 
export const config: ScullyConfig = {
  routes: {
    '/blog/:slug': {
      type: 'contentFolder',
      slug: {
        folder: './blog'
      },
      manualIdleCheck: true
    }
  }
};
In your Angular component: 
import { isScullyRunning } from '@scullyio/ng-lib';

export class MyComponent {
  ngAfterViewInit() {
    if (isScullyRunning()) {
      // Trigger when ready
      window['pageRenderReady']();
    }
  }
}

​
Resource Type Filtering

Ignore specific resource types during rendering to improve performance: 
export const config: ScullyConfig = {
  ignoreResourceTypes: ['image', 'font', 'media'],
  // ... rest of config
};

​
Screenshot Generation

Generate thumbnails of your pages: 
export const config: ScullyConfig = {
  thumbnails: true,
  outDir: './dist/static',
  // ... rest of config
};
Thumbnails will be saved as thumbnail.jpg in each route’s output directory.

​
Advanced Configuration

​
Custom Launch Options

You can customize Playwright’s launch options: 
import { setPluginConfig } from '@scullyio/scully';

setPluginConfig('getPWLaunchedBrowser', {
  headless: true,
  browser: 'chromium',
  args: ['--no-sandbox', '--disable-setuid-sandbox']
});

​
Expose Data to Pages

Inject data that your Angular app can access during rendering: 
export const config: ScullyConfig = {
  routes: {
    '/blog/:slug': {
      type: 'contentFolder',
      slug: {
        folder: './blog'
      },
      exposeToPage: {
        customData: 'value'
      }
    }
  }
};
Access in your Angular app: 
const exposedData = window['ScullyIO-exposed'];
console.log(exposedData.customData); // 'value'

​
Comparison with Puppeteer

FeaturePlaywrightPuppeteer
Browser SupportChromium, Firefox, WebKitChromium only
PerformanceFasterStandard
Modern APIsYesPartial
Auto-installYesNo
StatusBetaStable

​
Troubleshooting

​
Browser Installation Fails

If automatic browser installation fails, manually install Playwright browsers: 
npx playwright install

​
Rendering Timeout

If pages timeout during rendering, increase the timeout or use manual idle check: 
export const config: ScullyConfig = {
  routes: {
    '/slow-page': {
      type: 'default',
      manualIdleCheck: true
    }
  }
};

​
Browser Doesn’t Close

Ensure your Angular app triggers the AngularReady event or call pageRenderReady().

​
Repository

  • Package: @scullyio/scully-plugin-playwright
  • Repository: GitHub
  • Version: 2.1.42+

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us