Working code to start from
The fastest way to build a Pipefy app is to start from one that already works.
HelloPipefy — React sample app
github.com/Pipefyteam/sample-app-react
HelloPipefy demonstrates how to customize Pipefy components with basic "Hello World" examples. It is the reference sample app, and the one these docs are written against.
It covers every surface in one codebase:
| Route | Demonstrates |
|---|---|
Main.jsx | PipefyApp.initCall() registering four features at once |
CardTab.jsx | A card tab reading the card with p.card() and calling the GraphQL API with p.query() |
PipeView.jsx | A pipe view, including the required PipefyApp.render() call |
Sidebar.jsx | A sidebar opened from a pipe button |
SidebarCardButton.jsx | A sidebar opened from a card button |
ModalCardButton.jsx | A modal opened from a dropdown item |
hooks/useResize.jsx | PipefyApp.resizeTo('#root') wired to a React effect |
contexts/PipefyAppContext.jsx | Initialising the SDK once and sharing the client through context |
Built with React, React Router and Vite.
Running it
git clone https://github.com/Pipefyteam/sample-app-react.git
cd sample-app-react
npm install
npm run dev
Deploying it
npm run build
Upload the contents of the resulting dist folder to any static host — Vercel, Netlify, Cloudflare Pages, GitHub Pages, S3, or your own server. Vite's static deploy guide covers the common targets.
Then register the app with the URL of the deployed manifest.json. See Introduction for the full walkthrough.
Your app must be served over HTTPS
Pipefy loads it in an iframe on an HTTPS page. To test a local build against Pipefy, expose
localhostthrough an HTTPS tunnel such asngrokorcloudflaredand register that URL.
See also
- Introduction — registering and hosting your app
- Features — the surfaces an app can add
- Apps Client SDK — the API reference