Paste Prototyping Kit

Quick deploy:

Deploy to Codesandbox

Deploy to Vercel

Deploy to Netlify

Use this kit to create realistic prototypes using Paste and validate your designs. Read below for a guide to getting started.

Getting set up (for designers):

Open in Codesandbox to start editing your prototype in the browser

If you're logged into Codesandbox, click the blue "fork" button to start editing the prototype.

Getting set up (for developers):

After forking and cloning the repo to your local machine, run

npm install
# or
yarn install

then, run the development server

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the prototype.

To run Cypress tests, run:

npm run cypress
# or
yarn cypress

To run Jest tests, run:

npm run jest
# or
yarn jest

Start editing the prototype:

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

If you'd like a more detailed tutorial, follow the steps on the landing page to familiarize yourself with the Prototyping Kit and Paste.

Share your prototype:

Deploy your prototype to test with customers and validate your designs. Use either of the tools below.

Deploy to Vercel

Deploy to Netlify

To run Cypress tests, run: yarn cypress

Learn More:

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• You can also check out the Next.js GitHub repository - your feedback and contributions are welcome!

To learn more about deploying on vercel, take a look at the following resources:

• Vercel Platform - from the creators of Next.js.
• Next.js deployment documentation