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

dragble-config

Configure Dragble editor appearance, features, merge tags, fonts, localization, and collaboration options.

Updated May 11, 2026
Search Tags:#theming#collaboration#localization#editor configuration#javascript sdk#merge tags#dragble
One-click install
npx skills add https://github.com/Dragble/dragble-skills --skill dragble-config-dragble
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dragble-config
Source: https://github.com/Dragble/dragble-skills/tree/main/dragble-config
Command: npx skills add https://github.com/Dragble/dragble-skills --skill dragble-config-dragble

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers integrating the Dragble drag-and-drop editor often misconfigure its large options surface, leading to ignored settings, broken collaboration, or runtime errors from calling methods before the editor is ready. ## Core Features & Use Cases - Appearance & Branding: Set themes, accent colors, side panel layout, loaders, and runtime branding color palettes. - Content Configuration: Define merge tags, special links, custom fonts, display conditions, and tool defaults with property-level control. - Localization & Collaboration: Configure 29 UI locales with RTL support, template language, and team collaboration with commenting, reviewer roles, and @mentions. - Use Case: You need an email editor in French with VIP-only conditional rows and merge tags for customer data. This Skill provides the exact options object structure, runtime setter methods, and common-mistake fixes to implement it correctly. ## Quick Start Ask the AI to configure the Dragble editor with a dark theme, custom merge tags for first name and email, and French localization.

Frequently Asked Questions about dragble-config

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

FAQPage Schema
How do I configure the Dragble editor appearance and theme?▼

Set appearance options inside the options object passed to dragble.init, including theme, accentColor, sidePanel layout, and loader. Note that branded themes like dragble-light ignore accentColor, so use generic light or dark themes for custom accent colors.

How do I add custom merge tags to the Dragble editor?▼

Define merge tags in options.mergeTags.customMergeTags as flat or grouped entries with label, value, and sample fields. You can also update them at runtime with dragble.setMergeTags and retrieve current tags with dragble.getMergeTags.

Does the Dragble editor support RTL languages and localization?▼

Yes, the editor ships with 29 locales including RTL languages like Arabic and Farsi. Set options.locale for the UI language and options.language for template content direction, or use dragble.setLocale and dragble.setTextDirection at runtime.

Why is Dragble editor collaboration not attributing comments?▼

Collaboration requires user.id to be set in options so comments can be attributed to a user. Add options.user with id, name, and optional color alongside features.collaboration, otherwise commenting will not work correctly.

Why do Dragble runtime config methods throw errors after init?▼

Runtime methods like setMergeTags fail if called before the editor finishes loading. Wrap them in the onReady callback passed in dragble.init callbacks to guarantee the editor is ready before invoking setters.

Can Dragble feature flags enable plan-locked features?▼

No, feature flags can only disable features, not grant them. Setting features.imageEditor to true will not enable it without the required plan, but setting it to false always disables the feature regardless of plan.

Related Skills

Explore More Software Engineering Skills→
unlayerunlayer
13

unlayer-integration

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

Official
Intermediate
unlayerunlayer
13

unlayer-export

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

Official
Intermediate
unlayerunlayer
13

unlayer-custom-tools

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

Official
Advanced
webdevarifwebdevarif

neuro-theme-engine

Builds section-based theme systems with live preview, CSS variables, and React component registries.

Community
Advanced