Examples

Screenshot the viewport with JavaScript and Cypress

Install Cypress

npm install cypress

Cypress is an end-to-end testing framework, so screenshots are taken from inside a test. Save the example as cypress/e2e/screenshot.cy.js and run it with npx cypress run — screenshots land in cypress/screenshots/.

Take a screenshot of the viewport and save to file

// cypress/e2e/screenshot.cy.js
describe('screenshot', () => {
  it('captures the viewport', () => {
    cy.visit('https://www.htmltoimage.com/demo');
    cy.screenshot('viewport', { capture: 'viewport' });
  });
});

Find out how to change the size of the viewport with JavaScript and Cypress.

That was 7 lines of code — plus a browser to run in production

Keeping headless browsers fed, patched and scaled is a job in itself. We built Urlbox so the same screenshot is one API call: 

curl "https://api.urlbox.com/v1/YOUR_API_KEY/png?url=https://example.com"

Try the Urlbox screenshot API — free trial, no browser babysitting.