Creative Mode and Framework Mode

FEWD Studio works two ways, and which one you get is decided by the file you open rather than by a setting.

Creative Mode

The default, and the visual one. FEWD parses your HTML into a structure tree. Adding an element to the tree writes it into the file; editing the file updates the tree. The Inspector edits the selected node’s tag, classes, ID and fields. The element toolbar adds headings, text, images, links and containers.

This is a page builder that happens to be writing your real files, and it is the best place to be for plain HTML, CSS and JavaScript work.

Component and Full HTML

Creative Mode outputs one of two things, and the toggle sits above the preview.

Full HTML writes a complete document — doctype, <head>, <body> — so you can plan your links to stylesheets, fonts and scripts properly. There is a <head> editor for exactly that.

Component writes only the elements you added, with no document wrapper. That is what you want when the markup is going to be included in something else.

CSS is unaffected by the toggle either way.

Framework Mode

An .astro, .jsx, .tsx or .vue file opens here automatically.

There is no structure tree, and that is the point. A tree is a document parsed into nodes and written back out of them — which is fine for HTML and destruction for {% block %}, {{ partial }} or <%= x %>, none of which survives a round trip through a DOM.

So in Framework Mode the HTML pane holds the file as text, the preview comes from your dev server, and the structure panel is out of the way. Styling still works from the preview.

Framework Mode needs a licence.

Templates open as code

A .njk, .liquid, .hbs, or a Hugo layouts/*.html, opens as code with the reason named.

FEWD would rather open a plain HTML file as code by mistake — annoying, visible, and one click to undo — than rewrite somebody’s template. A false positive costs you a moment. A false negative costs you the file.

Where the extension does not say enough, the content is read. Hugo’s layouts are ordinary .html files, so the extension alone cannot decide it.

Deep Code Mode

A toggle available inside Framework Mode, marked with the code icon.

It mounts a full editor inline in each coding pane — syntax highlighting, proper selection, the lot — with a save button, because an editor that parses as you type and a file that writes as you type do not combine safely.

That trade is the whole of it: colour and control, in exchange for pressing save. If you are coming from VS Code it will feel like home.

What is not supported

Next.js is not supported. A .jsx or .tsx file will open in Framework Mode and you can edit it, but there is no dev-server integration, no route handling and no awareness of the framework. Astro is the framework FEWD knows.

Completions do a lot of the typing

On an .astro file, typing < and a capital letter offers every component in the project — not only the ones already imported — and accepting one writes the import for you. Inside a component’s tag, its own props are offered, read from its Props interface.

That is what makes Framework Mode less of a step down from Creative Mode than it looks: the parts that would otherwise need remembering are offered.

An Astro site, end to end walks the whole path.

Which mode am I in?

The bottom bar says so, always.