FEWD Studio features
A visual layer over
the files you already have
FEWD Studio opens your actual project. There is no import, no intermediate format and nothing to sync. The thing on screen is the file on disk.
Click a node, see what made it
Inspect the rendered page, not a tree view of it.
Select any element in the live preview and the rules that produced it come up beside it. Highlighting works the other way too, so a selector in the stylesheet shows you what it is actually hitting on the page.
- Select elements straight from the preview
- See the rules that apply, and where they came from
- Highlight what a selector is really matching
- Jump from the element to its line in the file
Real code panes
It is your file. Edit it.
HTML, CSS and JavaScript panes sit under the preview, editing the files in your project directly. Completions understand what you are working in, including Astro, so the editor is useful rather than merely present.
- Edit HTML, CSS and JavaScript in place
- Astro-aware completions
- Panes you can drag to sort and resize
- Prompt snippets for AI-assisted work
A preview you can size
See the breakpoint you are arguing with.
The preview renders the real page and can be resized to whichever viewport you are working at, with the element highlight following you as you go. It updates as you type rather than on save.
- Resize the viewport to any width
- Element highlighting inside the preview
- Updates live as you edit
- Extra panes wired to the full HTML output
The project, not just the file
A tree, an assets pane and somewhere to put things.
The project panel gives you the folder as a tree, with file and folder creation where you would expect it. The assets pane keeps images and fonts to hand, so adding one does not mean leaving for the file manager.
- Full project tree with create and rename
- An assets pane for images and fonts
- Connections between the files you are working across
- Opens any folder: it does not own your project
Terminal and git, built in
Run it and push it without leaving.
A terminal pane runs your commands in the project directory, and a git panel handles the commit and push. The round trip matters when a client is publishing edits from BooshCMS into the same repository.
- A terminal in the project directory
- Commit and push from a panel
- Connect a GitHub repository
- Mac and Windows, natively
The globals.css connector
One design system, five apps.
FEWD Studio reads the same globals.css that GenCSS generates and BooshDESIGN draws against. Change a token in one place and the whole toolchain (and every page you have made with it) follows.
- Reads the GenCSS two-layer token file
- The same design system as BooshDESIGN
- Token changes reach every project using it
- Bricks export for WordPress work
Ready to try FEWD Studio?
Buy it once and it is yours, on your own machine, with your data in a file you can open. If it turns out not to suit how you work, tell us.