Basic Usage
Simple object editing without schema validation:
Current Value:
{}
Header Title Configuration
Demonstration of configurable header titles:
No Header (default)
Custom Header Title
Default "Properties" Header
Dynamic Header
Advanced Input Types
Showcase of all supported input types with schema constraints:
Current Value:
{}
Validation:
Not validated
Nested Objects
Editing objects with nested properties using collapsible sections:
Current Value:
{}
Comprehensive Schema Demo
Complete example with validation, required fields, and error handling:
Current Value:
{}
Validation:
Not validated
Theme & Style Options
Different themes and layout options:
Compact Mode
Read-only Mode
Event Handling
Real-time event output:
Events will appear here...
Code Examples
Copy and paste these examples to get started:
Basic KeyValue Editor:
<e2-keyvalue-editor id="my-editor"></e2-keyvalue-editor>
<script>
const editor = document.getElementById('my-editor');
// Set initial data
editor.value = {
name: 'John Doe',
age: 30,
active: true
};
// Get current value
console.log(editor.value);
</script>
With Schema Validation:
<e2-keyvalue-editor id="schema-editor"></e2-keyvalue-editor>
<script>
const editor = document.getElementById('schema-editor');
// Define schema
editor.schema = {
type: 'object',
properties: {
name: {
type: 'string',
title: 'Full Name',
minLength: 2,
maxLength: 50
},
email: {
type: 'string',
format: 'email',
title: 'Email Address'
},
age: {
type: 'integer',
minimum: 0,
maximum: 120
}
},
required: ['name', 'email']
};
// Set data
editor.value = {
name: 'Jane Smith',
email: 'jane@example.com',
age: 25
};
</script>
Advanced Input Types:
<e2-keyvalue-editor id="advanced-editor"></e2-keyvalue-editor>
<script>
const editor = document.getElementById('advanced-editor');
editor.schema = {
type: 'object',
properties: {
color: {
type: 'string',
format: 'color',
title: 'Theme Color'
},
volume: {
type: 'number',
minimum: 0,
maximum: 100,
title: 'Volume Level'
},
website: {
type: 'string',
format: 'url',
title: 'Website'
},
category: {
type: 'string',
enum: ['small', 'medium', 'large'],
title: 'Size'
}
}
};
</script>
Event Handling:
// Listen for value changes
editor.addEventListener('keyvalue-change', event => {
const { key, oldValue, newValue, path, isValid } = event.detail;
console.log(`${key} changed from ${oldValue} to ${newValue}`);
});
// Listen for validation events
editor.addEventListener('keyvalue-validation', event => {
const { isValid, errors } = event.detail;
if (!isValid) {
console.log('Validation errors:', errors);
}
});
// Programmatic validation
const result = editor.validate();
console.log('Is valid:', result.isValid);