Skip to content

User Guide

Jump to bottom
Javier Godoy edited this page Jan 5, 2026 · 2 revisions

User Guide

Learn how to use Stronzi to create beautiful story templates.

🏠 Home Page

The landing page introduces Stronzi and provides quick access to:

  • Start Generating - Go to the template editor
  • View Gallery - Browse all available templates

🎨 Template Generator (/generate)

The main interface for creating and customizing templates.

Interface Overview

The generator page has two main sections:

Left Panel - Editor

  • Template selector dropdown
  • Dynamic form fields
  • Export button

Right Panel - Preview

  • Live 1080×1920 preview
  • Real-time updates as you type
  • Exact output representation

Using the Generator

1. Select a Template

Click the dropdown at the top to choose from available templates:

  • Sanremo Story
  • (Your custom templates will appear here)

2. Edit Template Fields

The form auto-generates based on the template's field definitions:

Text Fields

Label: Title
Input: [Your text here]
  • For short text like titles and subtitles
  • Updates preview instantly

Textarea Fields

Label: Description
Textarea: [Longer text content...]
  • For paragraphs and longer content
  • Supports line breaks

Image URL Fields

Label: Background Image
Input: [https://example.com/image.jpg]
  • Paste image URLs from any source
  • Images load in the preview
  • Supports CORS-enabled images

Number Fields

Label: Font Size
Input: [24]
  • For numeric values
  • Use arrow keys or type directly

3. Watch the Preview

The right panel updates in real-time:

  • Changes appear instantly
  • Shows exact output
  • 1080×1920 dimensions maintained
  • Scroll to view entire template

4. Export Your Template

When satisfied with your design:

  1. Click "Export PNG"
  2. The browser will download {template-id}.png
  3. File is exactly 1080×1920 pixels
  4. Ready for Instagram, Facebook, etc.

Export Quality

The export system uses html-to-image to create perfect PNG files:

  • High resolution - Full 1080×1920 quality
  • Accurate rendering - What you see is what you get
  • Transparent support - If your template uses transparency
  • Custom fonts - Preserves web fonts in export

🖼️ Template Gallery (/preview)

Browse all available templates in a responsive grid.

Gallery Features

Grid Layout

  • Responsive grid adapts to screen size
  • Hover effects on templates
  • Click to view full-size

Template Cards

  • Thumbnail preview
  • Template name
  • Click to view individual template

Navigation

From the gallery, you can:

  • Click any template to view it full-size
  • Return to the home page
  • Go to the generator

🔍 Individual Preview (/preview/:templateId)

View a single template in full detail.

Features

Full-Size Display

  • Complete 1080×1920 preview
  • Shows template with default values
  • Centered on screen

Export Option

  • Export button at the bottom
  • Downloads with default values
  • Same PNG quality as generator

Navigation

  • Back button to gallery
  • Direct link to generator for customization

🎯 Workflow Examples

Quick Export Workflow

  1. Go to /preview gallery
  2. Click a template you like
  3. Click "Export PNG"
  4. Done! (Uses default values)

Custom Design Workflow

  1. Go to /generate
  2. Select template
  3. Customize all fields
  4. Preview your changes
  5. Export PNG
  6. Upload to social media

Template Testing Workflow

  1. Create new template component
  2. Register in templates/index.ts
  3. Go to /generate
  4. Select your template
  5. Test all fields
  6. Export and verify
  7. Iterate as needed

🌓 Dark Mode

Stronzi automatically adapts to your system's color scheme:

Light Mode

  • Cream and sand backgrounds
  • Dark text for readability
  • Warm accent colors

Dark Mode

  • Deep sea backgrounds
  • Light text
  • Vibrant accent colors

Toggle dark mode in your system settings to see the change.

⌨️ Keyboard Shortcuts

While editing in the generator:

  • Tab - Move to next field
  • Shift+Tab - Move to previous field
  • Enter - Submit in text fields (moves to next)
  • Ctrl/Cmd+S - (Future: Save draft)

📱 Mobile Support

Stronzi is responsive and works on mobile devices:

Mobile Layout

  • Generator form and preview stack vertically
  • Gallery grid adjusts to screen width
  • Touch-friendly buttons
  • Pinch to zoom on previews

Limitations

  • PNG export works on mobile browsers
  • Best experience on desktop for editing
  • Preview quality may vary on small screens

💡 Tips & Tricks

Getting the Best Results

Image URLs

  • Use high-resolution images (at least 1080px wide)
  • Ensure images are CORS-enabled
  • Test with different images for best fit

Text Content

  • Keep titles concise for readability
  • Test different text lengths
  • Use line breaks strategically in textareas

Color Combinations

  • Use the design system colors for consistency
  • Test in both light and dark mode
  • Consider contrast for text readability

Export Quality

  • Wait for images to load before exporting
  • Large images may take longer to export
  • Check downloaded PNG dimensions (should be 1080×1920)

Common Use Cases

Social Media Posts

  • Instagram Stories (1080×1920)
  • Facebook Stories (1080×1920)
  • Snapchat Stories (1080×1920)

Marketing Materials

  • Event announcements
  • Product launches
  • Quotes and testimonials
  • Promotional graphics

Personal Content

  • Travel stories
  • Photo collages
  • Text overlays
  • Creative designs

🆘 Troubleshooting

Preview not updating

  • Check browser console for errors
  • Refresh the page
  • Ensure all fields have valid values

Export not working

  • Wait for all images to load
  • Try a different browser
  • Check browser's download settings

Images not loading

  • Verify the URL is correct
  • Check if image allows CORS
  • Try a different image source

Text not visible

  • Check text color vs background color
  • Adjust font size if needed
  • Verify CSS classes are correct

📚 Next Steps

← Back to Quick Start | Next: Creating Templates →

Clone this wiki locally