🖋️ HR Template Engine

A Canva-style document editor for HR paperwork. Drag blocks onto an A4 canvas, style them inline, save the result as a reusable template — so offer letters, payslips and contracts stop being a developer ticket.

Note: the default branch of this repository is Milan, not main.

What it does

• Drag-and-drop A4 canvas — blocks snap onto a real page, resizable via re-resizable, composed with Craft.js so the whole document tree stays editable and serialisable.
• 10-type block system — text, image, table, grid, shape and more, each with its own settings panel.
• Rich text inside blocks — Tiptap provides alignment, colour, highlight, underline, strike and font-family controls.
• Templates as structured JSON — a saved template is data, not markup, so it can be re-rendered, versioned and populated programmatically.
• Export pipeline — Playwright drives the render to a print-accurate document.

Stack

Layer	Choice
Framework	Next.js 16 · React 19
Editor core	@craftjs/core, @craftjs/layers
Rich text	@tiptap/react + extensions
UI primitives	Radix (Popover, Tabs) · lucide-react
Styling	Tailwind · styled-components
Export	Playwright

app/             routes
components/      editor surface, block components, settings panels
core/            Craft.js node definitions and the block registry
infrastructure/  persistence and export
lib/             shared helpers

Running locally

git clone -b Milan https://github.com/Milan-Baldaniya/canva.git
cd canva
npm install
npm run dev

See project_documentation.md for the block schema and template format.

---

_{Built by Milan Baldaniya · Full-Stack AI / LLM Application Engineer}