Exporter app #

When exporting file contents to a file, we want the result to be exactly the same as the user sees in screen. To achieve this, we use a headless browser installed in the backend host, and controled via puppeteer automation. The browser loads the frontend app from the static webserver, and executes it like a normal user browser. It visits a special endpoint that renders one shape inside a file. Then, if takes a screenshot if we are exporting to a bitmap image, or extract the svg from the DOM if we want a vectorial export, and write it to a file that the user can download.

Exporter structure #

Penpot exporter app code resides under exporter/src/app path in the main repository.

  ▾ exporter/src/app/
    ▸ http/
    ▸ renderer/
    ▸ util/
      core.cljs
      http.cljs
      browser.cljs
      config.cljs

Exporter namespaces #

• core has the setup and run functions of the nodejs app.

• http exposes a basic http server, with endpoints to export a shape or a file.

• browser has functions to control a local Chromium browser via puppeteer.

• renderer has functions to tell the browser to render an object and make a screenshot, and then convert it to bitmap, pdf or svg as needed.

• config gets configuration settings from the linux environment.

• util has some generic utility functions.