Features overview
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
Resize both panel sizes by dragging, you need more space set how much you need:
There are plenty of shortcuts inside Workspace so when we talk about shortcuts we have different areas of shortcuts which you can check here:
Shorcut | Action |
|---|---|
Ctrl-D | Apply PHP/HTML, CSS, JS |
Ctrl-S | Apply PHP/HTML, CSS, JS + Oxygen Save action |
Shorcut | Action |
|---|---|
Ctrl-Q | Fold / unfold code |
Ctrl-J | Jump to matching tag |
Shorcut | Action |
|---|---|
Ctrl-Q | Fold / unfold code |
Shorcut | Action |
|---|---|
Ctrl-Q | Fold / unfold code |
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 |
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:
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 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
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.
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
Helper tool to select standard Background position from 9 common predefined values.
Activate Background Position Presets
Recoda Workspace brings developers' favorite tools closely together with Oxygen Builder. We love writing code and can help you make your life easier.
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.
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.
This feature is inspired by 3D modeling software and Emmet. It gives you superpowers to write Emmet-inspired syntax that generates HTML for you.
- 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
- 1.Creating own component templates (reusable elements)
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.
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:
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.Stylesheets
- 2.Custom CSS
- 3.Custom JS
- 4.BlockPad Editor
- 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:
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
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.
Last modified 1mo ago