No native iOS/Android build steps are required. This is a web-only Next.js project.

Project setup

1. Clone and place source - Drop the source/ directory at your project root or merge it with an existing Next.js project. The app expects to run from the directory containing package.json.

2. TypeScript paths - Ensure tsconfig.json includes the @/* path alias pointing to the project root:

   {
     "compilerOptions": {
       "baseUrl": ".",
       "paths": { "@/*": ["./*"] }
     }
   }
   

3. Environment variables - Copy .env.example to .env and populate:

   DATABASE_URL=postgresql://user:pass@host:5432/papermark
   NEXTAUTH_SECRET=your-secret
   NEXTAUTH_URL=http://localhost:3000
   NEXT_PUBLIC_BASE_URL=http://localhost:3000
   AWS_ACCESS_KEY_ID=...
   AWS_SECRET_ACCESS_KEY=...
   AWS_S3_BUCKET_NAME=...
   TINYBIRD_TOKEN=...
   RESEND_API_KEY=...
   STRIPE_SECRET_KEY=...
   STRIPE_WEBHOOK_SECRET=...
   

4. Database - Run migrations and generate Prisma client:

   npx prisma generate
   npx prisma migrate deploy
   

5. Tinybird analytics - From lib/tinybird/, push datasources and endpoints:

   tb push datasources/*
   tb push endpoints/get_*
   

6. Run dev server:

   npm run dev
   

Public API

ConversationListItem

export function ConversationListItem(props: any): JSX.Element

Renders a single conversation entry in the dashboard conversation list. Delegates to the EE (Enterprise Edition) implementation in ee/features/conversations. Use this when building a conversations sidebar or inbox view that lists all document Q&A threads.

ConversationMessage

export function ConversationMessage(props: any): JSX.Element

Renders an individual message bubble within a conversation thread. Wraps the EE shared component. Use when displaying a full conversation view for a specific document link or dataroom, where viewer messages and host replies need to appear in sequence.

DeleteGroup (default export)

export default function DeleteGroup(props: {
  dataroomId: string;
  groupName: string;
  groupId: string;
}): JSX.Element

Renders a destructive action card with a modal confirmation flow for permanently removing a permission group from a dataroom. Uses useDeleteGroupModal internally. Use on the group settings page to give admins a guarded path to remove access groups.

DeleteDataroom (default export)

export default function DeleteDataroom(props: {
  dataroomId: string;
  dataroomName: string;
}): JSX.Element

Renders a danger-zone card that requires the user to type confirm delete dataroom before proceeding. Wraps useDeleteDataroomModal. Use on the dataroom settings page as the terminal destructive action.

Document preview viewers

export { PreviewExcelViewer } from "./preview-excel-viewer";
export { PreviewImageViewer } from "./preview-image-viewer";
export { PreviewPagesViewer } from "./preview-pages-viewer";
export { PreviewViewer } from "./preview-viewer";

Four viewer components for rendering document previews inline. Import from components/documents/preview-viewers. Use the appropriate viewer based on file type detected at runtime.

Folder tree components

export { SidebarFolderTree, SidebarFolderTreeSelection, ViewFolderTree }

Three tree-view components exported from components/datarooms/folders. SidebarFolderTree renders a navigation tree, SidebarFolderTreeSelection supports selection mode, and ViewFolderTree is for public/viewer-facing folder browsing.

Working examples

Scenario - Embedding a conversation thread in a document view

Display a live Q&A conversation panel alongside a shared document. Import both list and message components from the conversations barrel export.

import { ConversationListItem, ConversationMessage } from "@/components/conversations";

type Message = {
  id: string;
  body: string;
  senderName: string;
  createdAt: string;
};

type ConversationProps = {
  messages: Message[];
  onSelectConversation: (id: string) => void;
};

export function DocumentConversationPanel({ messages, onSelectConversation }: ConversationProps) {
  return (
    <aside className="w-80 border-l p-4 flex flex-col gap-2">
      {messages.map((msg) => (
        <ConversationListItem
          key={msg.id}
          message={msg}
          onClick={() => onSelectConversation(msg.id)}
        />
      ))}
    </aside>
  );
}

export function ConversationThread({ messages }: { messages: Message[] }) {
  return (
    <div className="flex flex-col gap-3 p-4">
      {messages.map((msg) => (
        <ConversationMessage key={msg.id} message={msg} />
      ))}
    </div>
  );
}

Scenario - Dataroom group management settings page

Render the delete group danger zone at the bottom of a group settings page.

import DeleteGroup from "@/components/datarooms/groups/delete-group";

export default function GroupSettingsPage({
  params,
}: {
  params: { dataroomId: string; groupId: string };
}) {
  const groupName = "Investors Q3";

  return (
    <div className="max-w-2xl mx-auto py-8 space-y-8">
      <h1 className="text-2xl font-semibold">Group Settings</h1>
      {/* ...other settings sections... */}
      <DeleteGroup
        dataroomId={params.dataroomId}
        groupId={params.groupId}
        groupName={groupName}
      />
    </div>
  );
}

Scenario - Rendering a document preview based on file type

Switch between viewer components depending on the document's MIME type or extension.

import {
  PreviewExcelViewer,
  PreviewImageViewer,
  PreviewPagesViewer,
  PreviewViewer,
} from "@/components/documents/preview-viewers";

type DocType = "pdf" | "excel" | "image" | "pages";

export function DocumentPreview({
  url,
  docType,
}: {
  url: string;
  docType: DocType;
}) {
  switch (docType) {
    case "excel":
      return <PreviewExcelViewer url={url} />;
    case "image":
      return <PreviewImageViewer url={url} />;
    case "pages":
      return <PreviewPagesViewer url={url} />;
    case "pdf":
    default:
      return <PreviewViewer url={url} />;
  }
}

Scenario - Dataroom deletion in settings

Place the dataroom delete card on the settings page with name confirmation.

import DeleteDataroom from "@/components/datarooms/settings/delete-dataroom";

export default function DataroomSettingsPage({
  dataroomId,
  dataroomName,
}: {
  dataroomId: string;
  dataroomName: string;
}) {
  return (
    <section className="space-y-6">
      <h2 className="text-xl font-semibold">Danger Zone</h2>
      <DeleteDataroom dataroomId={dataroomId} dataroomName={dataroomName} />
    </section>
  );
}

File walkthrough

• .agents/ - Skill definitions for AI coding agents covering browser automation, Postgres, Trigger.dev, and frontend design patterns.
• .github/ - GitHub Actions workflows for CI testing and deployment.
• app/ - Next.js 14 App Router: server components, layouts, and co-located API route handlers.
• components/ - All client-facing React components including conversations UI, dataroom management cards, document viewers, and shadcn/ui primitives.
• context/ - React context providers for team, document, and viewer state shared across the component tree.
• ee/ - Enterprise Edition feature implementations referenced by the components/ barrel exports. Not directly imported; consumed via the re-export wrappers.
• lib/ - Core business logic: Prisma client singleton, Tinybird analytics helpers, S3 upload utilities, email templates, and Stripe webhook handlers.
• pages/ - Next.js Pages Router: legacy API routes under pages/api/ and any remaining pages not yet migrated to App Router.
• prisma/ - schema.prisma defining all models (User, Team, Document, Link, View, Dataroom, Group, etc.) and migration history.
• public/ - Static files served at the root, including favicon and OG images.
• styles/ - globals.css with Tailwind directives and CSS variable definitions for theming.
• middleware.ts - Edge middleware handling authentication redirects and custom domain routing.
• next.config.mjs - Image domains, redirects, headers, and environment variable exposure.
• trigger.config.ts - Trigger.dev configuration for background jobs (document processing, email queues).
• tailwind.config.js - Tailwind theme extensions, content paths, and shadcn/ui plugin setup.

Common pitfalls and fixes

• DATABASE_URL not set at build time - Prisma Client generation fails silently; ensure DATABASE_URL is present in CI environment variables and in .env before running npx prisma generate.
• @/* path alias not resolved - Components use @/ imports throughout; if your host project's tsconfig.json does not include "paths": { "@/*": ["./*"] } the entire component tree will fail to compile.
• EE imports behind components/ barrel exports - ConversationListItem and ConversationMessage delegate to ee/ paths; if you remove or stub the ee/ directory these will throw at runtime with a missing module error. Keep ee/ intact even if you don't use Enterprise features.
• Tinybird token scope - The TINYBIRD_TOKEN must have both read and write permissions; a read-only token causes silent 403s on event ingestion with no thrown error in the app.
• Prisma client out of sync after schema changes - Always run npx prisma generate after editing prisma/schema.prisma; the compiled client in node_modules/@prisma/client will be stale otherwise.
• Next.js App Router + "use client" boundary - Several components in components/conversations/ and components/datarooms/ are marked "use client"; importing them in Server Components will cause a build error. Wrap them in a client boundary or import lazily with next/dynamic.

Vibe-coding prompt template

I have dropped the Papermark source code (open-source DocSend alternative) into
my project under the `source/` directory. I also have USAGE.md at the project
root that documents the real exports and setup steps.

The upstream package is `user@example.com` (Next.js 14 full-stack app).

Please help me integrate Papermark into my existing Next.js project step by step:

1. Read USAGE.md and source/tsconfig.json to understand path aliases and
   project structure.
2. Merge source/prisma/schema.prisma into my existing schema, resolving any
   model name conflicts.
3. Set up the required environment variables listed in USAGE.md.
4. Wire the `@/*` path alias in my tsconfig.json to point to the source root.
5. Import and render the document preview viewers from
   `source/components/documents/preview-viewers` in my document detail page,
   switching on file type.
6. Add the DeleteDataroom component from
   `source/components/datarooms/settings/delete-dataroom` to my dataroom
   settings page.
7. Add the ConversationListItem and ConversationMessage components from
   `source/components/conversations` to my document view page.
8. Ensure no Server Component imports a `"use client"` component directly;
   wrap where needed with next/dynamic.
9. Run `npx prisma generate` and `npm run dev` and confirm the app starts
   without errors.

Show me each file change with the full updated file content.

License and credit

Papermark is licensed under the AGPLv3 license. See source/LICENSE for the full text. The upstream project is maintained by the Papermark team at https://www.papermark.com and the source is available at https://github.com/mfts/papermark.

This product’s unique contribution is clean room implementation of valuable code block into AVCP compatible standard.

전체 설치 가이드와 연동 프롬프트는 구매 후 열람할 수 있습니다.