# PDFMake Template Builder

A modern web app for creating PDFMake templates through a visual drag-and-drop interface. Bridges the gap between visual design expectations and pdfMake's document flow architecture.

## What It Does

- **Visual PDF Creation**: Drag-and-drop interface for building PDF templates
- **pdfMake Integration**: Generates valid pdfMake docDefinition objects
- **Real-time Preview**: Instant PDF preview with live updates
- **Template Management**: Save/load/export templates as JSON
- **Element Support**: Text, tables, images, lists, columns, and custom elements

## How to Use It

1. **Add Elements**: Use the sidebar palette to add text, images, tables, etc.
2. **Edit Content**: Click any element to edit its properties and content
3. **Style Elements**: Use the Styles panel to customize fonts, colors, and layout
4. **Preview**: See real-time PDF updates in the preview panel
5. **Export**: Download PDFs or copy JSON templates for use in code

## Development

### Prerequisites
- Node.js 18+
- Bun (recommended) or npm

### Setup
```bash
# Install dependencies
bun install

# Start development server
bun dev

# Open http://localhost:3000
```

### Scripts
```bash
bun dev          # Development server
bun build        # Production build
bun start        # Production server
bun lint         # Run ESLint
bun type-check   # TypeScript checking
```

### Project Structure
```
src/
├── app/                 # Next.js pages
├── components/          # React components
│   ├── ui/              # shadcn/ui components
│   ├── nodes/           # Template element editors
│   ├── sidebar/         # Sidebar panels
│   └── layout/          # Main layout components
├── hooks/               # Custom React hooks
├── lib/                 # App context and reducers
├── services/            # Business logic
├── types/               # TypeScript definitions
└── utils/               # Helper functions
```

## Architecture

### Core Challenge
Users expect absolute positioning (like Canva/Figma), but pdfMake uses document flow (like Word/LaTeX). This app provides a visual abstraction that translates drag-and-drop interactions into valid pdfMake structures.

### Key Components
- **ContentList**: Manages document content items
- **Canvas**: Visual layout area (currently simple, expandable)
- **PreviewPanel**: Real-time PDF preview
- **Template Management**: Local storage with import/export

## Documentation

See `docs/` for detailed documentation:
- `docs/plan/` - Development roadmap and specifications
- `docs/examples/` - pdfMake example templates
- `docs/pdfMake-docs.md` - Complete pdfMake reference

### Official pdfmake Resources
- Docs: https://pdfmake.github.io/docs/
- Playground: http://pdfmake.org/playground.html

## Contributing

1. Read the docs in `docs/plan/`
2. Fork and create a feature branch
3. Follow existing patterns
4. Submit a pull request

## License

MIT License