mfts/papermark

Papermark is the open-source DocSend alternative with built-in analytics and custom domains.

Papermark

The open-source DocSend alternative.

papermark.io

Papermark is the open-source document sharing alternative to DocSend with built-in analytics and custom domains.

Features

• Shareable Links: Share your document securely by sending a custom link
• Custom Branding: Add a custom domain and your own branding
• Analytics: Get insights via document tracking and soon page-by-page analytics
• Self-hosted, open-source: Host it yourself and hack on it

Demo

Tech Stack

• Next.js – Framework
• Typescript – Language
• Tailwind – CSS
• shadcn/ui - UI Components
• Prisma - ORM
• PostgreSQL - Database
• NextAuth.js – Authentication
• Tinybird – Analytics
• Resend – Email
• Stripe – Payments
• Vercel – Hosting

Getting Started

Prerequisites

Here's what you need to be able to run Papermark:

• Node.js (version >= 18)
• PostgreSQL Database
• Blob storage (currently AWS S3 or Vercel Blob)
• Resend (for sending emails)

1. Clone the repository

git clone https://github.com/mfts/papermark.git
cd papermark

2. Install npm dependencies

npm install

3. Copy the environment variables to .env and change the values

cp .env.example .env

4. Initialize the database

npx prisma generate
npx prisma migrate deploy

5. Run the dev server

npm run dev

6. Open the app in your browser

Visit http://localhost:3000 in your browser.

Tinybird instructions

To prepare the Tinybird database, follow these steps:

0. We use pipenv to manage my Python dependencies. If you don't have it installed, you can install it using the following command:

   pkgx pipenv

1. Download the Tinybird CLI from here and install it on your system.
2. After authenticating with the Tinybird CLI, navigate to the lib/tinybird directory:

   cd lib/tinybird

3. Push the necessary datasources using the following command:

   tb push datasources/*
   tb push endpoints/get_*

4. Don't forget to set the TINYBIRD_TOKEN with the appropriate rights in your .env file.

Updating Tinybird

pipenv shell
## start: pkgx-specific
cd ..
cd papermark
## end: pkgx-specific
pipenv update tinybird-cli

Contributing

Papermark is an open-source project and we welcome contributions from the community.

If you'd like to contribute, please fork the repository and make changes as you'd like. Pull requests are warmly welcome.

Our Contributors ✨

papermark's Issues

Domain set up as a part of onboarding

To make more people connect domains if they want, as a part of onboarding

1. Upload document
2. Generate a link with a custom domain
3. Set up domain
4. Use your link

It definitely can be optional for users, so they can easily skip it.

Improvements to document viewer

Main idea: split document by page into individual images

Currently the document viewer uses react-pdf to render the PDF as a canvas element. This has some performance impediments on very large files.

The web is better adept at handling images than any other document type (except text).
By splitting the document into pages and saving each page as an image, the performance will improve drastically.

• enables different viewing perspectives (full screen, vertical scrolling, horizontal scrolling, multi-page view)

It is not clear for beginners to replicate the production environment locally. Can improve the documentation of it!

I am writing to provide feedback and request an improvement in the documentation of the Papermark project regarding the process of replicating the production environment locally.

As a beginner trying to set up and run Papermark on my local machine, I encountered some difficulties in following the existing documentation. The steps provided were not detailed enough, assuming prior knowledge that may not be possessed by all users.

To ensure a smoother onboarding experience for new contributors, I feel that I can chip in and make the documentation more concise and easy to consume.

Here's how I plan to achieve it:

Provide Clearer Cloning Instructions: The documentation should include explicit instructions on how to clone the Papermark repository from GitHub, including the use of version control tools such as Git.

Elaborate on Dependency Installation: The instructions should provide additional information about Node.js and how to install it if not already present on the user's machine. Additionally, a clear explanation of the dependencies required by Papermark and how to install them using npm should be included.

Enhance Database Configuration Steps: The process of configuring the database should be more explicit, including details on setting up SQLite and specifying the necessary path for the database file.

Provide Step-by-Step Migration Instructions: The documentation should include step-by-step instructions on how to run the required database migrations, ensuring that users understand how to set up the database schema correctly.

Clarify Application Startup Process: Clear and concise instructions on how to start the Papermark application locally should be provided, including the specific command to use and the expected URL for accessing the application.

By making these improvements, the documentation will become more accessible to beginners, enabling them to replicate the production environment of Papermark on their local machines more effectively.

Looking forward to working on this issue!

File not found Error

Awesome oss project.

So i was trying to do a quick run through of the product.

I was able to do the following:

1. I was able to upload a file
2. Generate a shareable link

But when i visit that link i always get a not found screen.

login failed after use vercel deployments

hi, i login is success by google when it was in local, but i can't login successful that after vercel deployments, i clicked the button，but it cann‘t normal jump page, mybe it cann't get google info,
i need your help, thanks！

Edit link to uploaded file

Why I can not edit my link when uploaded? I wanna change name for it at least.

Payment for viewing a document

• Enable payment to view a document

Similar to payment for scheduling a meeting or collecting payment via a form.

Embeddable React components

• Ready-to-use components to embed and integrate
• Components to embed document link in your web app
• Components to add a "dropbox" (#62) to your web app

Vercel Blob alternative when developing locally?

Vercel Blob is in private beta and is not open to everyone.

It is a restriction when you want to contribute and you don't have access to it.

Is there a way to store documents locally without the need for Vercel blob?

Link for multiple documents

Currently one link corresponds to one document. Sometimes you need to share 2 or more documents and you may not want to send 2 or more links in one message.

Team management

Obvious one!

Manage your account and documents with your team <3

[info] vercel/storage blob private beta is adding folks from the waitlist

In case you are not on the beta waitlist for vercel/blob yet, make sure you get on it from your account: https://vercel.com/storage/blob

The team is reviewing the waitlist this week and letting more folks in.

---

If you don't have access after this week, please drop your vercel team ID in the message below or DM me.

Document Feedback

Enable feedback on documents

• 👍/👎
• text feedback
• other media

Add dashboard with latests stats

Currently, when I get back into the tool, I see my documents, and have a feeling that 0 activity happening.

So would be good to see:

• latest activity on my docs
• viewers
• document
• links
  All in one place

Vercel deploy link error

Clicking on the Vercel deploy badge (link) returns an error (404)

Need of sentry integration : Lack of visibility for critical application errors

I think it's a must to do integration for monitoring the papermark in future. 😀

Self-hosting build error: "middleware references unsupported modules"

Hey! Killer product. I'm in the process of self-hosting at doc.rubric.sh:

• Forked the repo (Deploy on Vercel button link is malformed with spaces or something)
• Connected Vercel Blob and Postgres (which auto-populated 3 env vars — could save some time for those following README)
• Set up a Google OAuth 2.0 client (steps would be nice in README)
• Connected Resend

Only seeing one build error:

Error: The Edge Function "middleware" is referencing unsupported modules:
--
22:42:22.596 | - middleware.js: @/lib/middleware/app, @/lib/middleware/domain
22:42:22.596 | - next: stream, fs, url, path

Where did I go wrong? Any help is appreciated, and keep up the great work!

Additional login method

• Login with email magic link
• Login with passkeys

Can add a share feature to the link that is created.

I have been going through Papermark and right after creating the link. It might be good if we give options to share the link directly embedded as a Tweet.

We can start with a Tweet first, then expand the sharing horizons as the need arises.

I can work on this!

Integrations

This is an obvious one, we want to integrate both on the incoming and outgoing side.

Incoming:
Existing document storage

• google drive
• box
• dropbox

Outgoing:

• Zapier
• n8n
• make
• CRM tools (affinity, hubspot, ... salesforce)

Full customization

Make sure the recipient of a document link has a 100% customized branded experience including custom domain, custom logo, etc. Make it possible to remove any mention of Papermark.

Notifications

This is a big topic! Lots of possible notifications but need to choose wisely without overwhelming the user.

• when an document was viewed
• document uploaded reminder
• 30 day sharing summary

More suggestions are welcomed

REST API

• Upload documents (and delete)
• Create link (and delete)
• Send link
• Retrieve views

Suggestions for additional functionality that an API should perform are welcomed

Duplicate classnames

Function classNames in lib > utils.ts does not handle duplicate classNames.

Eg:

function Example() {
   const [showing, setShowing] = useState(false)

   return (
      <p 
         className={classNames(
         showing 
         ? "text-red-400 py-10"
         : "text-blue-500",
         "py-10"
         )}
      >
         Showing: {String(showing)}
      </p>
}

The code above would give the following output with py-10 appearing twice

<p class="text-blue-400 py-10 py-10">...</p>

Not able to view the PNG files of around 170 Kb .

I am facing this issue. is this a bug or something temporary.

How to use alternative storage solutions

Hi, I want to know if there is a way to use RDS and S3 instead of vercel?

Multiple document versions

It happens that you send a document with an error on page 3. The link is already on its way to the recipient. Don't you wish to correct that mistake without letting your recipient know.

That's where document versions come in. Change the document without changing the link.

Login/Sign up (alternative to google)

I think it would be valuable to have Google sign up as not everyone wouls like to sign up with google.

Export analytics data

Export analytics per document and per account.

Data room

Natural extension of one document, one link.

For those who don't know what a data room is, think of it like a Linktree for documents: one link gives you access to many curated documents.

This is the advanced version of #63

413 ERROR on upload deck

Tried testing https://www.papermark.io and when I added a deck to upload it fails with not much notification. Opened inspection tools and see a failed call to upload api.

Ability to add custom name for documents uploaded and to delete docs

I would like to add functionality to customize the document name while uploading.
Right now the default name is picked.
I was trying with some gibberish image files and could not identify them after uploading 3,4 files as all had random strings as names.

Also, the ability to delete a file feels mandatory to me.

Send emails from within Papermark

Use cases:

• forward document to the correct point of contact
• invite recipient to view a document

This can even be whitelisted using the user's domain via Resend's add-domain API

Drag and drop file upload

Would be convenient to have a drag and drop file upload feature

This is not possible with the current implementation.

add error message if user tries to upload an unsupported / too big file

URL parameters

Enable url query parameters to make use cases like campaign links easy.

For example, [email protected] will bypass the email gate window prior to viewing the document.

Other query parameters:

• page number: to direct people to the exact page you want them to view

Fix description typo

I believe there's a typo at Description part of the add new file page.

I think the right thing should be,
"This description will help you find your document later."

Replace Loading text with Loading Icon

In the application there are 3 places where text "Loading..." is rendered however we already have a loading Icon in the application in the form of "LoadingSpinner".

While viewing a document

After clicking on a document in documents page:

These Loading text should be replaced with the loading icon.

Add the table to see each user activity on the link

User activity plus the on each slide time. So it is important to see time for each slide

Papermark Inbox

• Allows users to save links to their Papermark account (similar to Netflix download for offline viewing)
• Never lose a Papermark link that was sent to you

Summarize documents

In general, this enables the recipient to interact with the document in a way other than just viewing it. We intend to leverage LLMs to achieve this.

• summarize document into a single page of text
• for pitchdecks, turn decks into an investment memo
• ask questions to a document

More suggestions welcome :)

Missing Prisma migrations

Issue

• Deploying on Vercel showed "no pending migrations" in build step
• Self-hosted instance hung at missing tables. Confirmed no tables in project > Storage > Postgres.
• Running npx prisma migrate dev (baseline script) manually generated the tables, then the app worked as expected

Solution

• Run npx prisma migrate dev and commit the initial migration
• Add prisma migrate deploy to vercel-build command in package.json, as per the Prisma Next.js example project

Will open a PR shortly!

Can control access by email domains

Papermark can control access by email domains

1. Allowlist

• User can add email addresses or domains to allow access to a document only to the users. e.g. [email protected], *@baz.com
• User has to authenticate the their email address by clicking a link sent to the email. The email address should be [email protected] or *@baz.com.
• User can open the link in the email to access a document.

2. Denylist

• User can add email addresses or domains to prevent access to a document only to the users.. e.g. [email protected], *@baz.com
• User has to authenticate the their email address by clicking a link sent to the email. The email that embedded the the link should not be sent to [email protected] or *@baz.com.
• User who are not [email protected] or *@baz.com can open the link in the email to access a document.

Add an ability to download the document

Currently when someone accesses the the link then, they can only view the document. It would be nice if the person can download the document as well.

Disable individual visits from total document / link statistics

Configure document / link analytics to select / deselect individual visits or links which are counting towards the total.

Reported by a user, if one visitor stays super long, it messes up the overall analytics

Deep dive into the code behind Papermark

https://youtu.be/JGN2LRdx4gE

Papermark Dropbox (the irony 😂)

We imagine a "dropbox" (similar to the drag-n-drop component for uploading documents) that can be located on your own website, notion page, or anywhere else to collect documents. The files will be stored straight in your Papermark Inbox and the uploader will receive a notification if the document has been viewed.

Use cases:

• non-profit organization wants to collect donation proposals
• venture capital firm that accepts cold pitch decks for smaller fast investment (NFX FAST)
• event organization that sends out a call for papers
• accelerator that is open for applications
• and more

Requires:

• react components for implementing dropbox in other project
• Papermark Public API

Bland 404 error page

The error page is quite bland and doesn't have a link to redirect users to the homepage.

Would be great to have a dedicated 404 error page.

Thanks.

New document file types

• ppt/pptx
• doc/docx

If you'd like to see other file types, please let us know below.

Bug: After editing the link in the documents page, the entire screen becomes unclickable

Here are the steps to replicate the issue:

1. Log in and select any document from the Documents page.
2. Scroll to the bottom and locate the "All links" table. Click on the last column button (represented by three dots, ...).
3. A dropdown menu will appear; choose the "Edit Link" option.
4. Edit the link as needed and click on the "Update" button.
5. Return to the Documents page; it will now be unclickable.

20231014232601.mp4