Opening a project

Open takes a folder. That folder stays exactly as it is — FEWD Studio does not add a config file, a manifest or a hidden directory of its own.

The arrangement

The preview renders your page. Under it sit the code panes for HTML, CSS and JavaScript, editing the files in your project directly.

Down the side is the project panel: the folder as a tree, with file and folder creation where you would expect it.

Rearranging

Panes can be dragged to reorder and dragged to resize. The bottom panel resizes too, which matters when you are working in a long stylesheet.

The bottom toolbar carries a mode indicator, so it is always clear what the current pane is editing.

The assets pane

Images and fonts the project uses are listed here, so adding one does not mean leaving for the file manager and guessing at a relative path.

Live preview

The preview updates as you type rather than on save, and it can be resized to any viewport width. Element highlighting works inside it — see Inspecting and editing an element.