Editable Fields

Learn how to make your template elements editable so users can customize content without touching HTML.

Overview

Editable fields allow users to modify template content through a user-friendly interface instead of editing HTML directly. When you add data-editable="true" to an element, it becomes available in the template editor for easy customization.

Making Elements Editable

Basic Editable Text

To make any text element editable, add the data-editable="true" attribute:

<div data-type="text" 
     data-editable="true"
     data-animate="fade" 
     data-start="0"
     class="text-4xl font-bold text-white">
  Your editable text here
</div>

Custom Field Labels

Use data-label to give your editable fields descriptive names:

<div data-type="text" 
     data-editable="true"
     data-label="Main Headline"
     data-animate="fade" 
     data-start="0"
     class="text-4xl font-bold text-white">
  Welcome to Our Service
</div>

<div data-type="text" 
     data-editable="true"
     data-label="Subtitle"
     data-animate="fade" 
     data-start="2"
     class="text-xl text-gray-300">
  Discover amazing features
</div>

Supported Element Types

Text Elements

Any text element can be made editable:

<!-- Regular text -->
<div data-type="text" 
     data-editable="true"
     data-label="Company Name"
     class="text-2xl font-bold">
  Acme Corporation
</div>

<!-- Paragraph text -->
<p data-type="text" 
   data-editable="true"
   data-label="Description"
   class="text-lg">
  We provide innovative solutions for your business needs.
</p>

<!-- Span text -->
<span data-type="text" 
      data-editable="true"
      data-label="Tagline"
      class="text-sm text-gray-500">
  Trusted by thousands
</span>

Typewriter Elements

Make typewriter text editable for dynamic messaging:

<div data-type="typewriter" 
     data-editable="true"
     data-label="Typewriter Message"
     data-duration-animation="5" 
     data-start="1"
     class="text-2xl font-mono text-green-600">
  This message will be typed out character by character
</div>

Counter Elements

Allow users to customize counter values:

<div data-type="counter" 
     data-editable="true"
     data-label="Target Number"
     data-end-number="1000" 
     data-duration-animation="4"
     data-start="2"
     class="text-6xl font-bold text-purple-600">
</div>

Image Elements

Make images editable so users can change the source:

<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-32 h-32" />

Field Types and Behavior

The template editor automatically detects the field type based on the element:

Element Type

Field Type

What Users Can Edit

data-type="text"

Text Input

Text content

data-type="typewriter"

Textarea

Typewriter text

data-type="counter"

Number Input

Target number value

img

Text Input

Image URL

Best Practices

1. Use Descriptive Labels

Always provide meaningful data-label values:

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

<!-- Bad: Generic labels -->
<div data-editable="true" data-label="Text 1">iPhone 15 Pro</div>
<div data-editable="true" data-label="Text 2">$999</div>
<div data-editable="true" data-label="Text 3">20</div>

2. 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>

Use consistent labeling for related fields:

<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">
  The latest iPhone with advanced features
</div>

4. Consider Field Order

Fields appear in the 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>

Complete Example

Here's a complete template with multiple editable fields:

<div class="relative w-full h-full bg-gradient-to-br from-blue-600 to-purple-700" data-type="container">
  <!-- Main headline -->
  <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="Main Headline"
        data-animate="fade" 
        data-start="0"
        data-duration-animation="2"
        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"
       data-duration-animation="2"
       class="text-2xl text-blue-100 mb-8">
      Discover amazing features and solutions
    </p>
  </div>
  
  <!-- Statistics section -->
  <div class="absolute bottom-1/3 left-1/2 -translate-x-1/2 flex space-x-16">
    <div class="text-center">
      <div data-type="counter" 
           data-editable="true"
           data-label="User Count"
           data-end-number="10000" 
           data-duration-animation="3"
           data-start="2"
           class="text-4xl font-bold text-white">
      </div>
      <div data-type="text" 
           data-editable="true"
           data-label="User Label"
           data-animate="fade" 
           data-start="3"
           class="text-lg text-blue-200">
        Active Users
      </div>
    </div>
    
    <div class="text-center">
      <div data-type="counter" 
           data-editable="true"
           data-label="Project Count"
           data-end-number="500" 
           data-duration-animation="3"
           data-start="2.5"
           class="text-4xl font-bold text-white">
      </div>
      <div data-type="text" 
           data-editable="true"
           data-label="Project Label"
           data-animate="fade" 
           data-start="3.5"
           class="text-lg text-blue-200">
        Projects Completed
      </div>
    </div>
  </div>
  
  <!-- Logo -->
  <div class="absolute top-8 left-8">
    <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-16 h-16" />
  </div>
</div>

Template Editor Interface

When users open this template in the editor, they'll see:

Main Headline - Text input for the main title
Subtitle - Text input for the subtitle
User Count - Number input for the counter value
User Label - Text input for "Active Users"
Project Count - Number input for the second counter
Project Label - Text input for "Projects Completed"
Company Logo - Text input for the logo URL

Advanced Usage

Conditional Editing

You can 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>

Mixed Content

Combine editable and static content in the same element:

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

Troubleshooting

Field Not Appearing in Editor

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

Label Not Showing

Check that data-label attribute is present
Ensure the label value is not empty
Verify there are no special characters causing issues

Template Editor - How to use the Template Editor interface
Widget Reference - Complete widget documentation
Getting Started - Basic template creation
Template Examples - Real-world examples with editable fields

Editable fields make your templates more user-friendly and allow for easy customization without technical knowledge.

PreviousWidget Reference NextTemplate Editor

Last updated 4 days ago