dev

This script/stylesheet is for PERSONAL use only!

You are free to install this script/stylesheet for yourself, but it is not allowed to be used wiki-wide (e.g., in MediaWiki:ImportJS, MediaWiki:Common.js, MediaWiki:Common.css, MediaWiki:Fandomdesktop.js, MediaWiki:Fandomdesktop.css, or MediaWiki:FandomMobile.css), as it would violate Fandom's Terms of Use.
(See the customization policy)

DynamicStudio is a personal JavaScript tool that adds a floating, resizable editor to every page on your wiki. It provides three editors — wikitext (with live preview), CSS, and JavaScript — in a single draggable window, along with syntax highlighting, code actions, import/export, and a range of customisation options.

Installation

Usage

Once installed, DynamicStudio appears automatically on every page. Click DynamicStudio in the toolbar at the bottom of the page, or press Q on your keyboard, to open or close it. The window can be dragged by its header and resized from any corner.

Tabs

DynamicStudio has three tabs:

Tab Description
Wikitext A wikitext editor with a resizable split-pane live preview. Drag the divider to reveal the preview, which updates automatically as you type. The status bar shows word and character counts.
CSS A CSS editor with syntax highlighting, line numbers, error detection, and a live preview — click ▶ Run to apply your CSS to the current page instantly.
JS A JavaScript editor with syntax highlighting, line numbers, and error detection. Click ▶ Run to execute the script on the current page. A confirmation warning is shown the first time.

Smart Editing

All three editors support the following editing features:

Feature Description
Find & Replace Press Ctrl+H to open the find and replace panel. Use the arrow buttons or Enter / Shift+Enter to cycle through matches.
Undo / Redo Ctrl+Z to undo, Ctrl+Y or Ctrl+Shift+Z to redo.
Indentation Tab to indent, Shift+Tab to dedent. Supports multi-line selection.
Bracket Pairing Opening brackets, quotes, and parentheses are automatically closed. Pressing a closing character skips over the auto-inserted one. Backspace removes matching pairs.
Code Folding Click the arrow in the gutter next to any block opener to fold or unfold it.

The Wikitext editor additionally supports:

Feature Description
Wikilink completion Typing [[ automatically inserts ]].
Template completion Typing {{ automatically inserts }}. Pressing Enter inside a template inserts a new parameter line.
HTML tag completion Typing > after an opening tag automatically inserts the matching closing tag. Backspace removes the pair.
Bold / Italic Typing automatically inserts a third quote for italic, and ' for bold.

Code Actions

Click the ≡ menu in the header while on the CSS or JS tab for additional actions:

Action Tab Description
▶ Run CSS / JS Applies CSS live to the page, or executes the JavaScript.
✦ Beautify CSS / JS Reformats the code with consistent indentation and spacing.
⬡ Minify CSS / JS Removes whitespace and comments to produce compact code.
+ Add !important CSS Adds !important to every declaration. Works on a selection or the whole editor.
− Remove !important CSS Removes all !important declarations. Works on a selection or the whole editor.

Import & Export

Click the ⇅ button in the header to open the import/export panel. You can export your wikitext, CSS, JS, or all three together as a compressed string to share or back up. Paste a string to import. Importing JavaScript will show a warning asking you to review the code before proceeding.

Customisation

DynamicStudio can be customised by adding a .dynamic-studio element to Special:MyPage/global.css and setting any of the following CSS custom properties.

Presets

Presets are visual themes that each add their own distinct twist to DynamicStudio's appearance. Set the preset using --ds-style-preset.

Preset Description
Default The base style. Tabs are displayed in the header for switching between editors.
Folders Gives each tab a coloured strip styled to resemble a folder tab. The header colour changes to match the active tab's colour. All tab colours and text colours are fully customisable via CSS variables.
Notepad Reskins all editors to look like a ruled A4 sheet of paper, complete with horizontal lines and a left margin. The line colour, margin colour, background colour, and font are all customisable.
Minimal A stripped-back canvas designed for users to style themselves. Use the provided CSS variables to make DynamicStudio your own.

Parameters

.dynamic-studio {
    --ds-style-preset: Default;

    /* Folders preset */
    --ds-tab-color-notes: ;
    --ds-tab-color-css: ;
    --ds-tab-color-js: ;
    --ds-tab-text-notes: ;
    --ds-tab-text-css: ;
    --ds-tab-text-js: ;

    /* Notepad preset */
    --ds-notepad-line-color: ;
    --ds-notepad-margin-color: ;
    --ds-notepad-bg-color: ;
    --ds-notepad-font: ;

    /* Minimal preset */
    --ds-minimal-gutter-color: ;
}
Property Description Accepted values
--ds-style-preset Controls the overall visual style of DynamicStudio. Default, Folders, Notepad, Minimal
--ds-tab-color-notes / --ds-tab-color-css / --ds-tab-color-js Sets the background color of each tab. When that tab is active, the header colour also changes to match. Only applies when the preset is Folders. Any valid CSS color
--ds-tab-text-notes / --ds-tab-text-css / --ds-tab-text-js Sets the text color of each tab. Only applies when the preset is Folders. Any valid CSS color
--ds-notepad-line-color Sets the color of the ruled lines. Only applies when the preset is Notepad. Any valid CSS color
--ds-notepad-margin-color Sets the color of the left margin line. Only applies when the preset is Notepad. Any valid CSS color
--ds-notepad-bg-color Sets the background color of the editors. Only applies when the preset is Notepad. Any valid CSS color
--ds-notepad-font Sets the font family used in all editors. Only applies when the preset is Notepad. Any valid CSS font family
--ds-minimal-gutter-color Sets the background color of the line number gutter. Only applies when the preset is Minimal. Any valid CSS color

See Also

Changelog

Date Notes Updated by
May 25, 2026 First publication of the tool. DaBritishWaffle
Text above can be found here (edit)