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.
Last updated