Visual Editor Basics

The PDFDraft Visual Editor is a drag-and-drop interface for creating custom PDF documents. This doc covers the essential features you need to start building professional PDFs with flexible element positioning, rotation, and scaling.

Editor Overview

The Visual Editor provides a complete workspace for designing PDF documents. You can add elements like text, images, dates, tables, and shapes, then position them precisely on the canvas using drag-and-drop controls.

What You Can Do

Add and arrange elements freely on the canvas

Drag, rotate, and scale elements to exact positions

Preview your design before exporting

Export finished documents as PDF files

Editor Layout

The editor interface is divided into four main areas, each serving a specific purpose in your workflow.

Left Sidebar

The left sidebar contains panels for adding content to your document:

Elements - Add text, images, dates, dividers, tables, and WP Data Fields

Library - Browse and insert shapes

Settings - Configure document properties

Use the search field at the top of the Elements panel to quickly find specific elements.

Main Canvas

The canvas is your primary workspace where you design your PDF. Elements appear here after you add them from the sidebar.

Canvas features:

Zoom controls - Adjust your view from the zoom slider or dropdown

Grid guides - Visual alignment aids

Selection controls - Handles for resizing and rotating elements

Top Toolbar

The toolbar provides quick access to essential actions:

Document title - Click to rename your project

Undo and Redo buttons - Reverse or reapply recent changes

Preview button - View your design before exporting

Save button - Save your current work

Settings icon - Access document-level settings

Exit icon - Return to the project list

Copy Shortcode button - Provides one click shortcode copy funcitonality for embedding and download button.

Right Sidebar

The right sidebar helps you manage document structure:

Pages tab - View pages

Layers tab - See all elements in your document and control their stacking order

Click between tabs to switch views. The Layers panel shows elements in a tree structure, making it easy to select and reorder them.

Pixel Guide

The pixel guide is a visual alignment tool that helps you position elements precisely on the canvas.

Enabling the Pixel Guide

Click the Settings icon in the left sidebar

Look for the pixel guide toggle option

Enable the toggle to activate the guide

How It Works

When enabled, the pixel guide displays measurement lines and labels showing the distance between selected elements and the canvas edges. This helps you:

Align elements to specific pixel positions

Maintain consistent spacing between elements

Verify exact dimensions and positions

Hold Alt - Shows distance between two elements when hovering

Keyboard Shortcuts

Keyboard shortcuts speed up your workflow by providing quick access to common actions.

General Actions

Save - Ctrl+S (Windows/Linux) or Cmd+S (Mac)

Undo - Ctrl+Z (Windows/Linux) or Cmd+Z (Mac)

Redo - Ctrl+Shift+Z (Windows/Linux) or Cmd+Shift+Z (Mac)

Element Manipulation

Copy - Ctrl+C (Windows/Linux) or Cmd+C (Mac)

Paste - Ctrl+V (Windows/Linux) or Cmd+V (Mac)

Duplicate - Ctrl+D (Windows/Linux) or Cmd+D (Mac)

Delete - Delete or Backspace

Zoom Controls

Zoom In - Ctrl+Plus (Windows/Linux) or Cmd+Plus (Mac)

Zoom Out - Ctrl+Minus (Windows/Linux) or Cmd+Minus (Mac)

Smooth Zoom - Hold Ctrl/Cmd and scroll with mouse wheel

Pinch Zoom - Two-finger pinch gesture on touch devices

Zoom levels are constrained to predefined steps for consistent scaling.

Next Steps

Now that you understand the editor basics, you can start building your first PDF document. Try adding elements from the sidebar, positioning them on the canvas, and using keyboard shortcuts to work more efficiently.