How I Built FlashFX From Zero

How I Built FlashFX From Zero

FlashFX Export System Documentation

Overview

The FlashFX export system has been completely rewritten to provide a robust, reliable, and optimized design export feature. The new system supports three export modes with real-time progress tracking and comprehensive error handling.

Architecture

Module Structure

The export system is organized into modular components located in /src/export/:

/src/export/
├── ExportManager.ts      # Orchestrates all export operations
├── CanvasExporter.ts     # Handles full canvas exports
├── ShapeExporter.ts      # Handles individual shape exports
├── ZipExporter.ts        # Handles ZIP file creation
└── ExportUI.tsx          # User interface component

Features

1. Export Entire Canvas

2. Export ZIP for Animation

Most Important Feature

3. Export Selection

User Interface

Toolbar Integration

The export button is located in the toolbar next to the Settings button:

Export Modal

When clicked, a modal appears with:

  1. Format Selection

    • PNG (Transparent) - default
    • JPEG

  2. Resolution Options

    • Canvas resolution
    • Preset resolutions (HD, 4K, 8K)
    • Custom width/height inputs

  3. Export Mode Buttons

    • Export Entire Canvas (Blue button)
    • Export ZIP for Animation (Yellow/Orange gradient - primary)
    • Export Selection (Gray button, disabled if nothing selected)

Progress Tracking

During export, the modal displays:

Completion States

Success:

Error:

Technical Implementation

Canvas Export Process

  1. Locates canvas DOM element by ID (canvas-artboard)
  2. Uses html-to-image library with toPng or toJpeg
  3. Applies 2x pixel ratio for quality
  4. Captures at specified resolution
  5. Downloads directly to user’s system

Shape Export Process

  1. Iterates through visible shapes in layer order
  2. For each shape:
    • Creates temporary container with full canvas dimensions
    • Clones the DOM element
    • Positions clone at exact canvas coordinates
    • Renders with transparent background
    • Captures as PNG with html-to-image
    • Converts to Blob
  3. Collects all Blobs
  4. Packages into ZIP using JSZip
  5. Downloads ZIP file using FileSaver

Performance Optimizations

Error Handling

Integration Points

UIDesignTool Component

import ExportUI from '../export/ExportUI';

<ExportUI
  isOpen={showExportPanel}
  onClose={() => setShowExportPanel(false)}
  elements={currentState.elements}
  selectedElements={currentState.selectedElements}
  projectName={projectName}
  canvasWidth={3840}
  canvasHeight={2160}
/>

Toolbar Component

{onOpenExport && (
  <button
    onClick={onOpenExport}
    className="p-2 rounded-lg bg-gray-700/50 hover:bg-gray-600/50"
    title="Export Design"
  >
    <Upload className="w-5 h-5" />
  </button>
)}

Usage Guide

For Users

  1. Export Entire Canvas:

    • Click Export button in toolbar
    • Select format and resolution
    • Click “Export Entire Canvas”
    • File downloads automatically

  2. Export for Animation:

    • Click Export button
    • Select desired resolution
    • Click “Export ZIP for Animation”
    • Wait for progress to complete
    • ZIP file downloads with all shapes

  3. Export Selection:

    • Select one or more shapes
    • Click Export button
    • Click “Export Selection”
    • Single shape downloads as PNG
    • Multiple shapes download as ZIP

For Developers

To modify export behavior:

  1. Add new export mode:

    • Add to ExportMode type in ExportManager.ts
    • Implement export function in ExportManager
    • Add UI button in ExportUI.tsx

  2. Change default settings:

    • Modify initial state in ExportUI.tsx
    • Update ExportConfig interface

  3. Add format support:

    • Add to format type in ExportConfig
    • Implement in CanvasExporter
    • Add UI option

Browser Compatibility

Known Limitations

Future Enhancements

Potential improvements:

Dependencies

Troubleshooting

Export fails immediately

Memory errors

Shapes positioned incorrectly

ZIP file corrupt

Support

For issues or questions:

  1. Check console logs for detailed errors
  2. Verify all dependencies installed
  3. Test with simple shapes first
  4. Review export progress messages