Click one of the "plus" buttons, then click the component in the menu
2
Drag & drop component from the left menu . It can be dropped on the "plus" button, on a place holder or in between components in your page.
3
Add from Cheat Sheet by checking the box and selecting the component you want to add, then click one of the "plus" buttons.
You can hide "plus" buttonsin the settings > assisting elements section.
Insert a component in to a text.
It can be done in 3 steps:
1
Double click on the text or click the pen icon to switch to edit mode.
2
Click the place on the text where you want to insert component. Click the insert button. Then placeholder appears.
3
Drag & drop component from the left menu on the placeholder or exit the edit mode and click the center "plus" button, on a placeholder .
Wrap selected component(s).
It can be done in 3 steps:
1
Select the component with the mouse click or several components by checking the box for group editing.
Multiple components can be selected even in different containers.
2
Click the wrap icon in the INNER ELEMENTS section:
3
Components menu will appear. Click on the component you want to wrap in as a parent. Selected components will be moved to a new parent. Parent will be placed in to the slot of the first selected component.
Resizing
Changing resize units.Before resizing you can choose resizing units px, % ... or other values. When resizing WIDTH of children inside FLEX containers it will change value of FLEX-BASIS. if you want to modify WIDTH instead, select "auto" in resizing units menu, or set FLEX-BASIS to auto in style declaration.
If you remove flex-basis: auto declaration or change it to some other value, it will default to modifying FLEX-BASIS again. Additionally, you can toggle off snapping in settings for smooth resizing, or change grid cell width and height for snapping gaps. If resizing doesn't work, check if element has max-width/height or min-width/height values set and remove them.
PLUS buttons functions
Tether to the sides. Components tethered this way maintain position even if there is no space on the side. This is a non-responsive tethering. It is suitable for positioning elements inside small components
Responsive tethering. Jumps to the bottom if not enough space.
Inserts new element before, after or inside selected element. Doesn't change existing structure.
Drag icon actions
To adjust various properties you can select DRAG ICON ACTION. Use keyboard arrow keys for precise adjusting of position, margins, padding, scaling & rotation
Export/Convert To React
In order to convert your HTML page to React you need to import your HTML page from your computer file system (or internet using CHEAT SHEET functionality). Before exporting toggle on "export as REACT" switch. It will export to your computers file system as "public" and "src" folders. You need to install REACT and merge or replace "public" and "src" folders.
Synchronize With External Code Editor
To synchronize with external editor open quick save options drop-down and toggle on "SAVE TO:" disk. A file saving prompt will appear. Save the file and toggle on "Auto Save". For code changes to reflect in browser graphical editor - toggle on "Auto update (synchronize)". You can work with external code editor and NEEDEE graphical editor simultaneously, just wait for changes to propagate completely before and after editing.
Free cloud hosting options
Generated and exported code can be hosted on various cloud hosting platforms:
, then click the component in the menu 
. It can be dropped on the "plus" button
then click one of the "plus" buttons
insert button. Then placeholder appears.
selected component(s).
