Work Modes (Compatibility)

Introduction

FEWD Studio offers three different work modes to enable compatibility with a range of project types, from basic HTM?L projects to Astro or Next.JS proje ts.

In this document, we’ll take a look at the different modes, what they are capable of and how best to use them.

Creative Mode

Creative Mode is the default FEWD Studio mode, providing desktop coding with the visual drag and drop pagebuilder experience for which it was created.

In Creative Mode, we have use of the Elements Panel alongside the Structure and Inspector Panels. This offers Click To Add basic HTML elements that appear in the Structure Panel; you are then able to rearranged the elements as well as edit attributes such as HTML tags, manage classes and add to field inputs related to the element type.

At the bottom of the app, we have use of the default Editor Panels, and can add additional panels if our project requires that access.

Creative Mode is where all features are available for a desktop coding pagebuilding experience for HTML, CSS and Javascript projects. This is a perfect space for these types of projects, but also is the best learning space for those looking to learn the initial craft of front-end web development.

Component Mode vs HTML Mode

Creative Mode offers two distinct modes as they serve different purposes.

HTML Mode adds the full HTML Document elements to the document, as an output. This allows for additions to the Head Section and of JS to the section, so that you can properly plan your project’s links to assets.

Component Mode removes the HTML Document elements and isolates the output to include only the HTML elements you add and create. This is necessary when working in Frameworks, such as Astro, and is perfect for retaining full use of Creative Mode when building isoluated HTML elements such as components.

Framework Mode

Framework Mode is how FEWD Studio can ensure compatibility with projects that require more complex syntac than simple HTML.

While Component Mode in Creative Mode should allow editing of Astro projects with use of the Structure Panel, users may prefer to be safe than sorry by removing the Structure Panel’s auto-editing of the HTML on the page.

Framework Mode retains the Default Coding Panels as an exceptionally well organised environment, along with the auto-updated live preview.

It is necessary to use Framework when editing Astro or Next.JS templates, and FEWD Studio should automatically switch to this when you connect your Default HTML/Template file to a .astro or Next.JS filetype.

Deep Code Mode - (Rainbow Mode)

For those who like the pretty colours of Syntax Styled Coding, we have Deep Code Mode (Rainbow Mode).

Deep Code Mode is a mode you can toggle when in Framework Mode, and it allows use of the Syntax Styling within the smaller coding panels. Due to the nature of Syntax Styling against the methods used to automatically read, parse and update files, Syntax Styling is only available in “Click to Save” coding panels -such as the full screen modals. Therefore, in Rainbow Mode, we have the option of the trade-off: use Syntax Styling in the default panels, but click to save.

This is more similar to how users may be used to working in VSCode, which also requires a click to save and in order to preview. Still, FEWD Studio offers the convenience of its interface and all-in-one environment, with the easy to use and responsive Preview.