skills.rest
hyva-themes
hyva-themesOFFICIAL
Explore all skills by this author →
WebsiteGitHub

hyva-cms-custom-field

Register custom field types and modal handlers for Hyvä CMS Liveview Editor.

78|16|Updated Jan 22, 2026
Search Tags:#custom field#Hyva CMS#LiveView Editor#Magewire#Alpine.js#modal handler#field templates
One-click install
npx skills add https://github.com/hyva-themes/hyva-ai-tools --skill hyva-cms-custom-field
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyva-cms-custom-field
Source: https://github.com/hyva-themes/hyva-ai-tools/tree/main/skills/hyva-cms-custom-field
Command: npx skills add https://github.com/hyva-themes/hyva-ai-tools --skill hyva-cms-custom-field

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Hyva CMS editors often need non-standard input controls and custom UI to configure components. This skill provides a framework to create and register custom field types and their associated modal or inline handlers for the Hyvä CMS Liveview Editor.

Core Features & Use Cases

  • Define basic custom fields (text, date, number) with standard HTML5 validation.
  • Implement inline field handlers for enhanced controls (searchable selects, color pickers) without leaving the field area.
  • Build modal-based field handlers for complex selections (product selectors, link builders, media galleries) with proper event routing and server-side synchronization.

Quick Start

  1. Copy the field template pattern from built-in references and adapt it for your field type.
  2. Register your field type in etc/adminhtml/di.xml and, if needed, a modal handler in view/adminhtml/layout/liveview_editor.xml.
  3. Use the field type in components.json to store and render values as JSON-encoded data.

Frequently Asked Questions about hyva-cms-custom-field

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add custom field types to the Hyva CMS LiveView Editor?▼

Modal handlers in Hyva CMS handle complex UI flows like product selectors and link builders by routing events and synchronizing server-side data. They are registered in view/adminhtml/layout/liveview_editor.xml.

Can I build an inline date picker or color picker for Hyvä CMS components?▼

Hyva CMS custom fields support standard HTML5 validation for basic inputs like text, date, and number fields. This ensures native browser validation before data is saved as JSON-encoded values.

Do I need Magewire or Alpine.js to create custom Hyva CMS field handlers?▼

Custom field values in Hyva CMS components are handled using JSON-encoded data. This standard pattern ensures structured data storage and seamless retrieval within the LiveView Editor configuration.

What is the best way to register a modal field handler for a Hyva CMS link builder?▼

The best way to register a modal field handler for a link builder is defining the handler pattern and adding it to view/adminhtml/layout/liveview_editor.xml to ensure proper event-driven communication.

Related Skills

Explore More Software Engineering Skills→
Happy-HorizonHappy-Horizon

hyva-cms-custom-field

Create custom field types and handlers for Hyvä CMS in Magento 2 modules.

Official
Advanced
Happy-HorizonHappy-Horizon

hyva-cms-component

Scaffold Hyvä CMS components for Magento 2 with components.json and PHTML templates.

Official
Advanced
linguistic76linguistic76
2

ui-browser

Guide HTMX server communication and Alpine.js client-side state management for dynamic web interfaces.

Community
Intermediate
InchooInchoo
18

hyva-ui-component-css

Develop themeable Hyva Magento 2 UI components with Tailwind CSS and Alpine.js.

Official
Intermediate