Give your Elementor code a proper workspace

Isolated full-screen overlay. Opens over the whole Elementor editor in its own Shadow DOM layer, so Elementor's styles cannot affect it and its styles cannot leak into Elementor.

Browser full screen. A toolbar button switches the workspace into true browser full-screen mode and back.

Three workspace modes. Choose Code only, Preview only, or Split with code and preview side by side.

Resizable split. Drag the divider, use the arrow keys or double-click to reset it, and the layout stacks vertically on screens narrower than 900px.

Light and dark themes. Switch themes in one click, with dark as the default.

Remembers your setup. Theme, mode, split position, device, word wrap, font size, indent size, auto refresh, site styles and console visibility are restored next time you open it.

CodeMirror 6 editor. Syntax highlighting for HTML with embedded CSS and JavaScript, line numbers, active line and bracket matching.

Search and replace. A find panel with live match counts, match case, whole word and regular expression options, and replace one or replace all.

Multiple cursors and column selection. Select the next occurrence with Ctrl or Cmd+D, add cursors with Alt+Click and make column selections with Alt+Shift+Drag.

Code folding. Fold and unfold blocks from the gutter, or fold and unfold everything from the menu or keyboard.

Smart HTML help. Tag and attribute autocomplete, automatic closing tags, matching tag highlighting and highlighting of other occurrences of the selected text.

Editor preferences. Toggle word wrap, set the font size between 10px and 22px, and switch indentation between 2 and 4 spaces.

Prettier formatting. The Format button or Shift+Alt+F formats the whole document, including CSS and JavaScript inside style and script tags.

Careful formatting. Only the changed part of the document is replaced, unchanged code reports Already formatted, and formatting is skipped if you edit while it runs.

Jump to format errors. If the code cannot be formatted, the error is shown and the cursor moves to the reported line and column.

Live syntax checking. HTML, CSS and JavaScript syntax errors and mismatched closing tags are underlined as you type.

Problems panel. The status bar shows No problems or a problem count, and a click or Ctrl or Cmd+Shift+M opens the full list.

Formatter on demand. The formatting engine is downloaded only the first time you click Format.

Sandboxed live preview. Your code runs in an isolated frame that refreshes shortly after you stop typing, with an Auto toggle and a manual Refresh button.

Device sizes. Preview at Desktop, Tablet (768px), Mobile (375px) or any custom width from 200px to 3000px, with wide sizes scaled to fit.

Site styles. Optionally loads Elementor's frontend CSS, your active Elementor Kit, theme stylesheets, theme.json global styles and Customizer Additional CSS.

Built-in console. Captures console output, JavaScript errors, unhandled promise rejections and failed resource loads, links errors to the matching line, and shows the latest error in a strip when hidden.

Shortcodes in preview. Shortcodes in your code are rendered by WordPress on the server before the preview loads.

Smooth refresh. Keeps the preview's scroll position and swaps in the new version only once it has loaded.

HTML Studio widget. Appears in the General category and is found by searching for HTML Studio or keywords such as html, code, css, javascript, embed or script.

Panel launcher card. Shows the line count and size, which languages are present, including shortcodes, and an Open editor button.

Open from the canvas. Double-click the widget on the canvas, or hover it and click Edit with HTML Studio.

Canvas display options. Show a live isolated preview, a lightweight summary card or inline output per widget, with Auto height up to 900px or a Fixed height from 80px to 1600px.

Apply and Save. Apply with Ctrl or Cmd+Enter writes the code to the widget, and Save with Ctrl or Cmd+S also saves the Elementor page.

Unsaved change guard. Closing with unapplied changes offers Keep editing, Discard or Apply and close, and the status bar always shows whether changes are applied.

Verbatim output. HTML, CSS and JavaScript are printed exactly as written, with no escaping or rewriting.

Shortcode processing. WordPress shortcodes in your code run on the front end by default, with a per-widget Process shortcodes switch.

No front-end assets. The plugin's scripts load only inside the Elementor editor and preview, never on the public site.

Native-compatible wrapper. Uses the same wrapper markup as Elementor's HTML widget, so theme CSS selectors keep working and the Advanced tab remains fully available.

Cache friendly. Output is marked as static, so Elementor can cache it.

Site scan. Lists every page, post or template containing native HTML widgets, with counts of native widgets, HTML Studio widgets and backups.

Dry-run preview. Shows each widget's ID, line count, size, a code excerpt, the settings that will carry over unchanged, and any warnings.

Selective conversion. Tick the widgets to convert, confirm with a checkbox, then migrate only those widgets.

Lossless by design. HTML Studio stores code in the same setting as the native widget, so conversion changes only the widget type and keeps every other setting byte for byte.

Backups and restore. The full original page data is backed up before every migration and can be restored or deleted from the same screen.

Optional hiding of the native widget. A setting hides Elementor's HTML widget from the panel for new content, while existing native widgets keep working.

Code access gate. Only users with the unfiltered_html capability who are also allowed custom HTML in Elementor's Role Manager can add the widget or open the editor.

Per-post check. Editing and preview rendering also require permission to edit that specific post.

Admin-only migration. The Tools screen and migration actions require manage_options as well as code access permission.

Nonce-protected requests. All plugin REST routes use WordPress cookie authentication with a REST nonce and their own permission checks.

html_studio_can_edit_code filter. Changes who may use the code editing features.

html_studio_preview_styles filter. Changes which stylesheets the Site styles preview option loads.

html_studio_max_render_bytes filter. Raises or lowers the size limit for server-side shortcode rendering in the preview, which defaults to 8 MB.

JavaScript API. Open the workspace programmatically in the Elementor editor with window.HTMLStudio.open(container) or window.HTMLStudio.openForElement(id).