Template Editor

Learn how to use the Template Editor tab to create user-friendly templates with editable fields.

Overview

The Template Editor is a powerful feature that allows you to create templates with editable fields that users can customize without touching HTML code. It combines a live preview with an intuitive form-based editor for easy content modification.

How It Works

Template Tab Interface

The Template tab provides a split-screen interface:

Left Panel: Live preview of your template with exact resolution dimensions
Right Panel: Form fields for editing template content
Resizable Split: Drag the divider to adjust panel sizes

Editable Fields System

When you add data-editable="true" to elements in your HTML, they automatically appear as form fields in the Template Editor:

<!-- This text will appear as an editable field -->
<div data-type="text" 
     data-editable="true"
     data-label="Main Headline"
     data-animate="fade">
  Welcome to Our Service
</div>

Field Types

The Template Editor automatically detects field types based on your HTML elements:

Text Fields

HTML: data-type="text" with data-editable="true"
Editor: Text input field
Edits: Text content

<div data-type="text" 
     data-editable="true"
     data-label="Company Name">
  Acme Corporation
</div>

Typewriter Fields

HTML: data-type="typewriter" with data-editable="true"
Editor: Textarea field
Edits: Typewriter text content

<div data-type="typewriter" 
     data-editable="true"
     data-label="Message"
     data-duration-animation="5">
  This message will be typed out
</div>

Counter Fields

HTML: data-type="counter" with data-editable="true"
Editor: Number input field
Edits: Target number value

<div data-type="counter" 
     data-editable="true"
     data-label="Target Number"
     data-end-number="1000">
</div>

Image Fields

HTML: <img> with data-editable="true"
Editor: Text input field with image preview
Edits: Image URL

<img data-type="image" 
     data-editable="true"
     data-label="Company Logo"
     src="https://example.com/logo.png" />

Creating Editable Templates

Step 1: Design Your Template

Start by creating your HTML template with the desired layout and styling:

<div class="relative w-full h-full bg-gradient-to-br from-blue-600 to-purple-700" data-type="container">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
    <h1 class="text-6xl font-bold text-white mb-4">
      Welcome to Our Platform
    </h1>
    <p class="text-2xl text-blue-100">
      Discover amazing features
    </p>
  </div>
</div>

Step 2: Add Editable Attributes

Add data-editable="true" and data-label to elements you want users to customize:

<div class="relative w-full h-full bg-gradient-to-br from-blue-600 to-purple-700" data-type="container">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
    <h1 data-type="text" 
        data-editable="true"
        data-label="Main Headline"
        data-animate="fade" 
        class="text-6xl font-bold text-white mb-4">
      Welcome to Our Platform
    </h1>
    <p data-type="text" 
       data-editable="true"
       data-label="Subtitle"
       data-animate="fade" 
       data-start="1"
       class="text-2xl text-blue-100">
      Discover amazing features
    </p>
  </div>
</div>

Step 3: Test in Template Editor

Switch to the Template tab
Your editable fields will appear in the right panel
Edit the fields to see live updates in the preview
The HTML automatically updates as you make changes

Field Organization

Field Order

Fields appear in the Template Editor in the same order they appear in your HTML:

<!-- This order will be reflected in the editor -->
<div data-editable="true" data-label="Title">Main Title</div>
<div data-editable="true" data-label="Subtitle">Subtitle Text</div>
<div data-editable="true" data-label="Description">Description text</div>

Field Labels

Use descriptive data-label values to make fields user-friendly:

<!-- Good: Clear and descriptive -->
<div data-editable="true" data-label="Product Name">iPhone 15 Pro</div>
<div data-editable="true" data-label="Sale Price">$999</div>
<div data-editable="true" data-label="Discount Percentage">20%</div>

<!-- Bad: Generic or unclear -->
<div data-editable="true" data-label="Text 1">iPhone 15 Pro</div>
<div data-editable="true" data-label="Number">$999</div>
<div data-editable="true" data-label="Field">20%</div>

Live Preview Features

Real-time Updates

Changes in form fields instantly update the preview
HTML is automatically synchronized
No need to manually edit code

Resolution Preview

Preview shows exact dimensions for your selected resolution
720p, 1080p, and 4K previews available
Accurate scaling and positioning

Responsive Layout

Desktop: Resizable split-screen interface
Mobile: Stacked layout with preview on top
Touch-friendly controls

Advanced Features

Mixed Content

Combine editable and static content in the same template:

<div class="text-2xl">
  <span>Welcome to </span>
  <span data-editable="true" data-label="Company Name">Your Company</span>
  <span> - the leading platform for</span>
  <span data-editable="true" data-label="Industry">technology solutions</span>
</div>

Conditional Editing

Make some fields editable while keeping others static:

<!-- This will be editable -->
<div data-editable="true" data-label="Dynamic Content">
  This can be changed by users
</div>

<!-- This will remain static -->
<div data-type="text" data-animate="fade">
  This stays the same for all users
</div>

Field Grouping

Organize related fields together:

<!-- Product Information Group -->
<div data-editable="true" data-label="Product Name">iPhone 15 Pro</div>
<div data-editable="true" data-label="Product Price">$999</div>
<div data-editable="true" data-label="Product Description">Latest iPhone model</div>

<!-- Statistics Group -->
<div data-editable="true" data-label="User Count">50000</div>
<div data-editable="true" data-label="Revenue Amount">2500000</div>
<div data-editable="true" data-label="Growth Percentage">150</div>

Best Practices

1. Provide Default Content

Include meaningful default text that users can modify:

<!-- Good: Clear default content -->
<div data-editable="true" data-label="Headline">
  Welcome to Our Amazing Product
</div>

<!-- Bad: Empty or placeholder content -->
<div data-editable="true" data-label="Headline">
  [Enter headline here]
</div>

2. Use Consistent Naming

Follow consistent naming conventions for similar elements:

<!-- Consistent naming for headlines -->
<div data-editable="true" data-label="Main Headline">Welcome</div>
<div data-editable="true" data-label="Sub Headline">Get Started</div>
<div data-editable="true" data-label="Footer Headline">Contact Us</div>

3. Consider User Experience

Think about how users will interact with your template:

Group related fields together
Use clear, descriptive labels
Provide helpful default values
Keep the number of fields manageable

4. Test Thoroughly

Always test your templates in the Template Editor:

Verify all editable fields appear correctly
Check that field labels are clear
Test with different content lengths
Ensure the preview updates properly

Troubleshooting

Field Not Appearing

Check that data-editable="true" is set correctly
Ensure the element has content (for text elements)
Verify the HTML is properly formatted

Field Type Not Detected

Make sure data-type is set correctly
For images, ensure the element is an <img> tag
For counters, verify data-type="counter" is present

Preview Not Updating

Check that the HTML is valid
Verify all required attributes are present
Try refreshing the preview

Field Order Issues

Fields appear in HTML order
Reorder elements in your HTML to change field order
Use consistent structure for predictable ordering

Integration with Other Tabs

Code Tab

View and edit the raw HTML code
Make manual adjustments if needed
See how editable fields are implemented

Preview Tab

Full-screen preview of your template
Test animations and interactions
Verify final appearance

Properties Tab

Configure template-wide settings
Adjust background colors
Set resolution and other properties

Example Workflow

Design: Create your HTML template with styling
Add Editable Fields: Mark elements with data-editable="true"
Test: Use the Template tab to verify field behavior
Refine: Adjust labels and organization as needed
Deploy: Your template is ready for users to customize

Editable Fields Guide - Detailed guide to editable field attributes
Widget Reference - Complete widget documentation
Getting Started - Basic template creation
Template Examples - Real-world examples

The Template Editor makes it easy to create user-friendly templates that can be customized by anyone, regardless of their technical knowledge.

PreviousEditable Fields NextSecurity and Domain Restrictions

Last updated 4 days ago