🖨️ Printables Studio

Overview

Printables Studio gives staff a visual editor for producing print-ready materials — posters, label sheets, student signature strips, QR code cards, and certificates — without needing external design software. The app is built on the Puck visual editor with a library of custom print-specific blocks, and supports CSV data merging for batch output and AI content generation from natural language prompts.

Key Features

• Drag-and-drop block editor — Puck visual editor with a template catalog so staff can start from a pre-built layout or build from scratch
• Custom print blocks — Purpose-built blocks for posters, labels, signature strips, QR codes, and page footers, all defined in the shared mc-print package
• CSV data merge — Paste or upload CSV data via PapaParse to batch-generate personalised output (e.g. one label per student)
• AI content generation — /api/puck/chat endpoint accepts a natural language prompt and returns a complete Puck layout, generating designs like detention posters or event flyers from a single sentence
• Print-optimised CSS — Dedicated print stylesheets ensure output renders correctly at standard paper sizes

Architecture

The shared mc-print package provides all block definitions and printable instance logic. The app itself supplies Puck editor configuration, page routing, authentication, and the AI generation API.

Design Decisions

• Why Puck: Puck outputs JSON, which is critical for a print-focused editor. Custom block definitions need to render identically in both the editor and on the printed page — Puck lets you define React components for both contexts. GrapesJS is oriented toward web pages (HTML output), Unlayer is email-focused, and a fully custom drag-and-drop system would be a significant build for what’s ultimately a content arrangement problem. The JSON structure also makes AI generation feasible, since the schema is predictable and serialisable.
• AI generates full layouts, not individual blocks: Because Puck layouts are JSON, the LLM can produce a complete valid document in a single structured response. Generating individual blocks would require a second orchestration layer to decide positioning, sizing, and ordering. Returning the whole layout gives staff a usable first draft immediately that they can tweak in the editor — faster feedback loop, less system complexity.

Design-to-Print Workflow

Design-to-print workflow: select a template, enter data, and generate print-ready output.

AI-Generated Content

AI-generated detention poster created from a natural language prompt.