---
title: "Deploy Penpot Prototypes"
description: "Clickable prototypes and flows in your own Penpot"
category: "Other"
url: https://railway.com/deploy/deploy-penpot-interactive-prototypes
---

# Deploy Penpot Prototypes

Clickable prototypes and flows in your own Penpot

**[Deploy Penpot Prototypes on Railway](https://railway.com/template/deploy-penpot-interactive-prototypes)**

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

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

## Template content

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

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

### 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

### Valkey

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

### penpot-exporter

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

### 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

## Documentation

# Deploy and Host self hosted Penpot Prototypes (Open-Source Prototyping and Interaction Design) on Railway

This template deploys a self-hosted Penpot stack on Railway for building clickable prototypes, flows and overlays on your own server.

## About Hosting Penpot Prototypes open-source software on Railway (self hosted Penpot prototyping: interactions, flows, overlays, animations and shared view-mode links template)

This template runs the full Penpot stack in your own Railway project: penpot-frontend is the only public service, penpot-backend owns your Postgres database and assets volume, and penpot-exporter handles renders.

## Why Deploy Penpot Prototypes, the Figma alternative on Railway (Railway Free Trial)

Self hosting Penpot keeps your prototypes, flows and share links on your own servers instead of Figma's cloud, for roughly $10 to $25 a month at light team use.

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 Prototypes 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 Prototypes self hosting

Penpot runs as five services, so the hosting choice shapes your setup time.

| Provider | What You Get with Railway | What You Get with the Other Provider |
| --- | --- | --- |
| DigitalOcean | Penpot services, Postgres and Valkey wired together, with HTTPS on the public domain handled for you. | A bare Droplet where you write the Compose file, configure nginx and TLS, and keep the services updated yourself. |
| AWS | Linked services with volumes and variables set in one place, and no VPC or IAM setup. | Full control over networking and storage, but you assemble the VPC, load balancer and EBS volume first. |
| Hetzner | A managed deploy with the backend volume and private hostnames already configured. | Low raw server cost for the RAM Penpot needs, paid for with manual setup, patching and backups. |

Pick by how much infrastructure you want to own.

## Common Use Cases for hosted Penpot Prototypes

- **Multi-screen onboarding flow:** Place a welcome board, a sign-up board and a dashboard board, then give the welcome board a starting point to test the first-run path in View mode.
- **Modal or dropdown with overlays:** Use Open overlay on a button, pick a center preset or drag the ghost manually, and turn on Close when clicking outside.
- **Slide and push transitions:** Set Slide with a direction and the Offset effect, or use Push between tabs. Check the timing in View mode, since it is easy to misjudge in the workspace.
- **Stakeholder review link:** Open the Share prototype window and press Get link under Pages shared or Can comment. Each permission set gets its own link, so commenters never gain inspect access.
- **Fixed navbars and floating buttons:** Tick Fix when scrolling in the Constraints section, then confirm the element stays put while you scroll a long board in View mode.

## Dependencies for Penpot Prototypes Docker hosted on Railway

This template runs five services, and prototypes depend on all of them.

### Deployment Dependencies for Managed Penpot Prototypes Service (Design Tool)

- **penpot-frontend:** penpotapp/frontend:2.18.3, nginx, public on port 8080.
- **penpot-backend:** penpotapp/backend:2.18.3, private ports 6060 and 6070, volume at /opt/data/assets.
- **penpot-exporter:** penpotapp/exporter:2.18.3, headless Chromium, private port 6061.
- **Postgres 18.6:** postgres-ssl image with a volume, holding every design file.
- **Valkey 8.1.10:** password required, used for real-time notification pub/sub.

### Implementation Details for Penpot Prototypes (Using Penpot official docker image)

Set PENPOT_PUBLIC_URI to your Railway domain on penpot-frontend, and the backend and exporter reference it from there. Back up Postgres and that volume before any upgrade.

## How does Penpot Prototypes compare against other ways to prototype and share interactive designs

### Penpot Prototypes vs Figma (Figma Alternative)

- **Where Penpot wins:** Penpot is open source under MPL-2.0 and runs on your own Railway services, so design files and prototype links stay on infrastructure you control.
- **Sharing:** Each flow gets its own View mode link, and the Pages shared or Can comment permission can be set per link for outside viewers.
- **Where Figma wins:** Its prototyping is more mature, its plugin ecosystem is larger, and Dev Mode handoff is polished.

### Penpot Prototypes vs Framer (Framer Alternative)

- **Where Penpot wins:** Flows, overlays and triggers live in the design workspace, so you stay in one tool.
- **Scope:** Framer is built to publish live websites, so for a public marketing page it fits better.
- **Where Framer wins:** Responsive web publishing works out of the box, which Penpot's prototype views do not try to replace.

### Penpot Prototypes vs ProtoPie (ProtoPie Alternative)

- **Where Penpot wins:** On click and Mouse enter triggers plus Dissolve, Slide and Push animations cover everyday review needs without a separate tool.
- **Where ProtoPie wins:** It handles complex sensor-driven and logic-heavy interactions that Penpot's trigger and action set does not reach.
- **Choice:** For flows and overlays used in review, Penpot is enough; for device-level interactions, ProtoPie is the honest pick.

### Penpot Prototypes vs Adobe XD (Adobe XD Alternative)

- **Where Penpot wins:** Adobe XD is in maintenance mode with no active development, while Penpot is actively developed and open source.
- **Self hosting:** Penpot runs on your own servers through Docker, which XD cannot offer.
- **Where XD wins:** Teams already on Creative Cloud have familiar workflows, so switching costs are real.

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

Once the stack is up and you have an account, you can wire up your first clickable flow in minutes. Then follow these steps:

1. Activate the Prototype mode tab in the right sidebar and select the layer that will trigger the interaction.
2. Drag a connection from that layer to the destination board. If the origin board is not in a flow yet, Penpot creates a flow start on it.
3. Set the trigger (On click, Mouse enter, Mouse leave or After delay), then pick the action (Navigate to, Open overlay, Toggle overlay, Close overlay, Previous screen or Open URL).
4. Choose an animation (Dissolve, Slide or Push) and adjust easing and duration.
5. Add more starting points with the + button in the prototype sidebar, one per flow you want to share.
6. Press the play button at the top right, or press G then V, to launch View mode and click through the flow as a reviewer would.
7. Open the Share prototype window from the Share button, press Get link, and copy the URL.

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

Running Penpot on your own VPS works for prototyping, but you wire up Docker and HTTPS yourself. Check these steps against the official technical guide before production use.

### Clone the Repository

Grab the Penpot repository for the compose file.

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

### Install Dependencies

You need Docker with the Compose plugin and about 2 GB of RAM or more. Confirm it runs.

```bash
docker compose version
```

### Configure Environment Variables

Set your public address and a real secret key before the first start. Prototype share links are built from PENPOT_PUBLIC_URI, so use your own HTTPS domain.

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

### Start the Penpot Prototypes Application

Bring the stack up in the background, then put a reverse proxy with HTTPS in front of it.

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

## Official Pricing of Penpot Prototypes (Penpot pricing)

Penpot is free and open source under the MPL-2.0 license, so self-hosting the Penpot Prototypes stack costs you nothing in licensing.

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

Self hosting Penpot Prototypes on Railway trades a monthly bill for a bit of care and feeding. The numbers below are what we see for a small team.

### Monthly cost of self hosting Penpot Prototypes on Railway

Penpot itself is free to self host under MPL-2.0, so your spend is just Railway usage. Railway's $5 trial covers testing, but plan on the Hobby tier for real use.

### System Requirements for Hosting Penpot Prototypes on a VPS

If you move off Railway, budget at least 2 GB of RAM and Docker. The stack idles around 1.5 GB, so a 2 GB box leaves little room for spikes during exports.

## Frequently Asked Questions (FAQs)

### How do I create a flow start in Penpot Prototypes?

Drag a connection from a layer on a board that is not yet part of a flow, and Penpot creates a flow start on that board automatically.

### Which triggers and actions does Penpot support?

Triggers are On click, Mouse enter, Mouse leave and After delay, and After delay can only be set on boards.

### How do I keep a header fixed while scrolling in View mode?

Select the header layer, open the Constraints section in the Design sidebar and check "Fix when scrolling".

### Can I share a prototype link with someone outside my team and limit what they see?

Yes.

### Is there a view-only link option?

Not yet. The Penpot docs describe a view-only shared link as planned, so for now you rely on the permission options on each link.

### Can I import a prototype from Figma?

Penpot has no native Figma importer, so you need to rebuild the prototype in Penpot using its triggers, flows and overlays.


## 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-interactive-prototypes