Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
An example app that embeds the Dragble Editor in a Vite + React 19 project using the official React wrapper (dragble-react-editor) — with a full editor toolbar: theme switching, accent colors, sidebar docking, shortcut-bar placement, MCP (Design AI) pairing, a code viewer with live-editable JSON, and a complete export menu.
| Layer | Tech |
|---|---|
| Build | Vite 8 + TypeScript 6 |
| UI | React 19 |
| Editor | dragble-react-editor |
| Styling | Tailwind CSS v4 (CSS-first, shadcn-style tokens) |
| Primitives | Radix UI (dialog, dropdown-menu, popover, select, separator, slot, tooltip) |
| Extras | sonner (toasts), lucide-react (icons), class-variance-authority + clsx + tailwind-merge |
npm install
npm run dev # http://localhost:4020Copy .env.example to .env.local and fill in a Dragble project editor key:
VITE_EDITOR_KEY=db_xxxxxxxxxxxxxxxx # project editor key (db_ + 16 chars)
VITE_EDITOR_MODE=email # email | web | popup (default: email)Without VITE_EDITOR_KEY the page shows a warning banner and the editor won't load. You can get a key from your Dragble project settings.
npm run dev # Vite dev server on :4020
npm run build # tsc -b && vite build (type-check + production build)
npm run preview # preview the production buildThe single page (src/pages/editor-page.tsx) renders the Dragble editor full-screen with a grouped toolbar:
| Group | Controls |
|---|---|
| Theme | Dragble Light / Dragble Dark / Light / Dark — applied live via setOptions({ appearance }) |
| Accent | 25 Radix accent colors (disabled for the dragble-branded themes) |
| Sidebar | Dock the editor side panel left / right |
| Shortcuts | Shortcut bar placement (top/bottom × left/right) |
| MCP | Session ID input (sanitized to a-z A-Z 0-9 - _, max 128 chars) + copy, Connect / Disconnect MCP, pairing code with copy feedback |
| Code | HTML / JSON preview in a full-screen dark viewer with line numbers and Copy; the JSON view is editable — "Save & Apply" validates and loads the design into the live editor via loadDesign() (history preserved) |
| Export | Dropdown with: HTML, JSON, Image, Thumbnail, PDF, Text, ZIP (exportHtml, exportJson, exportImage, exportPdf, exportPlainText, exportZip) |
| Reset | loadBlank() + restores all toolbar settings to defaults |
The editor uses editorMode from VITE_EDITOR_MODE, starts blank, and reports readiness via onReady with a 500ms isReady() polling fallback (guards against React 19 Strict Mode races).
dragble-react-example/
├─ .env.example # VITE_EDITOR_KEY / VITE_EDITOR_MODE
├─ LICENSE # MIT
├─ index.html
├─ vite.config.ts # @tailwindcss/vite, "@" alias
└─ src/
├─ main.tsx, App.tsx # entry + toaster
├─ index.css # Tailwind v4 + CSS tokens + code-view selection styles
├─ lib/
│ ├─ utils.ts # cn() and helpers
│ └─ editor-theme.ts # editor theme/accent color definitions
├─ components/ui/ # shadcn-style Radix primitives
└─ pages/
└─ editor-page.tsx # the editor page (toolbar + editor + code view dialog)