LAYOUT_EXPORT_GUIDE.md

Layout Export Guide

This guide shows you how to use the browser console to capture your canvas objects and convert them into layout definitions for layouts.ts.

Quick Start

1. Design your layout in the canvas by adding objects (text, images, Huggys, rectangles)
2. Position and style everything exactly how you want it
3. Open browser console (F12 or Ctrl+Shift+I)
4. Run export command to get the layout code

Console Commands

When the app loads, a global exportCanvas object is available with the following methods:

1. View All Objects

exportCanvas.log()

This will display:

• Total object count
• Object types summary
• Detailed view of each object with properties
• Ready-to-copy layout definition code

Example output:

📐 Canvas Objects Export
Total objects: 4
Object types: text, image, image, rect
🔍 Individual Objects
  1. TEXT: title-text
     Position: {x: 550, y: 81.58}
     Size: {width: 852, height: 140}
     ...

2. Export as Layout Definition

exportCanvas.asLayout('myNewLayout', 'My New Layout', '/assets/layouts/myNewLayout_thumbnail.png')

Parameters:

• id: Unique layout identifier (camelCase, e.g., 'myNewLayout')
• name: Display name shown in UI (e.g., 'My New Layout')
• thumbnail: Path to layout thumbnail image

Output: Ready-to-paste TypeScript code for layouts.ts:

myNewLayout: {
  id: 'myNewLayout',
  name: 'My New Layout',
  thumbnail: '/assets/layouts/myNewLayout_thumbnail.png',
  objects: [
    {
      id: 'title-text',
      type: 'text',
      x: 550,
      y: 81.58,
      width: 852,
      height: 140,
      rotation: 0,
      zIndex: 1,
      text: 'Pretty Short Title',
      fontSize: 111.43,
      fontFamily: 'Inter',
      fill: '#8a97ba',
      bold: true,
      italic: false,
      align: 'center',
      isFixedSize: true,
      offsetX: 426,
    },
    // ... more objects
  ],
},

3. Export as JSON

exportCanvas.asJSON()

Exports objects as JSON format (useful for debugging or external processing).

4. Get Raw Objects Array

exportCanvas.objects()

Returns the raw JavaScript objects array.

5. Get Canvas Info

exportCanvas.info()

Shows current canvas state:

{
  objectCount: 4,
  canvasSize: 'x',
  dimensions: { width: 1200, height: 675 },
  bgColor: 'light',
  selectedIds: ['title-text']
}

Step-by-Step: Creating a New Layout

Step 1: Design Your Layout

1. Open the app at http://localhost:3001
2. Add objects to canvas (text, images, Huggys)
3. Position, rotate, and style them as needed
4. Make note of which canvas size you're using (X, LinkedIn, or HF)

Step 2: Export Object Data

Open browser console and run:

exportCanvas.log()

Review the output to verify all objects are correct.

Step 3: Generate Layout Code

Run:

exportCanvas.asLayout('myLayout', 'My Layout', '/assets/layouts/myLayout_thumbnail.png')

Copy the output from the console.

Step 4: Create Layout Thumbnail

1. Export your layout as PNG using the Export button
2. Save it to public/assets/layouts/myLayout_thumbnail.png
3. Or take a screenshot and crop it to ~200x100px

Step 5: Add to layouts.ts

1. Open src/data/layouts.ts
2. Find the LAYOUTS object
3. Paste your copied layout code
4. Verify the thumbnail path matches your file

Example:

export const LAYOUTS: Record<string, Layout> = {
  // ... existing layouts

  myLayout: {
    id: 'myLayout',
    name: 'My Layout',
    thumbnail: '/assets/layouts/myLayout_thumbnail.png',
    objects: [
      // ... your objects
    ],
  },
};

Step 6: Update Layout Selector

1. Open src/components/Sidebar/LayoutSelector.tsx
2. Add your new layout to the grid:

<button
  onClick={() => onSelectLayout('myLayout')}
  className="hover:bg-[#f0f2f4] transition-colors duration-150"
>
  <img
    src="/assets/layouts/myLayout_thumbnail.png"
    alt="My Layout"
    className="w-full h-full object-cover"
  />
</button>

Step 7: Test Your Layout

1. Refresh the app
2. Click Layout button in sidebar
3. Select your new layout
4. Verify all objects load correctly

Tips & Best Practices

Object IDs

• Use descriptive IDs: 'title-text', 'logo-image', 'background-rect'
• Avoid generic IDs like 'text-1', 'image-2'
• IDs help with debugging and maintenance

Text Objects

• Always set isFixedSize: true for layout text objects
• Use offsetX and offsetY for proper centering
• Set explicit width and height to prevent clipping

Image Objects

• Save images to public/assets/layouts/
• Use relative paths: /assets/layouts/image.png
• Consider file size (optimize images before adding)

Z-Index

• Start from 1 (0 is reserved for background)
• Higher z-index = front layer
• Check stacking order visually before exporting

Rotation

• Rotation is in degrees (0-360)
• 0° = no rotation, 90° = vertical, 180° = upside down
• Be careful with rotated text (may need larger bounding box)

Alignment

• Text alignment: 'left', 'center', 'right'
• For centered text, set align: 'center' and offsetX: width/2
• For centered positioning: x = canvasWidth/2, offsetX = width/2

Troubleshooting

Objects Not Showing in Export

Problem: Some objects missing from exportCanvas.log() output.

Solution: Make sure all objects are on canvas (not in editing mode). Refresh the page and try again.

Text Clipping After Loading Layout

Problem: Text gets cut off at edges.

Solution: Increase width and height of text objects. Use exportCanvas.log() to check actual dimensions.

Wrong Positioning After Loading

Problem: Objects appear in wrong positions.

Solution: Check if you're using the correct canvas size. Layouts are canvas-size specific.

offsetX/offsetY Confusion

Problem: Text or images positioned incorrectly.

Solution:

• offsetX shifts the object LEFT (positive value = more left)
• offsetY shifts the object UP (positive value = more up)
• For center alignment: offsetX = width/2, offsetY = height/2

Advanced: Modifying Object Data

After exporting, you can manually adjust values:

// Original export
{
  x: 123.456,
  y: 234.567,
  // ...
}

// Rounded for cleaner code
{
  x: 123,
  y: 235,
  // ...
}

Common Adjustments

• Round positions to integers for simplicity
• Adjust text dimensions if clipping occurs
• Fine-tune rotation angles
• Update fill colors for consistency
• Add/remove offsetX/offsetY as needed

Example Workflow

// 1. Check current canvas state
exportCanvas.info()

// 2. View all objects in detail
exportCanvas.log()

// 3. Export as layout definition
exportCanvas.asLayout('coolLayout', 'Cool Layout', '/assets/layouts/cool_thumbnail.png')

// 4. Copy output and paste into layouts.ts

// 5. Test and iterate!

Quick Reference

Command	Purpose
exportCanvas.log()	View all objects with details
exportCanvas.asLayout(id, name, thumbnail)	Export as layout code
exportCanvas.asJSON()	Export as JSON
exportCanvas.objects()	Get raw objects array
exportCanvas.info()	Show canvas state

---

Need help? Check the existing layouts in src/data/layouts.ts for examples.