Examples

HTML to PNG 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/.

Convert HTML to PNG and save to file

// cypress/e2e/screenshot.cy.js
// Cypress screenshots are always PNG — no configuration needed.
describe('screenshot', () => {
  it('converts a page to PNG', () => {
    cy.visit('https://www.htmltoimage.com/demo');
    cy.screenshot('html', { capture: 'viewport' });
  });
});

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

That was 8 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.