---
title: "Deploy Penpot Dev Handoff"
description: "Inspect designs and copy CSS from a self-hosted Penpot"
category: "Other"
url: https://railway.com/deploy/deploy-penpot-developer-handoff
---

# Deploy Penpot Dev Handoff

Inspect designs and copy CSS from a self-hosted Penpot

**[Deploy Penpot Dev Handoff on Railway](https://railway.com/template/deploy-penpot-developer-handoff)**

Machine-readable deploy manifest (JSON, validated by TemplateCI): https://railway.com/deploy/deploy-penpot-developer-handoff/manifest.json

- **Creator:** onepush
- **Category:** Other

## Template content

### penpot-frontend

- **Image:** penpotapp/frontend:2.18.3@sha256:bb8abe27d53de84c95597f2c02c0e702b2779971fb0703e543f9ecf183e999f6
- **Start command:** `/bin/bash -c 'printf "upstream penpot-backend { zone penpot_backend 64k; server %s:6060 resolve; }\nupstream penpot-exporter { zone penpot_exporter 64k; server %s:6061 resolve; }\nupstream penpot-assets { zone penpot_assets 64k; server %s:6070 resolve; }\n" "$PENPOT_BACKEND_HOST" "$PENPOT_EXPORTER_HOST" "$PENPOT_BACKEND_HOST" > /etc/nginx/overrides/http.d/railway-upstreams.conf && printf "location ~ ^/internal/assets/(.*)\$ { internal; proxy_pass http://penpot-assets/\$1; proxy_hide_header Content-Type; include /etc/nginx/nginx-security-headers.conf; }\n" > /etc/nginx/overrides/server.d/railway-assets.conf && exec /bin/bash /entrypoint.sh nginx -g "daemon off;"'`
- **Health check:** /
- **Public domain:** Yes

### penpot-backend

- **Image:** penpotapp/backend:2.18.3@sha256:2df1b3440d2a82cc3571db211b4ffdfa2b89ccc910759e8d5e9387fb62971b5c
- **Start command:** `/bin/bash -c 'python3 -m http.server 6070 --bind :: --directory /opt/data/assets >/dev/null 2>&1 & exec /bin/bash run.sh'`
- **Health check:** /readyz

### penpot-exporter

- **Image:** penpotapp/exporter:2.18.3@sha256:418232d6ca3120b1c2bfde298a56a05a1f41f567cd8494deac3fe7fbc186cfbd
- **Health check:** /readyz

### Postgres https://devicons.railway.app/i/postgresql.svg

- **Image:** ghcr.io/railwayapp-templates/postgres-ssl:18.6@sha256:fcc6686a3f4f1962fe4ed77a15884553b7bd611ae1cea3204687968c5c09d517

### Valkey

- **Image:** valkey/valkey:8.1.10@sha256:640c5e62cea04b6d6f2084232651d0cc70362d31f4f805e7be94dbed6855e8f2

## Documentation

# Deploy and Host self hosted Penpot Dev Handoff (Open-Source Design Tool for Developer Handoff) on Railway

This template deploys a self-hosted Penpot stack for developer handoff. It suits product teams who want handoff without paid seats.

## About Hosting Penpot Dev Handoff open-source software on Railway (self hosted Penpot developer handoff template)

Your design files live in Postgres and an assets volume on infrastructure you control, not in a vendor's cloud.

## Why Deploy Penpot Dev Handoff, the Figma Dev Mode alternative on Railway (Railway Free Trial)

Figma Dev Mode ties developer access to paid seats and keeps files in Figma's cloud. Plan for about 1.5 GB of RAM at idle.

Railway is a singular platform to deploy your infrastructure stack. Railway will host your infrastructure so you don't have to deal with configuration, while allowing you to vertically and horizontally scale it.

By deploying Penpot Dev Handoff on Railway, you are one step closer to supporting a complete full-stack application with minimal burden. Host your servers, databases, AI agents, and more on Railway.

### Railway vs Other Hosting Providers and VPS for Penpot Dev Handoff self hosting

Penpot runs as five services, so your hosting choice sets how much setup you carry.

| Provider | What You Get with Railway | What You Get with the Other Provider |
| --- | --- | --- |
| DigitalOcean | Five services with private networking, Postgres and Valkey wired in. | A droplet you manage, with Compose, proxy, TLS and upgrades on you. |
| AWS | One deploy connecting frontend, backend, exporter, Postgres and Valkey. | Full networking control, but you build the VPC and database first. |
| Hetzner | Managed wiring and a public domain with no server to touch. | Cheap raw servers, with OS patching, Docker and backups on you. |

Pick Railway for a quick handoff view, or a VPS if you want full control.

## Common Use Cases for hosted Penpot Dev Handoff

- **Reading spacing and type from the Inspect tab:** A developer opens the file in View mode, clicks the code button, and selects a layer to read padding, font size and line height. Hover a gap to see the distance to the neighbouring layer.
- **Copying CSS for a component:** Select a button, right-click, and choose Copy as CSS to paste the rules into a stylesheet. Use the nested option when child layers matter too.
- **Exporting icons as SVG:** Pick an icon, use the Export option at the bottom of the Info panel, and grab the SVG for the build. Presets saved in the Workspace appear in View mode.
- **Sharing a view-mode link with stakeholders:** Create a Share prototype link for a product manager, no Penpot account needed. Turn on "Can inspect code" only for developers who need the Code tab.
- **Reviewing comments:** Leave comments on a board so the developer sees the question beside the layer it concerns. View mode hides anything outside a board, comments included.

## Dependencies for Penpot Dev Handoff Docker hosted on Railway

Penpot Dev Handoff runs as several Railway services, and the handoff flow needs most of them.

### Deployment Dependencies for Managed Penpot Dev Handoff Service (Design Tool)

Five services make up the stack: penpot-frontend (penpotapp/frontend:2.18.3, the only public service on port 8080), penpot-backend (penpotapp/backend:2.18.3, private port 6060), penpot-exporter (penpotapp/exporter:2.18.3, private port 6061, which renders exports), Postgres 18.6 with a volume for design files, and Valkey 8.1.10 with a password and no volume.

### Implementation Details for Penpot Dev Handoff (Using Penpot official docker image)

The template keeps upstream filesystem storage, so PENPOT_OBJECTS_STORAGE_BACKEND is fs and PENPOT_OBJECTS_STORAGE_FS_DIRECTORY points at /opt/data/assets.

## How does Penpot Dev Handoff compare against other design handoff tools

### Penpot Dev Handoff vs Figma Dev Mode (Figma Dev Mode Alternative)

- **Where Figma wins:** Dev Mode is polished and tightly woven into Figma's own file model, so the developer experience is hard to beat if your whole team already lives in Figma.
- **Where Penpot wins:** Inspect is view-only and lives in the same app, so developers can read specs and copy CSS or SVG without anyone risking an accidental edit.
- **Hosting:** Penpot Dev Handoff runs on your own Railway project, so design files stay in your Postgres rather than Figma's cloud.

### Penpot Dev Handoff vs Zeplin (Zeplin Alternative)

- **Where Zeplin wins:** Zeplin is built around handoff alone and has years of tuning for generating specs, assets and snippets from many design tools.
- **Where Penpot wins:** Penpot is a full design and prototyping tool, so the same file holds the design, the components and the handoff view without a second app.
- **Open source:** Penpot is MPL-2.0, so you can self host it and skip per-seat handoff licensing.

### Penpot Dev Handoff vs Avocode (Avocode Alternative)

- **Where Avocode wins:** Avocode focuses on extracting specs, assets and code from design files you already have, which suits teams with mixed tools.
- **Where Penpot wins:** Penpot keeps design and inspection together, so developers copy CSS and SVG straight from the file they are reviewing.
- **Caveat:** Penpot does not offer a native Figma importer, so bringing in Figma files takes a third-party route.

### Penpot Dev Handoff vs Sketch handoff (Sketch Handoff Alternative)

- **Where Sketch wins:** Sketch's built-in export and sharing flow is simple and familiar to macOS design teams.
- **Where Penpot wins:** Penpot runs in the browser, so developers on any operating system can open a view link and inspect without installing a desktop app.
- **Platform:** Sketch is a macOS desktop app on a paid subscription, while Penpot is browser-based and free to self host.

## How to use Penpot Dev Handoff (the OSS design and prototyping tool)?

Once the stack is healthy, here is the first-day handoff flow.

1. Open the file in the Workspace, then press G V (or click the play button at the top right) to enter View mode.
2. Click the code button in the middle of the navbar to open the Inspect tab.
3. Select a layer in the layers tree to read its specs in the Info tab.
4. Switch to the Code tab and copy the CSS, SVG or HTML for that layer.
5. Export assets from the Export option at the bottom of the Info panel.
6. Click Share, press "Get link", and send developers the URL. Check that "Can inspect code" is on, or outside developers won't see the Code tab.

Sample copied CSS for a button:

```css
.primary-button {
  width: 160px;
  height: 44px;
  padding: 12px 24px;
  border-radius: 8px;
  background: #2b6cb0;
  font-family: Inter;
  font-size: 16px;
  font-weight: 600;
}
```

## How to self host Penpot Dev Handoff on other VPS Services (Penpot self hosting guide)

Self hosting Penpot on a plain VPS is simple if you already use Docker. Replace your-domain with the host you choose.

### Clone the Repository

Grab the upstream repository, which ships the compose file under docker/images.

```
git clone https://github.com/penpot/penpot.git
cd penpot/docker/images
```

### Install Dependencies

You need Docker with the Compose plugin and roughly 2 GB of RAM. Open ports 80 and 443 so the reverse proxy can issue certificates.

### Configure Environment Variables

Set the public address and generate a fresh secret. Never keep the sample key, since it is publicly known.

```
export PENPOT_PUBLIC_URI=https://your-domain
export PENPOT_SECRET_KEY=$(openssl rand -hex 32)
```

Add a reverse proxy such as Caddy that terminates HTTPS for your-domain and forwards to the frontend.

### Start the Penpot Dev Handoff Application

Bring the stack up detached and confirm the backend reports healthy before you open the browser.

```
docker compose -p penpot -f docker-compose.yaml up -d
docker compose -p penpot ps
```

Then open https://your-domain and create your account. On Railway, the services, private networking, database and health checks come pre-wired for you.

## Official Pricing of Penpot Dev Handoff (Penpot pricing)

Penpot itself is free and open source under MPL-2.0, so self-hosting it costs you nothing in licence fees.

## Penpot Dev Handoff cloud vs self hosted comparison (Pricing, features, costs, and more)

Penpot's hosted cloud and a self-hosted copy give developers the same Inspect tab, so the real question is who pays for the server and who keeps the files.

### Monthly cost of self hosting Penpot Dev Handoff on Railway

Expect roughly $10-25 a month for the whole stack at light team use, mostly RAM. Check Penpot's cloud pricing before you decide.

### System Requirements for Hosting Penpot Dev Handoff on a VPS

Plan on about 1.5 GB RAM at idle for the five services, with the backend capped at a 1 GB heap and the exporter growing while it renders.

## Frequently Asked Questions (FAQs)

### Do developers need a Penpot account to inspect a design?

Not if you share a view link.

### Which code formats can developers copy from the Code tab?

You get SVG and HTML markup plus CSS styles. The docs say styles are CSS only for now, with more formats promised later.

### What units and measurements does the Info tab show?

The Info tab shows the specs for each layer, and different layer types show different properties. Hover a property to copy it, or copy all the layout properties at once.

### Can developers export assets from the handoff view?

Yes, the Export option sits at the bottom of the Info panel.

### Who controls what people can do with a shared link?

You do, through "Manage permissions." Create one link per permission set, since each link has its own settings, and warn developers before you press "Destroy link" because it kills the URL immediately.

### How is this different from Figma Dev Mode?

Figma Dev Mode is built into Figma's cloud SaaS, while Penpot Inspect runs on your own self-hosted stack and lets you control link permissions per link.


## Similar templates

- [Rocky Linux](https://railway.com/deploy/rocky-linux) — Hosted Rocky Linux 9 workspace with SSH and persistent storage. 🚀
- [Foundry Virtual Tabletop](https://railway.com/deploy/X5tR6G) — A Self-Hosted & Modern Roleplaying Platform
- [Letta Code Remote](https://railway.com/deploy/letta-code-remote) — Run a Letta Code agent 24/7. No inbound ports, just deploy.

Open this page in a browser: https://railway.com/deploy/deploy-penpot-developer-handoff