Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.fanfare.io/llms.txt

Use this file to discover all available pages before exploring further.

In DevelopmentThe landing page editor is currently being built. Multiple editor approaches are being evaluated, including section-based builders and freeform artboard editors. This documentation describes the planned functionality.

​
Editor Overview

The Fanfare landing page editor provides a visual, no-code interface for creating and customizing landing pages. The editor is designed to feel intuitive while supporting sophisticated design outcomes.

​
Editor Philosophy

The editor follows a “two-tier” approach:
  1. Tier 1: Section Composition - Assemble pages from pre-built section templates
  2. Tier 2: Section Editing - Customize individual sections with freeform controls
This approach balances ease of use (section templates) with creative flexibility (freeform editing).

​
Editor Interface

​
Main Canvas

The central canvas displays your page as it will appear to visitors: 
┌─────────────────────────────────────────────────────────┐
│  [+ Add Section]           [Preview]  [Publish]         │
├─────────────────────────────────────────────────────────┤
│                                                         │
│    ┌─────────────────────────────────┐                  │
│    │          Hero Section           │  ← Click to edit │
│    │    Your Headline Here           │                  │
│    │    [Call to Action]             │                  │
│    └─────────────────────────────────┘                  │
│                                                         │
│    ┌─────────────────────────────────┐                  │
│    │        Features Section         │                  │
│    │  ┌────┐  ┌────┐  ┌────┐        │                  │
│    │  │    │  │    │  │    │        │                  │
│    │  └────┘  └────┘  └────┘        │                  │
│    └─────────────────────────────────┘                  │
│                                                         │
│    ┌─────────────────────────────────┐                  │
│    │         CTA Section             │                  │
│    └─────────────────────────────────┘                  │
│                                                         │
└─────────────────────────────────────────────────────────┘

​
Tool Palette

A floating toolbar at the top provides quick actions:
ToolAction
Add SectionOpens the section library for drag-and-drop insertion
FocusZoom into a specific section for editing
PreviewOpen full-screen preview
SettingsAccess page settings and SEO

​
Inspector Panel

The right-side panel shows context-sensitive controls:
  • Theme controls when no section selected
  • Section settings when a section is selected
  • Layer tools when editing a freeform section (hero)

​
Working with Sections

​
Adding Sections

Click the + button or drag from the section library:
  1. Click to add - Inserts at the top of the page
  2. Drag to insert - Drop between existing sections
Available section types:
SectionDescriptionBest For
HeroBold opening with layered media + headlinePage introduction
FeaturesHighlight benefits in a premium gridProduct features
TestimonialSocial proof with elegant framingBuilding trust
GalleryImage grid or carouselVisual products
PricingPrice display with comparisonProduct details
CTAStrong closing call to actionConversions
FAQExpandable question/answer pairsCommon questions
StatsNumeric highlightsSocial proof
VideoEmbedded video contentDemonstrations
CountdownTimer until experience startsUrgency

​
Reordering Sections

Drag sections by their handle to reorder:
  1. Hover over a section to reveal the drag handle
  2. Click and hold the handle
  3. Drag to the desired position
  4. Release to drop

​
Deleting Sections

  1. Select a section by clicking it
  2. Click the trash icon in the section toolbar
  3. Confirm deletion
Section deletion cannot be undone. Save your work frequently.

​
Section Editing Modes

​
Standard Mode

Most sections use a form-based editing approach:
  • Click a section to select it
  • Edit content fields in the inspector panel
  • Changes appear in real-time on the canvas

​
Freeform Mode (Hero)

The hero section supports a Canva-like freeform editor:
  1. Select the hero section
  2. Click Edit to enter freeform mode
  3. Manipulate layers directly on the canvas:
    • Drag to reposition
    • Resize handles to scale
    • Layer panel to reorder z-index
  4. Click Done to exit freeform mode
┌─────────────────────────────────────────────────────────┐
│  [← Done]                    [Reset hero]  [Zoom: 100%] │
├─────────────────────────────────────────────────────────┤
│                                                         │
│    ┌─────────────────────────────────────────────┐      │
│    │  ○──────────────────────────────────────○   │      │
│    │  │                                      │   │      │
│    │  │        Headline Layer                │   │      │
│    │  │                                      │   │      │
│    │  ○──────────────────────────────────────○   │      │
│    │                                             │      │
│    │     ┌──────────────┐                       │      │
│    │     │  Image       │                       │      │
│    │     │  Layer       │                       │      │
│    │     └──────────────┘                       │      │
│    │                                             │      │
│    └─────────────────────────────────────────────┘      │
│                                                         │
└─────────────────────────────────────────────────────────┘

​
Theme Controls

Global theme settings affect the entire page:

​
Font Family

Select from web-safe fonts or connected custom fonts: 
/* Example theme font */
font-family:
  Inter,
  ui-sans-serif,
  system-ui,
  -apple-system,
  sans-serif;

​
Color Palette

ColorUsage
PrimaryCTA buttons, links, accents
SecondarySecondary buttons, highlights
BackgroundPage background (supports gradients)
TextPrimary text color
MutedSecondary text, captions

​
Background

Backgrounds support:
  • Solid colors
  • Linear gradients
  • Radial gradients
  • Background images (coming soon)
Example gradient: 
radial-gradient(1200px 700px at 25% 20%, rgba(140, 20, 255, 0.35), transparent 55%),
linear-gradient(135deg, #0b1020, #0f172a 55%, #05060f)

​
Keyboard Shortcuts

ShortcutAction
Cmd/Ctrl + SSave draft
Cmd/Ctrl + ZUndo
Cmd/Ctrl + Shift + ZRedo
EscapeExit current mode / deselect
DeleteDelete selected section

​
Output and Export

The editor produces a creative document (JSON) that is rendered to HTML at view time.

​
Viewing Output

Click the gear icon to open the output drawer:
  • JSON - Raw creative document for debugging
  • HTML - Rendered output for the current page
This is useful for:
  • Debugging rendering issues
  • Understanding the document structure
  • Exporting for custom use

​
Current Prototypes

The following editor variants are being evaluated in Storybook:
VariantDescriptionStatus
Section BuilderStack pre-built sections, drag to reorderPrimary candidate
Layered ArtboardFreeform canvas with layers (Canva-like)For hero sections
Email BlocksSchema-first blocks optimized for emailEmail-specific
Raw HTML/CSSDirect code editing with previewPower users
Run Storybook locally to explore prototypes: bash pnpm -F @waitify-io/admin-components storybook Navigate to Wysiwyg Studio stories.

​
Next Steps

Branding

Configure colors, fonts, and visual identity

Content Blocks

Learn about each section type

Forms

Add signup and contact forms

Preview & Publish

Test and deploy your page