Editable Field Examples

Real-world examples showing how to use data-editable and data-label attributes to create user-friendly templates.

E-commerce Product Showcase

Perfect for showcasing products with customizable information:

<div class="relative w-full h-full bg-gradient-to-br from-blue-600 to-purple-700" data-type="container">
  <!-- Product Image -->
  <div class="absolute top-8 left-8">
    <img data-type="image" 
         data-editable="true"
         data-label="Product Image"
         src="https://example.com/product.jpg" 
         alt="Product" 
         data-animate="fade" 
         data-start="0"
         class="w-32 h-32 rounded-lg" />
  </div>
  
  <!-- Product Information -->
  <div class="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
    <h1 data-type="text" 
        data-editable="true"
        data-label="Product Name"
        data-animate="fade" 
        data-start="1"
        class="text-5xl font-bold text-white mb-4">
      iPhone 15 Pro
    </h1>
    
    <p data-type="text" 
       data-editable="true"
       data-label="Product Description"
       data-animate="fade" 
       data-start="1.5"
       class="text-xl text-blue-100 mb-6">
      The most advanced iPhone ever
    </p>
    
    <div class="flex items-center justify-center space-x-4">
      <span data-type="text" 
            data-editable="true"
            data-label="Original Price"
            data-animate="fade" 
            data-start="2"
            class="text-2xl text-gray-300 line-through">
        $1,199
      </span>
      <span data-type="text" 
            data-editable="true"
            data-label="Sale Price"
            data-animate="fade" 
            data-start="2.5"
            class="text-4xl font-bold text-green-400">
        $999
      </span>
    </div>
  </div>
  
  <!-- Statistics -->
  <div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex space-x-12">
    <div class="text-center">
      <div data-type="counter" 
           data-editable="true"
           data-label="Rating"
           data-end-number="4.8" 
           data-decimal="true"
           data-duration-animation="3"
           data-start="3"
           class="text-3xl font-bold text-yellow-400">
      </div>
      <div data-type="text" 
           data-editable="true"
           data-label="Rating Label"
           data-animate="fade" 
           data-start="4"
           class="text-sm text-blue-200">
        Customer Rating
      </div>
    </div>
    
    <div class="text-center">
      <div data-type="counter" 
           data-editable="true"
           data-label="Review Count"
           data-end-number="2500" 
           data-duration-animation="3"
           data-start="3.5"
           class="text-3xl font-bold text-white">
      </div>
      <div data-type="text" 
           data-editable="true"
           data-label="Review Label"
           data-animate="fade" 
           data-start="4.5"
           class="text-sm text-blue-200">
        Reviews
      </div>
    </div>
  </div>
</div>

Company Announcement

Great for company updates, product launches, or important announcements:

<div class="relative w-full h-full bg-gradient-to-br from-green-500 to-teal-600" data-type="container">
  <!-- Company Logo -->
  <div class="absolute top-8 left-1/2 -translate-x-1/2">
    <img data-type="image" 
         data-editable="true"
         data-label="Company Logo"
         src="https://example.com/logo.png" 
         alt="Company Logo" 
         data-animate="fade" 
         data-start="0"
         class="w-20 h-20" />
  </div>
  
  <!-- Main Announcement -->
  <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="Announcement Title"
        data-animate="fade" 
        data-start="1"
        class="text-6xl font-bold text-white mb-6">
      We're Hiring!
    </h1>
    
    <p data-type="text" 
       data-editable="true"
       data-label="Announcement Message"
       data-animate="fade" 
       data-start="2"
       class="text-2xl text-green-100 mb-8">
      Join our amazing team and help us build the future
    </p>
    
    <div data-type="typewriter" 
         data-editable="true"
         data-label="Typewriter Message"
         data-duration-animation="6" 
         data-start="3"
         class="text-xl text-white font-mono">
      Multiple positions available: Frontend Developer, Backend Engineer, Product Manager
    </div>
  </div>
  
  <!-- Contact Information -->
  <div class="absolute bottom-8 left-1/2 -translate-x-1/2 text-center">
    <p data-type="text" 
       data-editable="true"
       data-label="Contact Email"
       data-animate="fade" 
       data-start="5"
       class="text-lg text-green-200">
      [email protected]
    </p>
  </div>
</div>

Statistics Dashboard

Perfect for showcasing company metrics, achievements, or performance data:

<div class="relative w-full h-full bg-gradient-to-br from-gray-900 to-black" data-type="container">
  <!-- Header -->
  <div class="absolute top-8 left-1/2 -translate-x-1/2 text-center">
    <h1 data-type="text" 
        data-editable="true"
        data-label="Dashboard Title"
        data-animate="fade" 
        data-start="0"
        class="text-4xl font-bold text-white">
      Q4 2024 Results
    </h1>
  </div>
  
  <!-- Statistics Grid -->
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 grid grid-cols-2 gap-12">
    <!-- Revenue -->
    <div class="text-center">
      <div data-type="counter" 
           data-editable="true"
           data-label="Revenue Amount"
           data-end-number="2500000" 
           data-duration-animation="4"
           data-start="1"
           class="text-5xl font-bold text-green-400 mb-2">
      </div>
      <div data-type="text" 
           data-editable="true"
           data-label="Revenue Label"
           data-animate="fade" 
           data-start="2"
           class="text-lg text-gray-300">
        Revenue
      </div>
    </div>
    
    <!-- Users -->
    <div class="text-center">
      <div data-type="counter" 
           data-editable="true"
           data-label="User Count"
           data-end-number="50000" 
           data-duration-animation="4"
           data-start="1.5"
           class="text-5xl font-bold text-blue-400 mb-2">
      </div>
      <div data-type="text" 
           data-editable="true"
           data-label="User Label"
           data-animate="fade" 
           data-start="2.5"
           class="text-lg text-gray-300">
        Active Users
      </div>
    </div>
    
    <!-- Growth -->
    <div class="text-center">
      <div data-type="counter" 
           data-editable="true"
           data-label="Growth Percentage"
           data-end-number="150" 
           data-duration-animation="4"
           data-start="2"
           class="text-5xl font-bold text-purple-400 mb-2">
      </div>
      <div data-type="text" 
           data-editable="true"
           data-label="Growth Label"
           data-animate="fade" 
           data-start="3"
           class="text-lg text-gray-300">
        % Growth
      </div>
    </div>
    
    <!-- Satisfaction -->
    <div class="text-center">
      <div data-type="counter" 
           data-editable="true"
           data-label="Satisfaction Score"
           data-end-number="4.9" 
           data-decimal="true"
           data-duration-animation="4"
           data-start="2.5"
           class="text-5xl font-bold text-yellow-400 mb-2">
      </div>
      <div data-type="text" 
           data-editable="true"
           data-label="Satisfaction Label"
           data-animate="fade" 
           data-start="3.5"
           class="text-lg text-gray-300">
        Customer Rating
      </div>
    </div>
  </div>
  
  <!-- Footer Message -->
  <div class="absolute bottom-8 left-1/2 -translate-x-1/2 text-center">
    <p data-type="text" 
       data-editable="true"
       data-label="Footer Message"
       data-animate="fade" 
       data-start="4"
       class="text-lg text-gray-400">
      Thank you for an amazing year!
    </p>
  </div>
</div>

Event Promotion

Ideal for promoting events, webinars, or special occasions:

<div class="relative w-full h-full bg-gradient-to-br from-red-500 to-pink-600" data-type="container">
  <!-- Event Badge -->
  <div class="absolute top-8 right-8">
    <div data-type="text" 
         data-editable="true"
         data-label="Event Badge"
         data-animate="fade" 
         data-start="0"
         class="bg-white text-red-600 px-4 py-2 rounded-full text-sm font-bold">
      LIMITED TIME
    </div>
  </div>
  
  <!-- Main Event Info -->
  <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="Event Title"
        data-animate="fade" 
        data-start="1"
        class="text-6xl font-bold text-white mb-4">
      Tech Conference 2024
    </h1>
    
    <p data-type="text" 
       data-editable="true"
       data-label="Event Date"
       data-animate="fade" 
       data-start="2"
       class="text-2xl text-red-100 mb-2">
      March 15-17, 2024
    </p>
    
    <p data-type="text" 
       data-editable="true"
       data-label="Event Location"
       data-animate="fade" 
       data-start="2.5"
       class="text-xl text-red-100 mb-6">
      San Francisco Convention Center
    </p>
    
    <div data-type="typewriter" 
         data-editable="true"
         data-label="Event Description"
         data-duration-animation="8" 
         data-start="3"
         class="text-lg text-white font-mono mb-8">
      Join 500+ developers, designers, and tech leaders for three days of innovation, networking, and inspiration.
    </div>
    
    <!-- Price -->
    <div class="flex items-center justify-center space-x-4">
      <span data-type="text" 
            data-editable="true"
            data-label="Early Bird Price"
            data-animate="fade" 
            data-start="4"
            class="text-3xl font-bold text-yellow-300">
        $299
      </span>
      <span data-type="text" 
            data-editable="true"
            data-label="Regular Price"
            data-animate="fade" 
            data-start="4.5"
            class="text-xl text-red-200 line-through">
        $499
      </span>
    </div>
  </div>
  
  <!-- CTA Button -->
  <div class="absolute bottom-8 left-1/2 -translate-x-1/2">
    <div data-type="text" 
         data-editable="true"
         data-label="CTA Text"
         data-animate="fade" 
         data-start="5"
         class="bg-white text-red-600 px-8 py-4 rounded-lg text-xl font-bold cursor-pointer hover:bg-gray-100 transition-colors">
      Register Now
    </div>
  </div>
</div>

Social Media Post

Perfect for creating engaging social media content:

<div class="relative w-full h-full bg-gradient-to-br from-indigo-500 to-purple-600" data-type="container">
  <!-- Profile Picture -->
  <div class="absolute top-8 left-8">
    <img data-type="image" 
         data-editable="true"
         data-label="Profile Picture"
         src="https://example.com/profile.jpg" 
         alt="Profile" 
         data-animate="fade" 
         data-start="0"
         class="w-16 h-16 rounded-full" />
  </div>
  
  <!-- Username -->
  <div class="absolute top-8 left-32">
    <p data-type="text" 
       data-editable="true"
       data-label="Username"
       data-animate="fade" 
       data-start="0.5"
       class="text-lg font-bold text-white">
      @companyname
    </p>
  </div>
  
  <!-- Post Content -->
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
    <h2 data-type="text" 
        data-editable="true"
        data-label="Post Title"
        data-animate="fade" 
        data-start="1"
        class="text-4xl font-bold text-white mb-4">
      Just launched our new feature!
    </h2>
    
    <p data-type="text" 
       data-editable="true"
       data-label="Post Description"
       data-animate="fade" 
       data-start="2"
       class="text-xl text-indigo-100 mb-6">
      We're excited to share what we've been working on
    </p>
    
    <div data-type="typewriter" 
         data-editable="true"
         data-label="Typewriter Content"
         data-duration-animation="6" 
         data-start="3"
         class="text-lg text-white font-mono">
      Check out the new dashboard with real-time analytics and improved user experience.
    </div>
  </div>
  
  <!-- Engagement Stats -->
  <div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex space-x-8">
    <div class="text-center">
      <div data-type="counter" 
           data-editable="true"
           data-label="Like Count"
           data-end-number="1250" 
           data-duration-animation="3"
           data-start="4"
           class="text-2xl font-bold text-red-400">
      </div>
      <div data-type="text" 
           data-editable="true"
           data-label="Like Label"
           data-animate="fade" 
           data-start="4.5"
           class="text-sm text-indigo-200">
        Likes
      </div>
    </div>
    
    <div class="text-center">
      <div data-type="counter" 
           data-editable="true"
           data-label="Comment Count"
           data-end-number="89" 
           data-duration-animation="3"
           data-start="4.2"
           class="text-2xl font-bold text-blue-400">
      </div>
      <div data-type="text" 
           data-editable="true"
           data-label="Comment Label"
           data-animate="fade" 
           data-start="4.7"
           class="text-sm text-indigo-200">
        Comments
      </div>
    </div>
    
    <div class="text-center">
      <div data-type="counter" 
           data-editable="true"
           data-label="Share Count"
           data-end-number="156" 
           data-duration-animation="3"
           data-start="4.4"
           class="text-2xl font-bold text-green-400">
      </div>
      <div data-type="text" 
           data-editable="true"
           data-label="Share Label"
           data-animate="fade" 
           data-start="4.9"
           class="text-sm text-indigo-200">
        Shares
      </div>
    </div>
  </div>
</div>

Best Practices for Field Labels

1. Use Clear, Descriptive Names

<!-- Good: Clear and specific -->
<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>

2. Group Related Fields

<!-- 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>

3. Consider Field Order

Fields appear in the template editor in the 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>
<div data-editable="true" data-label="Call to Action">Learn More</div>

4. Use Consistent Naming Conventions

<!-- Consistent naming for similar elements -->
<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>

<!-- Consistent naming for counters -->
<div data-editable="true" data-label="User Count">1000</div>
<div data-editable="true" data-label="Project Count">50</div>
<div data-editable="true" data-label="Revenue Count">100000</div>

Template Editor Experience

When users open these templates in the editor, they'll see organized, clearly labeled fields that make customization intuitive and user-friendly. The field labels help users understand exactly what each field controls, making template customization accessible to non-technical users.

---

These examples demonstrate how to create professional, user-friendly templates that can be easily customized by anyone using the template editor.