Template TMDB Layout Editor

Features

​

Visual Canvas Editor​

• Drag & Drop Interface - Position elements anywhere on the canvas with pixel-perfect precision
• Real-time Preview - See your changes instantly as you design
• Responsive Presets - Switch between Desktop (1920×1080), Tablet (1280×720), and Mobile (375×667) layouts
• Grid & Snap - Optional grid overlay with snap-to-grid functionality for precise alignment
• Multi-device Preview - Test your layout across different screen sizes

Rich Element Library​

• Basic Elements
  • Text blocks with custom styling
  • Images with URL support
  • Shapes and backgrounds
• TMDB Data Elements
  • Poster - Movie/TV show poster images
  • Backdrop - High-resolution backdrop images
  • Logo - Official logos (language-aware)
  • Network Logo - TV network branding
  • Title - Movie/show titles
  • Overview - Plot descriptions
  • Tagline - Marketing taglines
  • Release Date - Release/air dates
  • Runtime - Duration information
  • Genres - Category pills
  • Rating - Star rating display (5-star system)
  • Cast - Actor profiles with photos
  • Season/Episode Count - TV show episode information
  • Dynamic Fields - Custom data from any API field using dot notation
• Collection Elements
  • Poster Scroll - Horizontal scrolling poster gallery
  • Backdrop Slideshow - Auto-cycling backdrop slideshow

Advanced Styling​

• Typography
  • 5 Google Fonts: Inter, Roboto, Montserrat, Lato, Oswald
  • Font size, weight (400/500/600/700), and alignment
  • Text shadows with customizable offset, blur, and color
• Colors & Effects
  • Background colors with opacity control
  • Linear gradients (angle, start/end colors)
  • Border radius, width, and color
  • Box shadows
  • Backdrop filters (blur, grayscale)
  • Overall opacity
• Layout
  • Rotation (0-360°)
  • Z-index layer ordering
  • Visibility toggle
  • Alignment tools (center, top, bottom, left, right, stretch)

Layer Management & Data Binding​

🔗 Smart Layer Linking​

One of the most powerful features is layer linking - connect multiple elements to share the same TMDB data source:

How it works:

1. Create multiple TMDB elements (poster, title, overview, etc.)
2. Drag one layer onto another in the Layers panel
3. All linked layers automatically share the same movie/TV show data
4. Change the TMDB ID on any linked element - all connected elements update together

Example Use Case:

📁 Movie Card Group
├─ Backdrop (linked)
├─ Poster (linked)
├─ Title (linked)
├─ Overview (linked)
└─ Rating (linked)


Search for "Inception" on any element → All elements show Inception data!

Dynamic Data Fields​

Access any TMDB API field using dot notation:

• vote_average → Rating score
• vote_count → Number of votes
• credits.cast.0.name → First actor name
• production_companies.0.name → Studio name
• release_date → Release date

Add custom prefix/suffix text:

• Prefix: "⭐ Rating: " + vote_average → "⭐ Rating: 8.1"
• Suffix: vote_count + " votes" → "12,534 votes"

TMDB Integration​

• Dual Authentication - Support for both TMDB API v3 (Key) and v4 (Bearer Token)
• Live Search - Real-time movie/TV show search with instant results
• Rich Metadata - Access full TMDB API including credits, images, videos, ratings
• Collection Endpoints - Popular, Top Rated, Upcoming, Now Playing, Discover
• Advanced Filtering - Genre filters, year filters, sort options for Discover mode
• Localization - 100+ languages and regional settings
• Include Adult Content - Optional toggle

Project Management​

• JSON Import/Export - Save and load entire projects
• Undo/Redo - Full history tracking (50 states)
• Auto-save - localStorage persistence
• PHP Code Export - Generate production-ready PHP files with embedded JavaScript