Features overview

FEWD Studio is designed to support real front-end development, not replace it. Every feature exists to make you faster, more organised and more in control of your code. Rather than introducing abstraction or proprietary systems, FEWD enhances the way developers already work.

Core development environment

HTML panel

Work directly with your document structure through a visual representation of your DOM.

• Add, remove and reorder elements with clarity
• Maintain proper semantic structure
• See your hierarchy at a glance
• Write directly to your HTML file with no hidden layers

CSS panel

• Write and manage styles cleanly
• Apply reusable classes instead of inline styling
• Support structured approaches such as BEM
• Keep styling separate from structure

Globals panel

Build a solid foundation for every project using a layered global system.

• Define brand values using raw variables
• Map design tokens for scalable styling, including your own token names
• Apply reset and base styles consistently
• Keep control of typography, spacing and colour systems

JavaScript panel

• Write clean, intentional scripts
• Attach interactions directly to your elements
• Work with vanilla JavaScript or integrate frameworks

Assets panel

Manage your project files through direct access to your file system.

• Organise images, fonts, SVGs and media
• Maintain clean folder structures
• Optimise images without leaving the app

Flexible panel system

Additional HTML, CSS and JavaScript panels let you work across multiple files at once: compare structures side by side, split global and module CSS, and keep modular scripts in view. See The coding panes.

Development tools and workflow

Terminal

A built-in terminal that starts in your project. Run commands, install dependencies, run build tools and manage Git without leaving FEWD. See Terminal and git.

File explorer

Create folders and files and manage your working directory, reflecting your real file system rather than a virtual one.

Push to Git

Commit, tag and push straight to your repository. FEWD tells you where you stand before you push.

Integration and export

Export to Bricks

Export clean HTML ready for import into Bricks Builder and similar tools, so you avoid rebuilding layouts inside CMS environments.

Astro and framework projects

Open and edit Astro projects, build components visually, and write collection entries. See Creative and Framework mode.

Advanced editing

Code modals

Expand any panel into a full-screen coding environment with syntax highlighting and Emmet when you need to focus.

Speed and efficiency

Inserts

Structured snippets for HTML, CSS and JavaScript. See Inserts and the inserts reference.

Safe by design

Opening a project from somewhere you do not know is a risk in any editor. FEWD Studio asks before it runs a project’s own code, installs packages with safeguards, and keeps the preview in its own sandbox.