How to add the SimplePDF editor to your Next.js App
![Profile picture of Benjamin André-Micolon](https://cdn.simplepdf.eu/simple-pdf/assets/benjamin_andre-micolon_simplepdf_founder.png)
Next.js has become a standard for developing React applications. In fact, SimplePDF is powered by Next.js!
So what better choice than Next.js to show you how to embed the SimplePDF editor into your own app.
You can skip this tutorial and get straight to the code that is available in the SimplePDF embed Github repository.
Step 1: Setting up our project
If you already have a Next.js or React app running, you can go straight to the Step 2: Adding SimplePDF Embed dependency to our project or Step 3: Adding the SimplePDF editor to our Next.js app
Let's start by using the Next.js CLI tool to interactively set up our project.
Run the following command in your terminal of choice and follow the steps.
npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app
- Let's choose a name for our project:
? What is your project named? › simple-pdf-react-embed-example
- At SimplePDF we really like Typescript, so we'll say "yes!" to the next step.
This is not a requirement, so no worries if you're not familiar with Typescript!
? Would you like to use TypeScript with this project? › No / Yes
- Let's also use ESLint
Likewise, ESLint is not a requirement, so if you're not familiar with it, just say no
Would you like to use ESLint with this project? › No / Yes
- Time for our computer to do some work: fetching and installing the necessary dependencies
We're using yarn, so if you use npm for example, the message will be slightly different
info No lockfile found.
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[#####################################-------------------------------------------------------] 105/263
- Once successful, you should be greeted with this message:
Success! Created simple-pdf-react-embed-example at /Users/bendersej/workspace/widget-simplepdf/react/simple-pdf-react-embed-example
- Let's navigate to the folder
cd simple-pdf-react-embed-example/
- And start our project!
yarn dev
# or
npm dev
- If everything went well, you should now see the following:
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 529 ms (165 modules)
Our server is up and running at the following URL: http://localhost:3000
This is what you should see
There might be some small differences depending on when you're following this tutorial
Step 2: Adding SimplePDF Embed dependency to our project
Prerequisite: a React (Next.js) app running locally - if you followed the previous step, you're all good!
Confirming that we are at the right location: running the following command
ls
should list these files:
README.md next.config.js package.json public tsconfig.json yarn.lock
next-env.d.ts node_modules pages styles yarn-error.log
Let's start by adding @simplepdf/react-embed-pdf to our project
- Install
@simplepdf/react-embed-pdf
yarn add @simplepdf/react-embed-pdf
# or
npm install @simplepdf/react-embed-pdf
Once installed, you should see the following message:
We're using yarn, so if you use npm for example, the message will be slightly different
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ @simplepdf/react-embed-pdf@1.3.0
info All dependencies
└─ @simplepdf/react-embed-pdf@1.3.0
✨ Done in 5.91s.
Time to write some React code!
Step 3: Adding the SimplePDF editor to our Next.js app
In this step we will learn how to add the SimplePDF editor component: this component will allow us to open any PDFs from within our application.
Let's start by opening the code of our app in our code editor of choice - at SimplePDF we really like VScode
- Let's clean up the room a bit by removing everything inside
main
and update the page title:
The code should now look like this:
import Head from 'next/head'
import { Inter } from '@next/font/google'
import styles from '../styles/Home.module.css'
const inter = Inter({ subsets: ['latin'] })
export default function Home() {
return (
<>
<Head>
<title>SimplePDF Embed Example</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
</main>
</>
)
}
And our browser should display the following page: nothing!
- Let's import the
EmbedPDF
component at the top of our file:
import { EmbedPDF } from '@simplepdf/react-embed-pdf';
- And add it to our code:
Note that you only need one child inside EmbedPDF
. It can be any HTML element: a
, div
, button
...
<EmbedPDF>
<div className={inter.className}>
<div className={styles.card}>Open SimplePDF!</div>
</div>
</EmbedPDF>
The entire code should look as follows:
import Head from 'next/head'
import { Inter } from '@next/font/google'
import styles from '../styles/Home.module.css'
import { EmbedPDF } from '@simplepdf/react-embed-pdf';
const inter = Inter({ subsets: ['latin'] })
export default function Home() {
return (
<>
<Head>
<title>SimplePDF Embed Example</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<EmbedPDF>
<div className={inter.className}>
<div className={styles.card}>Open SimplePDF!</div>
</div>
</EmbedPDF>
</main>
</>
)
}
And our browser should display the following: a tiny "Open SimplePDF!" button!
Step 4: What's next?
SimplePDF Embed is really powerful and there's more for you to discover:
- Open a specific document by specifying the URL of that document
- Receive events whenever the document is loaded and the submission is sent
- Add your own branding
You can learn more about all of this in the documentation on Github.
We hope that you enjoyed this tutorial!
If you have any question or comment, feel free to let us know using the feedback button in bottom right side of your screen
You may also be interested in
- Customize the editor and add your own branding
- Customize the submission confirmation
- Get email notifications on PDF form submissions
- Configure your own S3 bucket for PDF form submissions
- Configure Webhooks to get notified of new PDF form submissions
- Save the PDF submissions to your Bubble Database using Bubble workflows
- Connect SimplePDF with Activepieces to automate your PDF forms processing
- Use the Robocorp integration to leverage AI in your IDP workflow
- View and edit PDF in Excalidraw