PDF Architect is a powerful, visual web application designed to build complex, hyperlinked PDF documents. It is specifically engineered for creating Digital Planners, Interactive Notebooks, and e-Ink Tablet documents (reMarkable, Boox, Supernote, iPad) without manually designing hundreds of individual pages.
Core Philosophy: Separate Structure (Nodes) from Design (Templates). Define a "Day View" template once, and apply it to 365 nodes instantly.
- Canvas: Drag-and-drop interface with alignment snapping and grid support.
- Elements: Rectangles, Ellipses, Triangles, Lines, Text, and Dynamic Grids.
- Styling: Full control over stroke, fill, opacity, patterns (dots/lines), and typography.
- Google Fonts: Integrated support for handwriting fonts (Caveat, Dancing Script, Patrick Hand) and serifs (Merriweather, Playfair).
- Node System: Pages are organized in a tree structure (Year -> Quarter -> Month -> Week -> Day).
- Inheritance: Child nodes inherit context from parents, allowing for smart navigation.
- References: Create "pointers" to other nodes. For example, a "Week View" can contain references to 7 existing "Day" nodes, allowing you to link directly to them without duplicating data.
Stop manually wiring links. PDF Architect calculates links dynamically based on the hierarchy:
- Parent/Ancestor: Link to the containing folder or a specific level up.
- Sibling: Link to "Next Day" or "Previous Page" automatically.
- Child Index: Link to the "1st Child" (e.g., January) of a node.
- Referrer: Link back to the page that referenced the current page.
The most powerful tool for planner creation.
- Auto-Population: Grids automatically render children of a node.
- Traversals: A grid on a "Year" page can drill down:
Quarters -> Months. - Calculated Offsets: Create accurate monthly calendars by offsetting the start based on the day of the week (e.g., skip 3 cells if the 1st is a Wednesday).
- Hierarchy Generator: Use JavaScript to programmatically generate thousands of nodes and templates in seconds.
- JSON Inspector: Full read/write access to the application state for power users and debugging.
- Presets: Includes a full 2026 Daily Planner (with Year, Quarter, Month, Week, Day views) and simple Notebook layouts.
- Generates optimized PDFs directly in the browser using
jsPDF. - Supports custom page sizes (A4, A5, reMarkable Paper Pro, Boox Note Air, etc.).
- Variants: Maintain multiple template sets for different device sizes (e.g., reMarkable, iPad, A4).
- Shared Hierarchy: All variants share the same node/page structure.
- Quick Switching: Easily switch between variants using the sidebar dropdown.
- Variant Management: Add, rename, duplicate, and delete variants from the UI.
- Device-Specific PDF Export: Export PDFs tailored to each device's dimensions.
- Node.js (v18+)
- npm or yarn
-
Clone the repository:
git clone https://github.com/yourusername/pdf-architect.git cd pdf-architect -
Install dependencies:
npm install
-
Run the development server:
npm start
- Nodes: A Node is a page (or a container) in your PDF. It has a Title and Data Fields (key-value pairs like
day_name: Monday). - Templates: A Template defines how a Node looks. You assign a Template (e.g., "Day View") to a Node.
- Data Binding: In a template, use
{{title}}or{{my_custom_field}}in a Text element. When the PDF generates, it swaps that tag with the data from the specific Node being rendered.
Grids are used to create calendars, indices, and lists.
- Add a Grid to your template.
- Set Source:
Current: The grid items will be the children of the page being rendered.Specific: The grid items will be the children of a specific node ID (good for global navigation bars).
- Display Field: What text to show in the cell? e.g.,
{{day_num}}. - Traversal (Advanced): If you are on a "Year" page, but want to show "Months", you might need to traverse down the tree if your structure is
Year -> Quarter -> Month.
| Link Target | Behavior |
|---|---|
| Parent | Links to the parent node. (Good for "Back" buttons). |
| Sibling | Links to Current Index + N. Use 1 for Next, -1 for Previous. |
| Child Index | Links to the Nth child (0-based). |
| Child Referrer | Advanced. Finds a node that references the current node as a child and links to it. Essential for linking a "Day" page back to its "Week" view. |
| Specific Node | Hard link to a specific UUID (e.g., "Index Page"). |
Open the Generator (Wand icon) to script your planner.
Stage 1: Define Templates Return an object where keys are Template IDs.
const t = {};
t.day = { id: 'day', width: 500, height: 700, elements: [...] };
return t;Stage 2: Build Hierarchy
Return nodes object and rootId.
const nodes = {};
const rootId = 'root';
// ... logic to loop 365 times and create nodes ...
return { nodes, rootId };Variants let you maintain different template designs for different device sizes while keeping the same page hierarchy.
Switch Variants: In Templates mode, use the dropdown at the top of the sidebar.
Add Variant: Click the + button next to the dropdown.
Rename/Duplicate/Delete: Use the icon buttons next to the dropdown (hover for tooltips).
Key Concept: All variants share the same nodes. When you switch variants, the same pages render using different templates suited for that device size.
Example Workflow:
- Create your initial templates for reMarkable Paper Pro (509×679)
- Click + to add a new variant, rename it to "iPad A4"
- Adjust template dimensions and layouts for A4 (595×842)
- Export PDFs for each device by switching variants
| Key | Action |
|---|---|
V |
Select Tool |
H / Space |
Hand (Pan) Tool |
T |
Text Tool |
R |
Rectangle Tool |
E |
Ellipse Tool |
L |
Line Tool |
G |
Grid Tool |
Ctrl + Z |
Undo |
Ctrl + Y |
Redo |
Ctrl + Scroll |
Zoom |
Arrows |
Nudge Selection |
Shift + Arrows |
Fast Nudge |
- Framework: React 18+
- Language: TypeScript
- Styling: Tailwind CSS
- Icons: Lucide React
- PDF Generation: jsPDF
- Routing: React Router
This project is open source. MIT License.