All documentationHow to use
FEWD Studio documentation
How to use
FEWD Studio
A visual layer over real HTML, CSS and JavaScript projects: click a node, inspect it, edit it, on the desktop.
Getting started
Install it, find your way around, and do the first useful thing.
- Installing FEWD StudioGetting the app onto a Mac or a Windows machine, what it needs to find there, and what happens on first launch.
- Opening a projectThe welcome screen, the folder you keep projects in, cloning a private repository, and starting something new.
- Windows setupEverything needed to run FEWD Studio on Windows 11 or 10, including the things that trip up anyone used to a Linux-based workflow.
- The interfaceThe preview, the coding panes beneath it, the project panel down the side, and the structure and styling panels.
- Your licence and your devicesActivating, what a free copy does and does not do, and moving your licence to another computer.
Guides
How to do each job, one page at a time.
- An Astro site, end to endProject, layout, page, component, and the component on the page — five steps, and the only thing to remember is one keystroke.
- Creative Mode and Framework ModeWhich mode you are in, why it matters, and the one rule that decides it — whether the file can be rebuilt from a tree.
- The coding panesFive panes connected to real files, what each one is for, when they save, and how to add more.
- Inspecting an elementClicking a node in the live preview, reading the rules that produced it, and getting to the one you can change.
- The styling panelControls that write one declaration into the rule you selected, in your tokens, without regenerating the file around it.
- Pages and the previewThe address bar, the page picker, the dev server, and checking a layout at any width.
- Collections and entriesEditing an Astro content entry's frontmatter as fields, and the rule that keeps the rest of the file exactly as it was.
- Building a componentBuilding a component visually in Creative Mode, marking its props where they go, and converting it into a real .astro file.
- Assets and imagesThe assets panel, what each file actually is, and optimising an image or a whole folder without leaving the app.
- InsertsTyping a slash and a name to drop in a pattern, the accessible widget set, and saving your own.
- Setting up GitHubWhat git actually is, the one-time setup for a new project, and the point after which the git panel handles everything.
- Terminal and gitRunning commands in the project directory, and a git panel that tells you where you stand before you push.
- Working with an AI agentWhy a terminal agent is a different category to the AI in a page builder, and how it divides the work with FEWD Studio.
- AI prompts and generated filesBuilding a house-standards file for your project, and pointing every AI coding tool at it in one step.
- PreferencesEvery setting, what it changes, and the handful worth going and turning on straight away.
- A contact form in AstroOne page, handling its own POST, sending through Resend on Cloudflare — including the DNS and the steps nobody writes down.
- A contact form in a static siteTwo files — the page, and a function in your repo that the host builds — sending through Resend from Hugo, 11ty, Jekyll or plain HTML.
Reference
The details worth looking up rather than remembering.
- Connecting the design systemHow FEWD Studio reads the same globals.css as GenCSS and BooshDESIGN, and what that gets you.
- UpdatesHow FEWD tells you about a new version, what it downloads, and what it will never do on its own.
- Insert referenceEvery insert that ships with FEWD Studio, by category, with what each one gives you.
- Supply chain securityIn the static world the attack does not come through your live site — it comes through the packages you install. What to do about it.
Troubleshooting
When something is not behaving, start here.
Looking for what it does rather than how to use it?See FEWD Studio.