Interface and Coding Panels

The coding panels in FEWD Studio are bi-directional, establishing a direct link to your project files in the same manner as VS Code. Because they access and edit your files directly, changes occur in real-time.

In a traditional VS Code workflow, you must manually save (Ctrl+S) to trigger a refresh in a separate browser window. FEWD Studio eliminates this friction: the internal coding panels save immediately, allowing the integrated preview to update as you type.

This creates a seamless experience that mimics the immediate feedback of page builders like Webflow, Framer, or modern WordPress builders such as Elementor, Breakdance, Bricks, and Etch.

Panel Capabilities & Syntax Styling

The coding panels support Emmet. You can also hit the expand icon on the top of the panel for a full-screen coding experience with full syntax styling and, of course, Emmet.

Note: Syntax styling is currently unavailable in the smaller default panel display. This is a deliberate architectural choice to ensure the bi-directional, instant-update link remains stable and performant for the live preview.

The Default Panels

FEWD Studio provides five default panels: four dedicated to coding and one for asset management. While these cover the essentials, Premium versions of FEWD allow you to add additional panels to link with other project files. This includes a plain text panel for editing configuration files like .env and JSON, ensuring you never have to leave the FEWD environment to handle project specifics.

The HTML Panel

This is your primary entry point. Once your project directory is set, click the icon at the top left of the panel to select your main templating file. This will load your content into the interface preview.

Structure Synchronisation: This panel is hard-wired to the Structure Tree at the top right of the interface.

Adding items to the Structure Tree will automatically inject them into the HTML panel.

Editing code within the panel will immediately update the Structure Tree and the Inspector.

The Expanded View: By clicking the Expand Icon, you can transform the panel into a full-screen coding environment. This mode enables:

Full Syntax Highlighting.

Emmet Support.

Manual Save: Unlike the default panel, the expanded view requires a manual save to commit changes.

Instant Save: Please be aware that edits made in the default panel view are saved to your files immediately.

The CSS Selection Panel

This panel is dynamically linked to your Structure Panel and Structure Tree. It automatically focuses on the CSS selectors specifically related to the item you have selected, providing a targeted environment for styling.

Organised Nesting: To keep your workflow clean and modern, this panel supports Nested CSS. You can handle hover states, pseudo-elements, and media queries directly within the selector block you are currently editing.

Flexible Views:

The Globe Icon: Click this to view and edit your entire CSS stylesheet in full.

The Expand Icon: Opens a full-screen modal for a focused coding environment. This mode supports full syntax styling and Emmet.

Emmet Support: Emmet is available in both the default panel and the expanded modal to speed up your property writing.

Save Mechanics:

Default Panel: Features Instant Save, where edits are committed to your project files immediately as you type.

Expanded Modal: Requires a Manual Save to commit changes to the file.

The Global CSS Panel

While the first CSS panel focuses on specific elements, the Global CSS Panel is dedicated to the architectural foundation of your project. This is where you link the file containing your variables and design tokens.

FEWD Studio promotes modern web development best practices by encouraging a Single Source of Truth. By centralising your variables here, you ensure that design tokens remain consistent across your entire project.

Gen CSS Framework: This panel now includes Gen CSS, a built-in framework that simplifies global styling. Instead of writing every line of code by hand, you can use:

Color Pickers & Input Fields: Define your project specifics visually.

Automatic Generation: The framework automatically creates global variables and design tokens for you, mimicking the ease of use found in WordPress frameworks like Bricks or Breakdance.

Bi-Directional Sync: Whether you use the visual tools or write code manually, the Global CSS panel stays perfectly synced with the rest of your project files.

Workflow & Saving:

Default Panel: Features Emmet support for fast coding but lacks full syntax styling to maintain the instant-update link. Edits made here save immediately as you work.

Expanded View: Clicking the Expand Icon opens a full-screen environment with full syntax styling and Emmet. This larger view requires a Manual Save to commit changes.

The JavaScript Panel

The JavaScript panel completes the "Holy Trinity" of front-end development (HTML, CSS, and JS) within Feud Studio. This panel allows you to script interactivity directly alongside your structure and style.

Contextual Scripting: Much like the CSS Selection panel, this area allows you to add JavaScript specifically targeted to the elements currently selected in your Structure Tree. This keeps your logic modular and easy to track relative to your HTML.

Global Scripting: By using the Expand Icon, you enter a full-featured, full-screen coding environment. In this view, you are no share-locked to specific selectors and can manage your Global Scripts and broader logic for the entire project.

Save Mechanics:

Default Panel: Operates with Instant Save. Any code typed here is committed immediately to your project files, triggering a live update in the preview.

Full-Screen Mode: This expanded environment provides a more traditional IDE experience and requires a Manual Save via the save button to commit your changes.

The Assets Panel

The final default panel in FEWD Studio is dedicated to project asset management. A core tenet of professional web development is the local hosting of images, fonts, and other media to ensure performance, privacy, and long-term stability.

FEWD Studio simplifies this by providing a direct interface to your project's file system, eliminating the need to jump back and forth between your desktop and your editor.

Integrated File Management: You can define your asset directory and create new folders directly within the panel. This allows you to maintain a clean, organized project structure (e.g., /assets/images, /assets/fonts) without leaving the interface.

Drag-and-Drop Workflow: Adding files to your project is as simple as dragging them from your computer and dropping them directly into the Asset Panel. They are instantly moved into your defined project directory.

File Operations: Once imported, you have full control over your files. You can rename or delete assets directly within the panel, and those changes will reflect immediately in your local project folder.

Beyond the Default Panels: Full Project Management

While the five default panels cover the core of most front-end workflows, FEWD Studio is designed to handle the entire lifecycle of a professional web project. We recognize that complex builds often require more than just the "Holy Trinity" of HTML, CSS, and JS.

One of the biggest productivity killers in modern development is "Tab Fatigue"—having dozens of files open in VS Code while trying to cross-reference a browser preview. FEWD Studio solves this by allowing you to expand your workspace without leaving the interface.

Custom Coding Panels: If your project scales, you can open additional panels for specific HTML, CSS, or JavaScript files. This allows you to keep reference code or secondary logic visible alongside your primary work.

Plain Text Support: For configuration and data-heavy files, you can open a Plain Text Panel. This gives you full read/write access to:

.env files: Manage environment variables and API keys securely.

JSON files: Edit data structures, localization strings, or package configurations.

Integrated Terminal & Git: FEWD Studio includes a built-in terminal, allowing you to run build commands, install dependencies, or manage your environment. Once your changes are ready, you can use the Push to GitHub functions directly from the interface.

The "No-Switch" Philosophy

The goal of FEWD Studio is to provide a comprehensive environment where you never have to "step outside" to a separate IDE. By combining the direct file access of VS Code with the visual immediacy of a page builder, you get a single, unified source of truth for your entire project.