skills.rest
Dragble
DragbleOFFICIAL
Explore all skills by this author →
WebsiteGitHub

dragble-custom-tools

Build custom drag-and-drop tools and property editor widgets for the Dragble editor SDK.

Updated May 11, 2026
Search Tags:#sdk#custom tools#template engine#dragble#drag-and-drop editor#registertool#property widgets
One-click install
npx skills add https://github.com/Dragble/dragble-skills --skill dragble-custom-tools-dragble
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dragble-custom-tools
Source: https://github.com/Dragble/dragble-skills/tree/main/dragble-custom-tools
Command: npx skills add https://github.com/Dragble/dragble-skills --skill dragble-custom-tools-dragble

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers integrating the Dragble editor often need custom content blocks beyond the built-in tools, but writing them correctly requires knowing the registration API, template syntax, property widget types, and serialization constraints. This Skill gives an AI coding assistant the exact knowledge to generate correct custom tool code on the first attempt. ## Core Features & Use Cases - Custom Tool Registration: Create tools via dragble.registerTool() using declarative templates with mustache-like syntax or JS renderer functions, including email-safe table-based variants. - Property Editor Widgets: Use 30+ built-in widget types (color_picker, slider, dropdown, image_upload) or build custom widgets with createWidget() in render/mount or iframe modes. - Dynamic Behavior: Implement property states for conditional visibility, transformers for cross-property auto-updates, canvas scripts for interactivity, and validators for content audits. - Use Case: Ask the AI to create a product card tool with image, title, price, and a sale-price toggle, and it produces a complete registration config with grouped properties, property states, and an email renderer. ## Quick Start Ask the AI to create a custom Dragble tool such as a coupon code block with configurable colors, text, and an optional expiry date.

Frequently Asked Questions about dragble-custom-tools

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

FAQPage Schema
How do I create a custom tool in the Dragble editor?▼

Call dragble.registerTool() with a config containing a camelCase name, label, and either a template string (declarative mode) or a renderer function (JS mode). Add a properties object defining editable fields with editor widget types and default values.

What is the difference between template and renderer mode in Dragble tools?▼

Template mode uses an HTML string with mustache-like syntax such as {{value}} and {{#if}} blocks, suiting most static tools. Renderer mode uses a JavaScript function receiving values and returning HTML, suiting dynamic tools like QR codes or charts.

How do I show or hide properties conditionally in Dragble?▼

Use the propertyStates field with declarative conditions like { show: { property: 'onSale', equals: true } }, supporting operators such as equals, in, truthy, and compound all/any/not logic. Functional conditions work only for tools loaded inside the editor, not across postMessage.

Can Dragble custom tools use functions registered from the SDK?▼

Functions like renderer, script, and validator are serialized as __DRAGBLE_FN__-prefixed strings when crossing the postMessage boundary, so closures over external variables will not work. Keep these functions self-contained or use declarative configurations instead.

How do I make Dragble custom tool HTML work in email clients?▼

Provide an emailTemplate or emailRenderer that uses table-based layouts with inline styles for Outlook compatibility. Canvas scripts are ignored in email export since email HTML is static.

How do I build a custom property widget for Dragble?▼

Use dragble.createWidget() with either render/mount/update/unmount lifecycle functions returning HTML strings, or a URL pointing to an iframe page that communicates via postMessage. Widgets are registered before tools so tools can reference them by name in property definitions.

Related Skills

Explore More Software Engineering Skills→
SoltusSoltus
1

relational-database-web-cloudbase

Initialize CloudBase Relational Database and execute Supabase-style queries from frontend apps.

Community
Advanced
unlayerunlayer
13

unlayer-export

Export Unlayer editor content to HTML, text, images, PDFs, and ZIP archives.

Official
Intermediate
unlayerunlayer
13

unlayer-config

Configure Unlayer editor features, appearance, and security settings via JavaScript.

Official
Advanced
syncfusionsyncfusion
4

syncfusion-blazor-blockeditor

Configure the Syncfusion Blazor Block Editor for modular document construction.

Official
Advanced