Add a “Get design PDF” Button to Beefree SDK

Learn how to enable end users to export their designs as PDFs by adding a simple button to your UI.

Why Export PDFs?

Sometimes stakeholders don’t need an editable template—they need a shareable, printable PDF for approvals, legal archiving, or offline review. In this recipe, you’ll add a button that end users can click to generate a PDF of their design. It works by:

Converting the design's JSON to HTML as a first step. This is important, because the /pdf endpoint requires three fields in the POST request and HTML is one of them.
Completing the remaining two fields page_size and page_orientation, and sending the POST request.
Returning a URL to the generated PDF that end users can click to open or download.

Project Map: Where to Look in the Sample Project

This recipe is based on the working example in this GitHub repository: beefree-sdk-csapi-simple-integration. Clone it and explore these files:

File

Purpose

What You’ll Learn

proxy-server.js

Node proxy server

How to keep secrets server-side, perform LoginV2 auth, and forward export requests (including /v1/message/pdf) to the CS API, then pass the JSON response back.

vite.config.ts

Dev proxy setup

How to proxy /proxy and /v1 calls from the browser to your Node server (no CORS headaches).

src/BeefreeEditor.tsx

Editor wrapper

How to initialize the SDK, enable trackChanges, and keep live JSON in React state.

src/App.tsx

Main app logic

How to wire the “Get design PDF” button, call /v1/message/pdf, and present the returned body.url.

src/App.tsx

Result display

A simple pattern to show an Open PDF link from the returned URL.

Note: Use this working project and its core concepts to implement the same functionality in your own host application.

Data Flow Diagram

+----------------+        +----------------+        +---------------------+
|                | JSON   |                | HTML   |                     |
|  Beefree SDK   |  →     |   Node Proxy   |  →     |  Content Services   |
|   (Frontend)   |        | (proxy-server) |        |   API (/pdf)        |
|                |        |                |        |                     |
+----------------+        +----------------+        +---------------------+
       |                           |                          |
       |                           |                          v
       |                           |                   JSON response with URL
       |                           |                          |
       v                           v                          |
+-------------------------------------------------------------+
|                  Frontend UI (React App)                    |
| "Get design HTML" → "Get design PDF" → show "Open PDF" link |
+-------------------------------------------------------------+

Why this flow? Secrets (Client Secret, Client ID, and Content Services API token) stay server-side, and the frontend focuses on UI and displaying the PDF URL.

Prerequisites

Node.js 20+
Beefree SDK credentials: BEE_CLIENT_ID, BEE_CLIENT_SECRET
Content Services API token (server-side only)

Create .env (see the repository’s example in the README.md file):

BEE_CLIENT_ID=your-client-id
BEE_CLIENT_SECRET=your-client-secret
CS_API_TOKEN=your-csapi-token-or-"Bearer ..."
PORT=3001

Important: Add .env to .gitignore so you don’t commit secrets.

Step 1: Clone the Project

git clone https://github.com/BeefreeSDK/beefree-sdk-csapi-simple-integration.git
cd beefree-sdk-csapi-simple-integration
npm install

Step 2: Proxy Server (LoginV2 and PDF Forwarder)

Reference: proxy-server.js

Performs LoginV2 on the server (see LoginV2 docs).
Forwards the required design HTML to the Content Services API /pdf endpoint.
Returns JSON (e.g., { body: { url: "..." } }) back to the browser.

Example code snippet

// proxy-server.js (excerpt)
// POST /v1/message/pdf → forwards to CS API /pdf and returns JSON (with body.url)
app.post('/v1/message/pdf', async (req, res) => {
  const response = await axios.post(
    'https://api.getbee.io/v1/message/pdf',
    req.body, // { html, page_size, page_orientation, ... }
    { headers: { Authorization: `Bearer ${process.env.CS_API_TOKEN}` } }
  );
  res.status(200).json(response.data); // pass through the JSON with body.url
});

Note: Keep secrets on the server—never expose your Client Secret or Content Services API key to the browser.

Step 3: Vite Dev Proxy (Frontend → Proxy)

Reference: vite.config.ts

// vite.config.ts (excerpt)
server: {
  proxy: {
    '/v1':   { target: 'http://localhost:3001', changeOrigin: true },
    '/proxy':{ target: 'http://localhost:3001', changeOrigin: true },
  },
},

Note: This allows you to use fetch('/v1/...') in the sample project without running into CORS issues.

Step 4: Initialize Beefree SDK & Track JSON

Reference: src/BeefreeEditor.tsx

// BeefreeEditor.tsx (excerpt)
const beeConfig = {
  container: 'beefree-editor',
  trackChanges: true,
  onChange(json: unknown) {
    onChangeJson(json); // keep React state in sync with the builder
  },
};

Note: You’ll use the latest JSON to produce HTML (for PDF export) and any other export flows.

Step 5: Add the “Get design PDF” Button

Reference: src/App.tsx

PDF requires HTML first. Follow the same UX pattern used in the repository:

First, generate HTML (for example, through your Get design HTML button), and cache it.
Then, when the user clicks Get design PDF, send that cached HTML to /v1/message/pdf.

Core UI logic (guard → request → show link):

// App.tsx
const lastHtmlRef = useRef<string | undefined>(undefined);

// after HTML export completes somewhere else:
// lastHtmlRef.current = html;

async function onGetPdf() {
  if (!lastHtmlRef.current) {
    alert('Convert template to HTML first'); // same UX as the sample repo
    return;
  }

  const res = await fetch('/v1/message/pdf', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      html: lastHtmlRef.current,  // required by the PDF endpoint
      page_size: 'Full',          // example—adjust per your needs
      page_orientation: 'landscape'
    }),
  });

  if (!res.ok) return alert('Failed to convert to PDF');

  const data = await res.json();          // { body: { url: "..." } }
  setPdfUrl(data?.body?.url || undefined);
}

Hint: Prefer a two-step UX (HTML first → PDF), or compute HTML on demand inside onGetPdf by calling your /v1/message/html endpoint first.

Step 6: Display the PDF Result

Reference: inline in src/App.tsx or a tiny PdfResult component

function PdfResult({ url }: { url?: string }) {
  if (!url) return <div>Export results will appear here.</div>;
  return (
    <div>
      <a href={url} target="_blank" rel="noreferrer">Open PDF</a>
      <div style={{ marginTop: 8 }}>PDF created. Use the link above to view or download.</div>
    </div>
  );
}

Note: The Content Services API hosts the generated PDF and returns a URL you can open/download.

Running the Sample

From the project root:

npm run dev:proxy   # start the Node proxy (LoginV2 + CS API forwarding)
npm run dev         # start the React app

Open http://localhost:3000, build a design, click Get design HTML first, then Get design PDF.

Troubleshooting

“Convert template to HTML first” The PDF endpoint requires HTML. Export HTML first (or compute it on demand).
401/403 from CS API Check CS_API_TOKEN. Ensure it’s correctly set and includes the Bearer prefix.
Orientation/size not as expected Adjust page_size, page_orientation, margins, etc., per the Export API options.

Learn More

Working example: beefree-sdk-csapi-simple-integration
API docs (Export → PDF): https://docs.beefree.io/beefree-sdk/apis/content-services-api/export#pdf

Key Takeaway

API docs tell you what the /pdf endpoint does. This recipe shows you how it’s implemented end-to-end as a button in a real app:

Secure proxy (proxy-server.js) with server-side LoginV2
Frontend dev proxy (vite.config.ts)
Live JSON tracking (BeefreeEditor.tsx)
“Get design PDF” button (App.tsx) with HTML-first guard
Open PDF link from the returned body.url

Clone the project, explore the files, and reuse these core concepts in your own host application so your users can export PDFs with a single click.

PreviousAdd a “Get design HTML” Button to Beefree SDK NextAdd a “Get design Thumbnail image” Button to Beefree SDK

Last updated 1 day ago

Was this helpful?