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

dragble-integration

Integrate the Dragble drag-and-drop editor into React, Vue, Angular, or vanilla JavaScript applications.

Updated May 11, 2026
Search Tags:#typescript#react#angular#vue#sdk integration#email editor#drag-and-drop editor
One-click install
npx skills add https://github.com/Dragble/dragble-skills --skill dragble-integration-dragble
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dragble-integration
Source: https://github.com/Dragble/dragble-skills/tree/main/dragble-integration
Command: npx skills add https://github.com/Dragble/dragble-skills --skill dragble-integration-dragble

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Embedding the Dragble drag-and-drop editor correctly requires knowing framework-specific props, events, callbacks, and CDN versioning rules. This Skill gives your AI assistant the exact integration patterns so it generates working code without hallucinated APIs or wrong package names. ## Core Features & Use Cases - Framework Wrappers: Complete setup for React (dragble-react-editor), Vue 3 (dragble-vue-editor), and Angular (dragble-angular-editor), including props, emits/outputs, refs, hooks, and composables. - Vanilla JS SDK: CDN-based initialization with dragble.init(), multi-instance support via createEditor(), and cleanup with destroy(). - Events & Callbacks: Full reference for lifecycle events (editor:ready, design:updated), blocking callbacks (onModuleSave, onPreview), and non-blocking callbacks (linkClick). - Versioning & TypeScript: SDK/editor version channels (latest, stable, vX.Y.Z), URL override precedence, and type imports from dragble-types. - Use Case: Ask your AI to "add the Dragble editor to my React app with save and load" and receive a complete component using DragbleEditor, exportHtml(), exportJson(), and loadDesign() with correct typing. ## Quick Start Ask your AI assistant to add the Dragble editor to your React, Vue, Angular, or vanilla JavaScript project with save and load functionality.

Frequently Asked Questions about dragble-integration

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

FAQPage Schema
How do I add the Dragble editor to a React app?▼

Install dragble-react-editor and render the DragbleEditor component with a required editorKey prop. Use a ref to access the SDK instance for methods like exportHtml(), exportJson(), and loadDesign() after the onReady callback fires.

How do I run multiple Dragble editor instances on one page?▼

Use createEditor() instead of dragble.init() in vanilla JavaScript. Each createEditor() call returns an independent SDK instance bound to its own containerId, while the global dragble object is a singleton unsuitable for multiple editors.

Can I install the Dragble SDK from npm?▼

No, the Dragble SDK is CDN-only and loaded from https://sdk.dragble.com/{version}/dragble-sdk.min.js. Only the framework wrappers (React, Vue, Angular) and dragble-types are available as npm packages; the wrappers load the SDK automatically.

Does the Dragble Vue component update when props change?▼

Yes, the Vue component watches design, merge-tags, modules, and display-conditions props and calls the corresponding SDK methods like loadDesign() and setMergeTags() at runtime without re-initializing the editor.

How do I pin the Dragble SDK to a specific version?▼

Set the sdkVersion prop to a channel like "stable" or a pinned version like "v1.2.3" (the v prefix is required). The sdkUrl prop overrides sdkVersion entirely if you need a self-hosted or custom CDN script URL.

Why is my Dragble async method not returning a value?▼

All async SDK methods return Promises, so you must await them or use .then(). There are no callback-based async APIs; for example, use const html = await editor.exportHtml() rather than passing a callback.

Related Skills

Explore More Software Engineering Skills→
CenturyLinkCenturyLink
17

chi-recommendations

Recommend Chi design system implementation approaches for web frameworks.

Official
Intermediate
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
unlayerunlayer
13

unlayer-custom-tools

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

Official
Advanced