Features overview

Workflow boosters
One-click Workflow
You can see our one-click workflow solutions inside page Interface overview:
Advantor - 1 click advanced options
Panelator - 1 click Structure, Selector, Stylesheets, Settings, Style Inspector
Topbar breakpoints
Class switcher - zero click classes overview, one click selector change
Interface overview
Left / Right Panel resizer
Resize both panel size by dragging, you need more space set how much you need:
Shortcuts
There are plenty shortcuts inside Workspace so when we talk about shortcuts we have different areas of shortcuts which you can check here:
Shortcuts
BlockPad Editor 
ALL
Shorcut
Action
Ctrl-D
Apply PHP/HTML, CSS, JS
Ctrl-S
Apply PHP/HTML, CSS, JS
+ Oxygen Save action
PHP/HTML
Shorcut
Action
Ctrl-Q
Fold / unfold code
Ctrl-J
Jump to matching tag
CSS
Shorcut
Action
Ctrl-Q
Fold / unfold code
JS
Shorcut
Action
Ctrl-Q
Fold / unfold code
Command-line 
Shorcut
Action
Esc
Escape from command-line
Ctrl-H
Command-line history suggestion of all applied commands
requested
Escape from command-line and select first node
Workspace for designers
Grid Guide
This acts like grid guides inside Figma / Sketch and other website design applications. It will give you option to set the same grid which you were using inside Figma/ Sketch/ Adobe XD so you have anchor when translating design into real website.
If you want learn more about this feature:
Grid Guide
X-mode
Put your design under X-ray, you will see it in gray-scale preview and all the elements will be outlined. This can be very useful when you want look lower-fidelity preview of design and outline can be useful to see size of every element and faster detect where problem in design occur.
X-mode + Full-screen
Viewport handles
Viewport handles are little responsive helpers which will help you to see how your design is going too look on popular devices width. They are placed on top of the Viewport ruler and on hover they will show what devices are are on that screen width, and on click you will adjust your canvas to see and evaluate design at certain width.
Viewport handles
Canvas Zoom control
You can have auto-zoom or responsive behavior on default breakpoint. Default is resposive, if you want auto-zoom you can do it via User Preference, explained here:
User preference
If you don't have enough big screen to see how it would look like on some big screen. You can use Canvas Settings on default breakpoints to simulate Zoom out to preview any screen size.
Responsive helpers 
If you want to set two dimensional Canvas control you can use Responsive Helpers, they have 3 ways of controls:
1.Manually entering values
2.Select by common market-share screen size
3.Select specific device
You can find more about this here. 
Background position presets
Helper tool to select standard Background position from 9 common predefined values.
Activate Background Position Presets
Workspace for Developers
Recoda Workspace is bringing developers favorite tools tightly integrated with Oxygen Builder. We like write code and here is how we can help make your life easier:
Live Server
You are working on dual screen setup (or on some huge single screen). You can have fronted preview on one and develop on another. When you save, it will hot-reload front-end preview.
If you like reload after every save to see changes on the front-end this feature is not for you.
Live Server Scroll Sync
If you check this features it will enable bi-directional scroll sync between Canvas and fronted preview. This can be useful so you don't have scroll to find content which you are currently editing inside Oxygen Builder and easily inspect it via developer tools on front-end. 
You scroll one, other will be synced.
Command-line
This feature is inspired by 3D modeling software and Emmet. It gives you superpowers to write Emmet inspired syntax which will generate HTML for you.
Common use cases
1. Adding multiple classes
2.Adding multiple attributes
3.Adding single class to multiple elements
4.Adding single attribute to multiple elements
5.Rename element
6.Rename multiple elements
7.Duplicate multiple 
8.Adding Oxygen elements with custom tags
Advanced use cases
1.Creating own component templates (reusable elements)
Is this meant only for advanced users?
No, you can start enhancing your workflow by adding classes via command-line, when you need add more than one class you will see benefits of doing common operations via command-line. And soon by utilizing easy commands in your workflow you can save more and more time.
What all can you do via command-line.
All, or almost all what you imagine. We are developing possibility, and to be honest we don't even know all possible directions in which you can fit to your workflow. After developing commands for adding classes we realized that you can use it for importing even CSS framework classes inside Oxygen Builder. So only limitation is your imagination. 
If you want learn more about command-line, start here:
Intro
CodeSense
Why do you need CodeSense? It is only deep integration for suggestions available in the market and puts Oxygen few steps closer full-blown coding development environment.
What problem does it solve? Don't write code in Code editor and then paste back in Oxygen. With CodeSense deep integration with Oxygen Builder we think that you don't need do this silly things anymore. 
CodeSense is Recoda custom developed auto-complete / suggestions for Codemirror code editor and with deep integration with Oxygen Builder.
You can use it inside:
1.Stylesheets
2.Custom CSS
3.Custom JS
4.BlockPad Editor 
5.Command-line
Why CodeSense? Oxygen classes suggestion, hand picked CSS properties suggestion with only suggestion options related to them.
What does it means to user? Write CSS like never before, without any typo.
Will you love it? If you like writing CSS, we will say just try it.
Warning: You could fall in deep love. Don't say we did not warn you 😄
​
If you like to write CSS look for more details here:
What is CodeSense
BlockPad Editor
What does this? It enables Code block 3 panel code preview.
Will you like it? If you like coding playgrounds like Codepen, JSbin etc., welcome home!
Is this inspired by Codepen? 100%. 
We all like and use Codepen. This is little different, this is not powerful and not meant for same purpose as Codepen. GUI is quite heavy inspired by our favorite tool, but this is developed to take that familiar style and bring it inside Oxygen Builder. 
Features:
CodeSense
Draggable
Resizable
Collapsable 
BlockPad Editor
Import Stylesheets
Problem: You have CSS variables for colors inside Stylesheets, but you can't preview colors when define that variables in Global colors.
Before/After importing Stylesheets
How to import?
At start of Stylesheets you need paste following comment:
1
/*#IMPORT*/
Copied!
like shown on image below:
Why you need this? That comment will suggest Workspace to import that Stylesheet inside Editor. If we add all Stylesheets without control it could collide with Editor and make weird thing.
What if collision still happens? With this method chances are lot smaller, but because of nature of CSS yes it can happen. You can apply Quick fix (icon next to Import Stylesheets) and it will remove them from Editor.
​
​
​
Getting started - Previous
Interface overview
Next - Getting started
User preference
Last modified 1mo ago