New features:

  • Custom CSS / Stylesheets Colorpicker (PC: Alt + Ctrl + C, Mac: ⌘ + ⌥ + C)
  • Format CSS code selection (PC: Ctrl + K, Mac: ⌘ + K)
  • Format CSS Document (PC: Ctrl + Shift + K, Mac: ⌘ + ⇧ + K)
  • Add interface only CSS inside Stylesheets

Features Rebuild:

  • Advantor UI facelift
  • Panelator UI facelift
  • Style Inspector UI facelift
  • Input focus indication
  • UI polish, closer to native Oxygen
  • Codesense Code refactoring
  • Blockpad Open default width
  • Blockpad toggle key (key between Esc and Tab)
Blockpad Toggle Key


  • Responsive App error
  • 3rd party compatibility: EE -> Panelator (sidepanel option), Z-index issue
  • Advantor -> Rich Text Editor, Z-index issue
  • Background Position Preset not working
  • Color picker - cannot see numeric color value
  • Panelator position (topbar)
  • Conditions Z-index issue
  • Selector detector cannot access to submenu items when panel width is below 300px
  • Detachable Stylesheets removed SAVE buttons due to possibility to not save and lose work (and it is not possible to fix that and focus Editor window due to browser security policy)

Snippets fix:

OxyToolbox feature Navigator collision , use snippet below and run on front-end only via Code Snippets

add_action( 'oxygen_enqueue_ui_scripts', 'recoda_ot_navigator_compatibility_fix' );
* Load custom CSS in the Oxygen editor.
function recoda_ot_navigator_compatibility_fix() {
// if this is not an Oxygen editor page, abort.
if ( ! defined( 'SHOW_CT_BUILDER' ) ) {
$css = '
#ct-viewport-container #ct-viewport-ruller-wrap{
height: unset !important;
wp_add_inline_style( 'oxygen', $css );


VIDEO: https://www.canva.com/design/DAFJxWTa_FQ/sUnNHbs_lps0Q-2Xwu6paA/watch?utm_content=DAFJxWTa_FQ&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink

New features:

  • Responsive App
  • Fancy border generator
  • Context Menu (Right click menu)
  • Reset Advanced
  • Add class / change ID at the same time
  • Detachable stylesheets Save button
  • Disable selector indicator covering input

Features Rebuild:

  • CSS Variables Suggestions (Token hints)
  • Responsive helpers & Canvas Settings


  • Safari compatibility
  • 3rd party plugins compatibility works
  • Live Server sticky header issue
  • Color picker - cannot see numeric color value


  • UI components polish

Admin area:

  • Added settings link inside Plugin list page
  • Redirect to settings after activation


*Fix: ACF scroll not visible, bug with a lot of custom fields inside dynamic ACF data picker
*Fix: Selector detector scroll not visible


NEW: We have launched PRO version with auto-updates!

0.9.8 P1

VIDEO: https://www.canva.com/design/DAFCoiRFcHw/view

[NEW] Theme Recoda 4 2W, closer to Oxygen 4 default theme
[FIX] User profiles not initialized after plugin update
[FIX] Hydrogen duplicated expand/ collapse icons
[FIX] Command UP fix
[FIX] Class switcher show all option
[POLISH] Recoda theme system, more integrated with Oxygen 4 theme system
[POLISH] Classic Margin/Padding view (Section Padding)

Description: Version 0.9.8 does not introduce anything special, it should offer a more polished UX and more compatibility with Oxygen 4.0 ecosystem. New theme is introduced to make UI closer to the new Oxygen 4.0 UI. 

0.9.7 P1

[NEW] User Profiles (extends User preference feature)
[NEW] Add elements Layout options (compact/ classic)
[NEW] Fullscreen mode rebuild (shortcut: spacebar)
[NEW] Enable/Disable Auto Unit Detection[NEW] Margin/Padding Layout controls (classic/ column/ default)
[FIX] Live server does not work in certain condition (open blank page)
[POLISH] Oxygen 4.0 Compatibility UI small polish

VIDEO: https://www.canva.com/design/DAFBie2oRT0/view

Description: User profiles extends existing User preference feature. It gives two profiles to save User Preference. Default profile is global and all users can access to that profile, Custom profile is unique to each user. So each developer could have own Custom profile, while clients could use Default profile slot. 
Add elements layout bring option to pick more Oxygen native (Classic view) or Compact view which was only option until 0.9.7 P1.
Fullscreen is new, now it is not real fullscreen but it can mimic Fullscreen pretty close by toggling open/close both panels.
Margin/ Padding Layout was in prototype with earlier Oxygen 4.0, now it is made for RC1 and will give you options to have bigger inputs in classic and column view so you could easier work with CSS Vars and CSS function.
Live server had some case when it would open blank page instead of fronted. For users which does not use it yet, it will show fronted, reload it on save and remove WP Admin bar to mimic incognito.

0.9.6 P4

🆕 Lock drag Padding controls - Disable Margin/Padding drag
🆕 Lock/unlock selector shortcut Ctrl+ L / Cmd + L

🖌️ Select suggestion by mouse click
🖌️ CSS Vars click and apply via mouse
🖌️ Fullscreen mode indication (toast message and icon)
🖌️ Global units changed logic, applies only to whitelisted properties (was working for every except excluded)
🖌️ Shift+A - Add panel shortcut, focus search

🔧 Grid Controls UI bug
🔧 CLI multiplication div*3 bug (>div*3 works)
🔧 Variable suggestion only works after changing user preference

0.9.6 P3

  • [Integration] ACSS  variables integration
  • [Powersheets] Adjustable font-size 
  • [PANELATOR] tooltips
  • [Live server] Remove margin from HTML element
  • [Advantor] Lock Advantor for locked selectors
  • [Class switcher] Small polish
  • [Bug fix] Hidden ruller
  • [Bug fix] Global units applied where not needed
  • [Bug fix] Global/ Local units don't trigger change in some cases
  • [Polish] Showing CSS vars when number is first character

0.9.6 P2

Quick fix:
Absolute position controls view looks broken

0.9.6 P1

Version: 0.9.6 P1
Compatibility: Oxygen 3.9 and Oxygen 4.0
Size (.zip): 146kb

Before we get into the changes, I am very excited about the new version and some features that make Oxygen a full-fledged IDE and allow a seamless transition from visual to manual programming. Workspace goes far beyond the changes made in UI / UX. As the name suggests, Recoda is all about programming and we develop solutions to help you programme more, better and smoother.
Made by hands, for hands.

🆕 NEW 1: Powersheets
It would be handy to have a VSCode-like editor that displays in a new window on your laptop, or even better, if you have multiple screens, you could have it display on the second monitor. Suggestions for Oxygen classes, smart suggestions for CSS properties, suggestions for CSS variables, almost everything you get inside desktop code editor.
Video: https://cln.sh/hKxjdH

🆕 NEW 2: Default units.
You can now set global units in rem, local units like % for Width, maybe px for Margin and the unit changes as you type.
Video: [https://cln.sh/lK97Ee]

🆕 NEW 3: Auto-detect units.
Preset units are good, but you should set them beforehand and sometimes they are not what you want. With auto-detect, you can write .5rem in the input and the unit will be changed to rem. If you use an unsupported unit, the unit will be set to none.
Bonus: If you use CSS functions (calc, min, max, clamp), unit also becomes none.
video: [https://cln.sh/mKoMBY]

🆕 NEW 4: CSS variables everywhere.
Recoda is built with CSS variables, we love them. So if you were a pilot of a plane with CSS variables, Recoda will be your co-pilot.
1. Interface inputs
2. Custom CSS
3. Stylesheets
4. Blockpad
5. Powersheets
Video 1: [https://cln.sh/eqzAFU]
Video 2: [https://cln.sh/cEwLFO]

🆕 NEW 5: Background position presets.
To be honest, it's a hacky solution, it's cool, but I do not think it will have a big impact on your workflow, but it was asked for, so I made it optional in case someone finds it useful.
Image: https://cln.sh/b4jzZi
Enable via User Preference - > Advanced Tabs - > Background Position Preferences

🖌️ Polish 1:  Class Switcher rebuild from scratch.
As far as functionality goes, almost everything is the same. This should fix the weird UX error that can occur when you use the Oxygen class box to add a class. You should now be able to delete classes with a single click, and the display of locked classes is now better and more consistent with the rest of UI.

🖌️ Polish 2: Shortcuts without jQuery.
Our commitment to the future. We want less dependencies, so we rely on our code.

🖌️ Polish 3: Code refactoring.
Our commitment to the future. We look at the entire codebase and shake it up a bit to remove some silly workarounds that were introduced in the past. There are still some left, but we will do this from time to time.

🖌️ Polish 4: Adding prefixes to Recoda CSS variables.
CSS variables are now prefixed, which should help avoid collisions.

🖌️ Polish 5: Live Server.
Now opens in a new tab, should remove WP admin bar after opening and after each reload. Fixed some other issues. If you try to open Live Server while editing reusable files, it shows that it is not possible.

🖌️ Polish 5: Blockpad
Now Blockpad shows the name of the code block and opening the Blockpad view can be done through the code block interface.
Image: https://cln.sh/ehIOg4

🔧 Fix 1: The command bar does not add a space when renaming elements with @.
🔧 Fix 2: Shift-B in code editor prevents uppercase letters (collision with function).
🔧 Fix 3: Ruler hidden behind command bar. 
🔧 Fix 4: Insert options are hidden in reusable templates due to Recoda CSS.