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:
1<div data-type="text"
2 data-editable="true"
3 data-animate="fade"
4 data-start="0"
5 class="text-4xl font-bold text-white">
6 Your editable text here
7</div>
8Custom Field Labels
Use data-label to give your editable fields descriptive names:
1<div data-type="text"
2 data-editable="true"
3 data-label="Main Headline"
4 data-animate="fade"
5 data-start="0"
6 class="text-4xl font-bold text-white">
7 Welcome to Our Service
8</div>
9
10<div data-type="text"
11 data-editable="true"
12 data-label="Subtitle"
13 data-animate="fade"
14 data-start="2"
15 class="text-xl text-gray-300">
16 Discover amazing features
17</div>
18Supported Element Types
Text Elements
Any text element can be made editable:
1<!-- Regular text -->
2<div data-type="text"
3 data-editable="true"
4 data-label="Company Name"
5 class="text-2xl font-bold">
6 Acme Corporation
7</div>
8
9<!-- Paragraph text -->
10<p data-type="text"
11 data-editable="true"
12 data-label="Description"
13 class="text-lg">
14 We provide innovative solutions for your business needs.
15</p>
16
17<!-- Span text -->
18<span data-type="text"
19 data-editable="true"
20 data-label="Tagline"
21 class="text-sm text-gray-500">
22 Trusted by thousands
23</span>
24Typewriter Elements
Make typewriter text editable for dynamic messaging:
1<div data-type="typewriter"
2 data-editable="true"
3 data-label="Typewriter Message"
4 data-duration-animation="5"
5 data-start="1"
6 class="text-2xl font-mono text-green-600">
7 This message will be typed out character by character
8</div>
9Counter Elements
Allow users to customize counter values:
1<div data-type="counter"
2 data-editable="true"
3 data-label="Target Number"
4 data-end-number="1000"
5 data-duration-animation="4"
6 data-start="2"
7 class="text-6xl font-bold text-purple-600">
8</div>
9Image Elements
Make images editable so users can change the source:
1<img data-type="image"
2 data-editable="true"
3 data-label="Company Logo"
4 src="https://example.com/logo.png"
5 alt="Company Logo"
6 data-animate="fade"
7 data-start="0"
8 class="w-32 h-32" />
9Field 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:
1<!-- Good: Clear and descriptive -->
2<div data-editable="true" data-label="Product Name">iPhone 15 Pro</div>
3<div data-editable="true" data-label="Price">$999</div>
4<div data-editable="true" data-label="Discount Percentage">20</div>
5
6<!-- Bad: Generic labels -->
7<div data-editable="true" data-label="Text 1">iPhone 15 Pro</div>
8<div data-editable="true" data-label="Text 2">$999</div>
9<div data-editable="true" data-label="Text 3">20</div>
102. Provide Default Content
Include meaningful default text that users can modify:
1<!-- Good: Clear default content -->
2<div data-editable="true" data-label="Headline">
3 Welcome to Our Amazing Product
4</div>
5
6<!-- Bad: Empty or placeholder content -->
7<div data-editable="true" data-label="Headline">
8 [Enter headline here]
9</div>
103. Group Related Fields
Use consistent labeling for related fields:
1<div data-editable="true" data-label="Product Name">iPhone 15 Pro</div>
2<div data-editable="true" data-label="Product Price">$999</div>
3<div data-editable="true" data-label="Product Description">
4 The latest iPhone with advanced features
5</div>
64. Consider Field Order
Fields appear in the editor in the order they appear in your HTML:
1<!-- This order will be reflected in the editor -->
2<div data-editable="true" data-label="Title">Main Title</div>
3<div data-editable="true" data-label="Subtitle">Subtitle Text</div>
4<div data-editable="true" data-label="Description">Description text</div>
5Complete Example
Here's a complete template with multiple editable fields:
1<div class="relative w-full h-full bg-gradient-to-br from-blue-600 to-purple-700" data-type="container">
2 <!-- Main headline -->
3 <div class="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
4 <h1 data-type="text"
5 data-editable="true"
6 data-label="Main Headline"
7 data-animate="fade"
8 data-start="0"
9 data-duration-animation="2"
10 class="text-6xl font-bold text-white mb-4">
11 Welcome to Our Platform
12 </h1>
13
14 <p data-type="text"
15 data-editable="true"
16 data-label="Subtitle"
17 data-animate="fade"
18 data-start="1"
19 data-duration-animation="2"
20 class="text-2xl text-blue-100 mb-8">
21 Discover amazing features and solutions
22 </p>
23 </div>
24
25 <!-- Statistics section -->
26 <div class="absolute bottom-1/3 left-1/2 -translate-x-1/2 flex space-x-16">
27 <div class="text-center">
28 <div data-type="counter"
29 data-editable="true"
30 data-label="User Count"
31 data-end-number="10000"
32 data-duration-animation="3"
33 data-start="2"
34 class="text-4xl font-bold text-white">
35 </div>
36 <div data-type="text"
37 data-editable="true"
38 data-label="User Label"
39 data-animate="fade"
40 data-start="3"
41 class="text-lg text-blue-200">
42 Active Users
43 </div>
44 </div>
45
46 <div class="text-center">
47 <div data-type="counter"
48 data-editable="true"
49 data-label="Project Count"
50 data-end-number="500"
51 data-duration-animation="3"
52 data-start="2.5"
53 class="text-4xl font-bold text-white">
54 </div>
55 <div data-type="text"
56 data-editable="true"
57 data-label="Project Label"
58 data-animate="fade"
59 data-start="3.5"
60 class="text-lg text-blue-200">
61 Projects Completed
62 </div>
63 </div>
64 </div>
65
66 <!-- Logo -->
67 <div class="absolute top-8 left-8">
68 <img data-type="image"
69 data-editable="true"
70 data-label="Company Logo"
71 src="https://example.com/logo.png"
72 alt="Company Logo"
73 data-animate="fade"
74 data-start="0"
75 class="w-16 h-16" />
76 </div>
77</div>
78Template 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:
1<!-- This will be editable -->
2<div data-editable="true" data-label="Dynamic Content">
3 This can be changed by users
4</div>
5
6<!-- This will remain static -->
7<div data-type="text" data-animate="fade">
8 This stays the same for all users
9</div>
10Mixed Content
Combine editable and static content in the same element:
1<div class="text-2xl">
2 <span>Welcome to </span>
3 <span data-editable="true" data-label="Company Name">Your Company</span>
4 <span> - the leading platform for</span>
5 <span data-editable="true" data-label="Industry">technology solutions</span>
6</div>
7Troubleshooting
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-typeis 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-labelattribute is present - Ensure the label value is not empty
- Verify there are no special characters causing issues
Related Topics
- 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: 2026-01-05