skills.rest
unlayer
unlayerOFFICIAL
Explore all skills by this author →
Website𝕏@unlayerappGitHub

unlayer-custom-tools

Create and register custom drag-and-drop tools in the Unlayer editor.

13|Updated Feb 12, 2026
Search Tags:#custom tools#drag and drop#property editor#unlayer#editor customization#html exporter
One-click install
npx skills add https://github.com/unlayer/unlayer-skills --skill unlayer-custom-tools
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: unlayer-custom-tools
Source: https://github.com/unlayer/unlayer-skills/tree/main/unlayer-custom-tools
Command: npx skills add https://github.com/unlayer/unlayer-skills --skill unlayer-custom-tools

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill empowers developers to extend the Unlayer visual editor by creating custom drag-and-drop content blocks, enhancing the editor's functionality to meet specific application needs.

Core Features & Use Cases

  • Custom Tool Registration: Define and register new tools with unique renderers, exporters, and property editors.
  • Property Editor Customization: Build complex property editors using built-in widgets or custom React components.
  • Email-Safe HTML: Generate robust HTML output compatible with various email clients.
  • Use Case: Create a "Product Card" tool that allows users to easily add product images, titles, prices, and buy buttons to their email templates, all configurable through a dedicated property panel.

Quick Start

Register a new custom tool named 'product_card' with Unlayer using the provided JavaScript example.

Frequently Asked Questions about unlayer-custom-tools

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

FAQPage Schema
How do I create custom drag-and-drop tools in the Unlayer editor?▼

You create custom drag-and-drop tools in the Unlayer editor by defining and registering bespoke content blocks with unique renderers, property editors, and HTML exporters using JavaScript.

Can I use React components to build custom property editors in Unlayer?▼

Yes, you can build custom property editors in Unlayer using React components. This enables advanced customization of complex content blocks by allowing dedicated configuration panels for specific tools.

How does the Unlayer editor export custom blocks to email-safe HTML?▼

The Unlayer editor generates robust email-safe HTML by utilizing custom exporters defined during tool registration, ensuring output compatibility across various email clients for your bespoke content blocks.

Do I need validator functions for custom Unlayer editor tools?▼

Validator functions are supported for custom Unlayer editor tools to provide robust error handling. They ensure your bespoke content blocks meet specific data requirements before generating the final HTML output.

What is the best way to add a product card block to an email template in Unlayer?▼

The best way to add a product card block in Unlayer is registering a custom tool with specific renderers and property editors, enabling users to easily configure images, titles, prices, and buy buttons.

Related Skills

Explore More Software Engineering Skills→
unlayerunlayer
13

unlayer

Integrate and configure the Unlayer visual editor SDK across web frameworks.

Official
Intermediate
xztxyxztxy

react-email

Convert JSON email specifications into HTML or plain-text output.

Community
Intermediate
unlayerunlayer
13

unlayer-integration

Integrate the Unlayer visual editor into React, Vue, Angular, and JavaScript applications.

Official
Intermediate
mikkelkrogsholmmikkelkrogsholm
2

wordpress-blocks

Develop and deploy WordPress Gutenberg blocks using Block Hooks and Interactivity APIs.

Community
Intermediate