Editable Fields

Make template elements editable so users can customize content without editing HTML.

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
Widgets Overview - Complete widget documentation

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

Last updated on January 5, 2026