Start for free
Documentation menu

Convert from Penpot

Step-by-step: turn a Penpot design into WordPress content with the JSON export. Available from the Pro plan.

Importing from Penpot is available from the Pro plan (Pro, Agency and Studio). Tapeto reads the JSON of the Penpot file.

Free and Starter accounts

The Penpot tab shows a Pro badge and project creation is refused with “Your plan does not include this source”. On Free or Starter you can instead use a ZIP / HTML site or Figma, or upgrade from Settings → Plan & billing. Once you are on Pro, follow the steps below.

Tapeto converts the first page of the Penpot file. For a multi-page site, create one project per page (each counts against your monthly limit).

Before you start

  • A Pro, Agency or Studio account.
  • The Penpot file as JSON (.json, up to 5–200 MB (by plan)). The binary .penpot package is not accepted directly.
  • Your WordPress site, if you will publish: see the ZIP / HTML guide.

Step 1 — Prepare the design in Penpot

  1. Build each section as a board and use flex layout (row or column, with gaps and padding): it becomes real flex containers.
  2. Name your boards and layers by purpose — Header, Hero, Footer, Card, Button.
  3. Use real text layers and fonts available on Google Fonts.
  4. Remove what you do not need from the page you will convert.

Step 2 — Get the JSON

Tapeto needs the file data as JSON: an object that contains pages-index (or pages / objects). One way to get it is Penpot’s API with an access token (Profile → Access tokens), requesting the file’s data and saving the response as a .json file.

Step 3 — Create the project

  1. In Tapeto click New project and write a name.
  2. Open the Penpot tab.
  3. Drop the .json file in the area (or click to choose it).
  4. Click Create project and wait until the status is parsed.

If the JSON has no recognisable Penpot structure, the project ends in error with a message saying so.

Step 4 — Choose the builder and convert

  1. Open the project and pick Gutenberg or Elementor.
  2. Click Convert, wait until the conversion is completed and check the Preview and the Fidelity Score.

Step 5 — Get the result into WordPress

Penpot is a Pro feature, so your account can use every export route:

  1. Download files or Copy from the Content tab and import by hand — see the Instructions tab for your builder.
  2. Or Export WXR and import it from Tools → Import → WordPress.
  3. Or Publish to WordPress: the plugin is installed on your site, the site is added under WP Connections (3 sites on Pro, 10 on Agency, unlimited on Studio), and the page is created as a draft. The full procedure is in the ZIP / HTML guide.
  4. On Agency and Studio, the WXR can also include custom post types and loops.

Next step

See Exporting Results and Connecting WordPress.