Use deframer
Make it yours
Every file deframer writes is yours to change: texts, images, sections, colors and pages.
The app's code is Framer's compiled React, formatted and split by page and section so you can find things. Change it by hand or with an AI coding agent: the app includes an AGENTS.md that tells the agent where everything is.
Where things are
| File | What it lists |
|---|---|
framer/PAGES.md | Every page, its file in framer/site/pages/ and its sections, top to bottom. |
framer/MEDIA.md | Every image and video, by page and section, with the URL used in the code. |
framer/content.json | Every text, with its page, Framer layer and file. |
framer/site/theme.css | Every color with a readable name. |
Change text
Search for the text in framer/site/pages/ and edit it. A text can appear once per breakpoint (desktop, tablet, phone): change each one.
Replace an image
- Put your file in
public/images/. - Find the image in
framer/MEDIA.md, open the file it names, and change itssrcto"/images/your-file.png". - Delete the
srcSetline next to it.
Remove or reorder sections
Each page file names its sections (const Hero = …) and lists them in children: [Hero, Features, Footer]. Delete a name to remove that section; move it to reorder. To add a section, copy one or put your own React component in the list.
Change colors
Set a color's variable in app/theme.css, and it changes everywhere it is used.
Commit everything
Commit framer/ and public/framer/ with the rest of the app, so a clone builds on any host.
Keep re-syncing from Framer
If you still design in Framer, export again into the same folder:
deframer create https://your-site.framer.website .deframer replaces only the files you have not changed. Files you edited or added are kept and listed after kept your changes. To take Framer's new version of a file you edited, delete it and export again.
Check your changes
Run pnpm build in the app, then open it. deframer verify compares it with the published site: the pages you changed will differ, as expected.
Framer's runtime and the site's media are third-party code and content. Your plan decides whether you may use the site commercially. See Plans and billing.