Your code lives in files.
Bricks should accept files.
Drop2Bricks lets you drag HTML, CSS, and JS files from VS Code — or your regular file explorer — straight onto the Bricks canvas or structure panel. Each file becomes a properly wrapped, correctly named Code element in seconds. And with the new Smart Code element, you finally get VS Code-style folding and a Find & Replace bar that actually finds your code.
VS Code / File Explorer
Bricks Structure Panel
You've felt every one of these
Every Bricks developer who writes real code hits the same three walls. Drop2Bricks removes all of them.
The copy-paste marathon
Ten files means ten round trips: open file, select all, copy, switch tabs, add Code element, open modal, paste, rename element, repeat. A page's worth of components eats half an hour of pure clicking.
Ctrl+F finds nothing
Browser search can't see inside Bricks code editors — the editor virtualizes lines, so the text literally isn't in the DOM. Hunting for a class name in 800 lines means scrolling and squinting.
The wall of code
A long HTML section or a chunky JS file in the Bricks modal is one giant unbroken scroll. No structure, no overview, no way to focus on the part you're editing.
Everything the code workflow should have been
Purpose-built for developers who prototype in VS Code, generate with AI, and ship in Bricks.
True Drag & Drop
Drag files from the VS Code explorer, Windows Explorer, macOS Finder, or any file manager and drop them anywhere on the Bricks canvas or structure panel. A live overlay confirms the drop zone.
Paste Files Too New
Copy a file in your OS file manager, click into the builder, hit Ctrl+V. Done. Drop2Bricks distinguishes file pastes from text pastes automatically, so it never hijacks normal editing.
Smart Type Wrapping
HTML inserts verbatim. CSS is wrapped in <style>. JS is wrapped in <script>. Every element works the moment it lands — no manual fixing.
Filename Labels
Every element is labeled with its exact filename and extension — navbar.html, theme.css — and folder drops keep relative paths, so your structure panel reads like your repo.
Multi-File & Folder Batches
Drop 2 files or 50. Drop a whole folder — it's flattened and every .html/.css/.js inside is processed in order, in one operation.
Smart Code Element New
A drop-in upgrade to the native Code element — identical rendering, settings, and security, plus folding and Find & Replace in the editor. Toggle drops between Smart and regular via the dock icon.
Code Signature Handling
Signatures are requested from your own server automatically via Bricks' signing routine. Unsigned elements safely await Bricks' built-in code review — never a broken frontend.
Permission Aware
Fully respects Bricks' code execution capabilities. Users without code rights create non-executing elements pending admin approval — secure by default.
Native Clipboard Bridge
Elements are staged in Bricks' own clipboard format — the same JSON the builder produces on copy — the most update-resilient integration point that exists.
Fully Self-Contained v1.2
Zero CDN requests, zero external dependencies. Folding and search are implemented natively in the plugin. Works on airgapped staging and strict-CSP sites.
Zero Frontend Footprint
Assets load only inside the builder, only for logged-in editors. Your visitors never download a single byte of Drop2Bricks. Ever.
Enhances Every Editor
Folding and Find & Replace attach to every code editor in the builder — Smart Code, regular Code elements, even page-level Custom CSS. One plugin, better everything.
The code editor Bricks always deserved
Open any Smart Code element's editor and it behaves like the tools you actually write code in.
Find & Replace that actually finds
Pinned top-right of the editor. Ctrl+F to find, Ctrl+H for replace. It searches the real document — not the rendered DOM — with all matches highlighted, live 2/7 counting, Enter/Shift+Enter navigation, case toggle, and back-to-front Replace All that never corrupts positions.
VS Code-style folding
Gutter arrows collapse any { } block, HTML tag pair, or block comment. Ctrl+Q folds at your cursor. Fold All / Unfold All buttons give you an instant outline of even the largest file.
100% Code-element compatible
Smart Code extends the native Bricks Code element — identical frontend rendering, identical settings, identical signature security. It's the same element, with a better cockpit.
From file to element in four seconds
Open Bricks Builder
Drop2Bricks arms itself automatically — the dock icon bottom-right confirms it. Click it anytime to toggle between Smart Code (⚡) and regular Code (📥) output.
Drag or Copy Files
Grab .html, .css, or .js files — or a whole folder — from VS Code or your file explorer. Or just copy a file and get ready to paste.
Drop or Ctrl+V
The overlay lights up on drag; release anywhere. Each file is read, wrapped by type, signed, and staged as a Bricks element named after the file.
Insert & Ship
Elements insert instantly (or with one Ctrl+V where the browser requires it). Open any of them to enjoy folding and real search. Save. Done.
| Dropped / Pasted File | Becomes | Content Treatment | Executes |
|---|---|---|---|
| *.html / *.htm | Smart Code element | Inserted verbatim | Yes |
| *.css | Smart Code element | Wrapped in <style>…</style> | Yes |
| *.js | Smart Code element | Wrapped in <script>…</script> | Yes |
| Any other type | — | Skipped with a notice | N/A |
| Editor Shortcut | Action |
|---|---|
| Ctrl+F / ⌘F | Open Find bar (top-right of the editor) |
| Ctrl+H / ⌘H | Open Find + Replace |
| Enter / Shift+Enter | Next / previous match |
| Ctrl+Q / ⌘Q | Fold or unfold the section at your cursor |
| Esc | Close the find bar |
Questions, answered
Does this read the file *contents*, or just the names?
Full contents. The browser's File API reads each dropped or pasted file's text and injects it into the element. Your original files on disk are never modified, moved, or uploaded to the media library.
Can I drag from a normal file explorer, not just VS Code?
Yes — anything that produces a standard OS file drag works: Windows Explorer, macOS Finder, Linux file managers, desktop shortcuts, even attachments dragged out of some email clients. And since v1.1 you can also copy a file in your file manager and simply Ctrl+V in the builder.
How does code signing work — and what about Bricks 2.4's auto-sign?
Bricks signs every code element so unsigned or tampered code never executes on the frontend. Drop2Bricks requests a signature from your own server the moment a file lands. Even better: Bricks 2.4 introduced an auto-sign feature for exactly this scenario — the team recognized that modern workflows (AI-generated code, external editors, tools like Drop2Bricks moving code into the builder) were bottlenecked by manual review, and auto-sign makes the whole pipeline fluid. On 2.4+ your dropped elements are signed and executable immediately; on older versions, elements without a signature simply await Bricks' built-in code review — safe either way.
Why can't the browser's own Ctrl+F find code in Bricks?
Bricks' code editor (CodeMirror) only renders the lines currently visible on screen — the rest of your code isn't in the DOM at all, so the browser's page search has nothing to match against. Smart Code's find bar searches the editor's full underlying document instead, which is why it finds everything, every time.
Is the Smart Code element safe to use for client sites?
Yes. It's a direct extension of Bricks' native Code element — same render pipeline, same settings, same signature verification, same capability checks. If you deactivated Drop2Bricks, the stored code and settings remain intact (elements would just show as missing until reactivation, like any third-party element).
Does folding change my code?
Never. Folds are purely visual — collapsed regions are fully preserved in the saved code. Fold state isn't saved with the element, so every editor session starts clean.
Can I drop an entire folder?
Yes, in Chromium browsers (Chrome, Edge, Brave, Opera). The folder is walked recursively, every .html/.css/.js inside is processed, and each element is labeled with its relative path so nested structures stay readable.
What happens to files that aren't HTML, CSS, or JS?
They're skipped with a clear notice telling you how many were ignored. Files over 2 MB are also skipped to protect builder performance — that limit comfortably fits any hand-written or AI-generated component.
Will this break when Bricks updates?
Drop2Bricks integrates through the most stable surfaces available: Bricks' own clipboard element schema (the exact JSON the builder produces on copy), the documented element registration API, and CodeMirror's public API. v1.2 is also fully self-contained — no CDN scripts that could drift out of sync.
Does it slow down my live site?
No. Nothing is enqueued on the frontend — assets load only in the builder, only for logged-in users with edit rights. Your visitors' experience is byte-for-byte identical with or without the plugin.
I use AI to generate components. Does this fit that workflow?
It's built for it. Generate a component in your AI tool, save it as a file (or just copy the file), and drop it straight into Bricks — named, wrapped, signed, and searchable. Combined with Bricks 2.4's auto-sign, the path from prompt to published element has no manual bottleneck left.
What are the requirements?
WordPress 6.0+, Bricks Builder 1.9+ (2.4+ recommended for auto-sign), and a modern browser. Folder drops and file-paste require a Chromium-based browser; single and multi-file drag & drop works everywhere.
Stop copy-pasting. Start dropping.
Install Drop2Bricks in under a minute. Drop your first file in the next two. Wonder how you ever worked without it by lunch.
Download Drop2Bricks v1.2WordPress 6.0+ · Bricks 1.9+ (2.4+ recommended) · Fully self-contained · Zero frontend footprint