PDF AcroForm EditorOpen Editor

Getting Started with PDF AcroForm Editor

This tutorial walks you through uploading your first PDF, adding a form field, and exporting the modified document. By the end, you’ll understand the core workflow and be ready to build complex forms.

What you’ll need

  • A modern web browser (Chrome, Firefox, Safari, Edge)
  • A PDF file — any PDF will work, but one with existing form fields is more interesting

No installation required for the hosted version. If running locally, see the README for setup.

Step 1: Upload a PDF

Click Upload PDF in the top toolbar, or drag and drop a PDF onto the canvas.

The PDF page renders in the center. If the PDF already has AcroForm fields, they appear as outlined boxes on the page.

┌─────────────────────────────────────────┐
│  [Upload PDF]          [Zoom: 100%]     │
├────┬────────────────────────────┬───────┤
│    │                            │       │
│ 📄 │                            │       │
│ 📄 │    YOUR PDF PAGE           │ Props │
│    │                            │ Panel │
│    │    [Existing Field]        │       │
│    │                            │       │
└────┴────────────────────────────┴───────┘

You’ll see:

  • Left sidebar: Page thumbnails and a list of existing fields
  • Canvas: The PDF page with field overlays
  • Right sidebar: Properties panel (empty until you select something)

Step 2: Add a text field

In the left sidebar, click the Tools tab, then click the Text Field tool (or press T).

Your cursor changes to a crosshair. Click and drag on the PDF page where you want the field. Release to set the size.

A new text field appears with a blue outline and resize handles.

What happened: The editor created a new field in its internal model. The field is positioned in PDF coordinates but displayed as a DOM overlay on top of the rendered page.

Step 3: Edit the field properties

With the text field selected, look at the right sidebar. The Properties Panel shows contextual sections:

  1. Position & Size — X, Y, width, height (in points or millimeters)
  2. Font & Text — Font family, size, color, alignment
  3. Behavior — Read-only toggle, Required toggle, Default value

Try changing the font size to 14 and the alignment to Center.

The field updates immediately on the canvas.

Step 4: Smart duplicate and align

With the first text field selected, hold Alt and drag it downward. The field duplicates automatically with a small offset — this is smart duplicate.

Do it once more to create a third field. Now you have three fields in a column.

Select all three fields: click the first field, hold Shift and click the third field, or use Ctrl/Cmd + click to toggle individual fields.

The Align & Distribute section appears in the right sidebar. Click Align Left.

All three fields snap to align with the leftmost field’s left edge.

Step 5: Assign a signer and use the command palette

In the right sidebar, find the Signer section. Click the dropdown and select Create New Signer.

Enter:

  • Role: buyer
  • Display Name: Buyer
  • Color: Red

The field’s outline changes to red, indicating it belongs to the Buyer signer.

Now try Command+K (or Ctrl/Cmd + K). A fuzzy search palette appears at the top of the screen. Type the name of any field to jump to it instantly — no scrolling required.

Step 6: Preview and export

Before exporting, click the Preview Mode button in the toolbar (or press P). The field overlays disappear and you see exactly what the final PDF will look like. Toggle back to edit mode with the same button.

Click Download PDF in the top toolbar. Choose an export option:

  • Editable PDF (default) — standard AcroForms that open and fill in any reader. Use this when uploading to e-signature platforms like DocuSign or HelloSign, or when recipients need to enter data.
  • Flattened PDF — fields become static visual content; no editing. Use this for print, final distribution, or when sending a completed document that should not be altered.

The browser downloads a new PDF with your form fields embedded as standard AcroForms. Open it in any PDF reader — the fields are editable and the values persist.

Step 7: Save your project and explore history

Click Download JSON to save the project file.

This JSON contains everything: field positions, styles, signers, groups, and naming conventions. You can close the browser, come back later, upload the same PDF, and load this JSON to resume exactly where you left off.

Visual Undo Timeline: Look at the toolbar next to the Undo/Redo buttons. Click the clock icon to open the visual history. Every action you took is listed with a timestamp. Click any entry to jump back to that exact state. This is not just undo — it’s time travel.

What you built

You now have a modified PDF with three aligned text fields assigned to a signer. You understand:

  • How to upload and navigate PDFs
  • How to add, duplicate, and configure fields
  • How to use alignment tools
  • How to assign signers
  • How to preview the final output
  • How to export with presets
  • How to use the command palette and visual history
  • How to save and resume projects

Next steps

Browse the Documentation for architecture notes, naming conventions, and the full data model reference.