Core Concepts

Export System

Export current Phorm designs as SVG, HTML, JSON, or React. Raster and PDF output are shown as degraded unless a downstream renderer is configured.

Export Formats

SVG.svg

Scalable Vector Graphics. Infinite resolution, editable, smallest file size for vector content.

Best for: Icons, logos, illustrations, web graphics

transparencyvector pathstext as pathsgradients

HTML.html

Standalone markup preview generated from the current canvas elements.

Best for: Browser preview, handoff, lightweight design review

inline layouteditable markuplocal download

JSON.json

Portable design session data for import, local backup, and agent handoff.

Best for: Design data exchange, local drafts, reproducible generation

canvas elementsmetadatatheme tokens

React.tsx

React component scaffold generated from the current composition.

Best for: Frontend handoff and component composition review

component codestyle valueslocal download

Preset Dimensions

Canvas sizes used by local export and future renderer adapters

Preset	Dimensions	Aspect Ratio	Platform
Open Graph	1200 x 630	1.91:1	General web sharing
Twitter Card	1200 x 600	2:1	Twitter/X posts
Facebook	1200 x 628	1.91:1	Facebook posts
LinkedIn	1200 x 627	1.91:1	LinkedIn posts
Instagram Square	1080 x 1080	1:1	Instagram feed
Instagram Story	1080 x 1920	9:16	Instagram/TikTok stories
YouTube Thumbnail	1280 x 720	16:9	YouTube videos
Favicon	512 x 512	1:1	Website favicon

Export Options

Configure export settings for optimal results

interface ExportOptions {
  // Format selection
  format: "svg" | "html" | "json" | "react"
  
  // Dimensions
  width?: number          // Custom width, max 8192
  height?: number         // Custom height, max 8192
  
  // Appearance
  transparent?: boolean   // Transparent SVG background
  
  // Response mode
  download?: boolean      // Return an attachment instead of JSON content
}

Export API

Programmatic export via REST API

// Basic export request
const response = await fetch('/api/v1/export', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer $PLATPHORM_API_KEY'
  },
  body: JSON.stringify({
    elements: currentCanvasElements,
    format: 'svg',
    width: 1200,
    height: 720,
    transparent: true
  })
})

const result = await response.json()
// {
//   ok: true,
//   data: {
//     format: "svg",
//     content: "<svg ...>",
//     traceId: "..."
//   }
// }

Client-Side Export

Export directly in the browser

import { useExport } from '@/hooks/use-export'

function MyComponent() {
  const { 
    exportDesign, 
    isExporting, 
    progress,
    lastExport 
  } = useExport()

  const handleExport = async () => {
    const result = await exportDesign({
      format: 'png',
      scale: 2,
      transparent: true
    })
    
    if (result.success) {
      // Auto-downloads the file
      console.log('Exported:', result.filename)
    }
  }

  return (
    <button onClick={handleExport} disabled={isExporting}>
      {isExporting ? `Exporting... ${progress}%` : 'Export PNG'}
    </button>
  )
}

Custom Export Presets

Save and reuse export configurations

// Save a local browser preset
savePreset({
  id: "blog-hero",
  name: "Blog Hero Image",
  format: "webp",
  width: 1200,
  height: 630,
  scale: 2,
  quality: 85,
  transparent: false,
  createdAt: new Date().toISOString()
})

// List saved presets from local browser storage
const presets = loadPresets()

// Delete a local preset
deletePreset("blog-hero")

Export History

Track and re-export previous exports

// Export history can be tracked locally when this helper is wired into a client flow.
addToHistory({
  id: crypto.randomUUID(),
  preset: "og-image",
  filename: "phorm-design.png",
  format: "png",
  timestamp: new Date().toISOString(),
  size: blob.size
})

const history = getHistory()

// Clear local browser history
clearHistory()

Best Practices

Tips for optimal export results

For Web

Use WebP for best quality/size ratio. SVG for icons and logos. PNG for images needing transparency.

For Social Media

Use the built-in presets for correct dimensions. Export at 2x scale for retina displays. Test on actual platforms.

For Print

Use SVG or HTML handoff in Phase 1. PDF and print-specific color management require a configured renderer adapter.

For Performance

Export only the formats needed for the current handoff. Server batch export is disabled until an adapter is configured.