Inspecting and editing an element

This is the part of FEWD Studio that is different from an editor with a preview bolted on.

Select from the page

Click an element in the live preview and it is selected. The rules that apply to it come up beside it, with where each one came from.

You are not looking at a tree view of the document and guessing which node is which. You are pointing at the thing on screen.

Highlighting the other way

It also works in reverse. A selector in the stylesheet highlights what it is genuinely matching on the page — which is the fastest way to find out that a rule you have been carefully editing is hitting nothing at all.

Editing

Changes go into the real file. There is no intermediate representation, so there is nothing to sync and nothing that can drift.

Completions understand the language you are in, including Astro.

Working alongside AI

FEWD Studio is built for a workflow where some of the code was written by a model. When something looks wrong, being able to click it, see the rule responsible and fix it directly is considerably faster than describing the problem in prose and hoping for a better attempt.

Prompt snippets are available for the times when going back to the model is the right move.