Docs
Search…
⌃K

Features overview

Workflow boosters

One-Click Workflow

You can see our one-click workflow solutions on the Interface Overview page:
  • Advantor - 1 click advanced options
  • Panelator - 1 click structure, selector, stylesheets, settings, style inspector
  • Class Switcher - zero-click class overview, 1-click selector switch

Left / Right Panel resizer

Resize both panel sizes by dragging, you need more space set how much you need:

Shortcuts

There are plenty of shortcuts inside Workspace so when we talk about shortcuts we have different areas of shortcuts which you can check here:

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:

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:
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. 1.
    Manually entering values
  2. 2.
    Select by common market-share screen size
  3. 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 brings developers' favorite tools closely together with Oxygen Builder. We love writing code and can help you make your life easier.

Live Server

You work with two screens (or with a large single screen). You can preview on one screen and develop on the other. When you save, the front-end preview is reloaded.
If you like to reload after each save to see the changes on the frontend, this feature is not for you.

Live Server Scroll Sync

Enabling this feature will enable bidirectional scroll synchronization between Canvas and the preview. This can be useful so that you do not have to scroll to find the content you are editing in Oxygen Builder and can easily check it from the developer tools in the frontend.
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 that generates HTML for you.

Common use cases

  1. 1.
    Adding multiple classes
  2. 2.
    Adding multiple attributes
  3. 3.
    Adding single class to multiple elements
  4. 4.
    Adding single attribute to multiple elements
  5. 5.
    Rename element
  6. 6.
    Rename multiple elements
  7. 7.
    Duplicate multiple
  8. 8.
    Adding Oxygen elements with custom tags

Advanced use cases

  1. 1.
    Creating own component templates (reusable elements)

Is this meant only for advanced users?

No, you can start improving your workflow by adding classes from the command line. If you need to add more than one class, you'll see the benefits of performing common operations from the command line. And soon you'll be able to save more and more time by using simple commands in your workflow.

What can you do via command line.

Anything, or almost anything, you can imagine. We are in the process of developing options, and to be honest, we do not even know all the possible directions you can take to customize your workflow. After developing commands to add classes, we found that you can even use them to import CSS framework classes into Oxygen Builder. So the only limitation is your imagination
If you want to learn more about the command line, start here:

CodeSense

Why do you need CodeSense? It's the only deep integration for suggestions available on the market and brings Oxygen a few steps closer to a full-fledged coding development environment.
What problem does it solve? You do not have to write code in a code editor and then paste it into Oxygen.
With the deep integration of CodeSense into Oxygen Builder, we think you do not need to do this nonsense anymore CodeSense is an autocomplete/suggest feature developed by Recoda for Codemirror code editor and with deep integration into Oxygen Builder.
You can use it inside:
  1. 1.
    Stylesheets
  2. 2.
    Custom CSS
  3. 3.
    Custom JS
  4. 4.
    BlockPad Editor
  5. 5.
    Command-line
Why CodeSense? Suggestions for Oxygen classes, hand-picked suggestions for CSS properties with suggestion options exclusively related to them.
What does this mean for the user? Write CSS like never before, without typos.
Will you love it? If you love writing CSS, you should 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:

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%.
Why CodeSense? Suggestions for Oxygen classes, hand-picked suggestions for CSS properties with suggestion options that are exclusive to those properties. What does this mean for the user? Write CSS like never before, without typos. Will you love it? If you love writing CSS, you should just give it a try.
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:
/*#IMPORT*/
like shown on image below:
Why you need this? This comment will suggest Workspace to import this stylesheet into the editor. If we add all the stylesheets without checking, it might collide with the editor and cause strange things.
What if the collision happens anyway? With this method, the probability is much lower, but due to the nature of CSS, it can still happen. You can apply the quick fix (icon next to Import Stylesheets) and remove them from the editor.
​
​
​