![\"Froam\"](\"https://cdn.jsdelivr.net/npm/@ahmadastic/froam/docs/froam-mark.svg\")
\n\n \n
Try it live in your browser → froam.vercel.app
\n\n**A visual editor for the site you already have.** Froam overlays controls on a\nrendered page. Supported revisions can be saved as a versioned Froam design,\ngenerated override CSS, and a small runtime for content changes.\n\nFroam does **not** rewrite React components, templates, application logic, or\nsource stylesheets. The one exception is deliberate and narrow: copy you change\n(and, in Tailwind projects, an element's class list) is written back into the\nsource only where it appears exactly once; everything else stays a Froam edit.\n\n## Try it\n\nOne command, from any folder:\n\n```bash\nnpx @ahmadastic/froam\n```\n\n```text\n◆ Froam\n Paste the website you want to edit.\n\n Already running on this computer:\n 1 localhost:3000 My Portfolio\n 2 localhost:5173 Vite + React\n\n Website URL, or a number:\n```\n\nFroam finds the dev servers already running on your machine and names them by\ntheir page title, so editing your own project is a keystroke. Paste any address\ninstead to edit a live site:\n\n```text\n Website URL, or a number: example.com\n```\n\nFroam picks a free port, starts a local bridge, injects the editor, and opens\nyour browser. It does not modify the proxied server or the remote website.\n\nIf you already know what you want, skip the prompt:\n\n```bash\nnpx @ahmadastic/froam example.com # a live site\nnpx @ahmadastic/froam localhost:3000 # your dev server\nnpx @ahmadastic/froam ./public # a static HTML folder\n```\n\n### Where your edits are saved\n\nEditing your own project writes a `froam/` workspace into that project, next to\nthe code it belongs to.\n\nYou do not have to tell Froam where the project is. It traces the port back to\nthe process serving it, and that process back to the folder it was started from,\nthen shows you the folder before creating anything:\n\n```text\n Froam will save your edits here:\n C:\\Users\\Ada\\Desktop\\my portfolio\\froam\n Enter to create it · n to keep them in your Froam folder · or paste another folder\n [Y/n]\n```\n\nIf a server cannot be traced — a container, or a language whose launcher hides\nthe path — Froam asks rather than guessing.\n\nEditing a live site you do not have the source for writes to `~/Froam/