Docs
Search…
What is Recoda Workspace?
Getting started
Start exploring
Interface overview
Features overview
User preference
Shortcuts
QuickFlow Actions
Grid Guide
Command line
Intro
Commands
My first commands
Import GH Gist
CodeSense
What is CodeSense
Changelog
Powered By GitBook
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

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:

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 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. 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 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:

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. 1.
    Stylesheets
  2. 2.
    Custom CSS
  3. 3.
    Custom JS
  4. 4.
    BlockPad Editor
  5. 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:

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:
/*#IMPORT*/
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 5mo ago
Copy link
On this page
Workflow boosters
One-click Workflow
Left / Right Panel resizer
Shortcuts
BlockPad Editor
Command-line
Workspace for designers
Grid Guide
X-mode
Viewport handles
Canvas Zoom control
Responsive helpers
Background position presets
Workspace for Developers
Live Server
Live Server Scroll Sync
Command-line
CodeSense
BlockPad Editor
Import Stylesheets