{"id":13827037,"url":"https://github.com/zauberware/framerx-react-sync","last_synced_at":"2025-07-03T06:06:32.585Z","repository":{"id":79330218,"uuid":"152918389","full_name":"zauberware/framerx-react-sync","owner":"zauberware","description":"Sync your react js (styled-)components with a FramerX project.","archived":false,"fork":false,"pushed_at":"2019-01-11T23:00:46.000Z","size":464,"stargazers_count":26,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-04T12:11:17.789Z","etag":null,"topics":["design","framer","framerx","processes","react","reactjs","single-source-of-truth","styled-components","synchronizer","tools"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zauberware.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-10-13T22:06:08.000Z","updated_at":"2023-07-30T10:31:48.000Z","dependencies_parsed_at":"2023-02-27T04:45:39.963Z","dependency_job_id":null,"html_url":"https://github.com/zauberware/framerx-react-sync","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zauberware/framerx-react-sync","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zauberware%2Fframerx-react-sync","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zauberware%2Fframerx-react-sync/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zauberware%2Fframerx-react-sync/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zauberware%2Fframerx-react-sync/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zauberware","download_url":"https://codeload.github.com/zauberware/framerx-react-sync/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zauberware%2Fframerx-react-sync/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261823755,"owners_count":23215142,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design","framer","framerx","processes","react","reactjs","single-source-of-truth","styled-components","synchronizer","tools"],"created_at":"2024-08-04T09:01:48.917Z","updated_at":"2025-06-25T07:06:01.211Z","avatar_url":"https://github.com/zauberware.png","language":"JavaScript","readme":"# FramerX React Sync - use styled-components in FramerX\n\nInspired by https://github.com/shiftsave/framerx-build-system I have also setup a project to achieve the following nice design\u003c-\u003edevelopment processes:\n\n* **Import react components into your FramerX project!**\n* **Export code components and layouts from your FramerX project!**\n* **git version control for FramerX project**\n\n## Why this project?\n\nWe use this project as a boilerplate for new FramerX projects. It helps us to import real developed reactjs components into a FramerX project. \n\n## Commands\n\nWe provided these commands to interact with the FramerX project.\n\n`$ npm run push` pushes changes to FramerX\n`$ npm run lib:build` builds library for FramerX\n`$ npm run lib:push` pushes library to FramerX\n`$ npm run src:pull` pulls code components from FramerX\n`$ npm run src:pull` pushes code components to FramerX\n`$ npm run restore` recreates FramerX project file\n\n## Installation\n\nClone this repository and install dependencies.\n\n1. `$ git clone git@github.com:zauberware/framerx-react-sync.git \u0026\u0026 cd framerx-react-sync`\n2. `$ npm install`\n\n## Project structure\n\nLet's walk through the project structure:\n\n### _production/\nExample components we want to import into FramerX. \n\n### lib/\nThe lib folder includes the generated sources from _production. We compile a FramerX friendly and readable folder with babel. That lib folder will be pushed into the FramerX project. This provides code components the ability to access your production components.\n\n### code/\n`code/` is a pulled folder from FramerX project. FramerX uses this folder to store it's code components. We pull this folder that we include them into git. You can also make changes here and push them back into the project.\n\n### design/\n`design/` is pulled folder from FramerX project. FramerX saves created layouts into this folder. We just pull this folder from the project to provide version control for the designs.\n\n\n## Build and push production components into FramerX\n\n### lib:build\n\nBuilds a lib folder from _production sources.\n\n`$ npm run lib:build`\n\n### lib:push\n\nPushes the lib folder into the FramerX project\n\n`$ npm run lib:push`\n\n### symlink real project to _production/\n\nIn the _production folder we put some sample components. If you want to use your production resources here you have to create a symlink.\n\n1. remove current _production folder `$ rm -rf _production`\n2. symlink your project src folder `$ ln -s ~/workspace/your-project/src _production`\n\n## Pull and push FramerX Code Components\n\n### src:pull\n\nIf you have made changes in the FramerX project you have to pull the changes into `code/` and `design/`.\n\n`$ npm run src:pull`\n\n### src:push\n\nIf you have made changes in `code/` or `design` and you want to push them into the FramerX project, you can run this command:\n\n`$ npm run src:push`\n\n## Good to know\n\n### .framerx-files\n.framerx files are just ZIP files. So our pull and push are just zip and unzip.\n\n### Use FramerX code components with external libs\nIf you want to add more library support in FramerX you have to click on `File \u003e Show project folder` and find out the path. Then go with your CLI into that folder. It's a simple node project and you can add libraries like for any other project.\n\n### Restore with npm run restore\nBusted the FramerX project file? You can restore a new styled-components.framerx file with:\n\n`$ npm run restore`\n\nIt bundles `code/`, `design/` and `lib/` into a fresh FramerX project (with styled-components presintalled).\n\n### Problems\nIf you have opened the project in FramerX and you make a `push` you sometimes have to reopen the FramerX project. Otherwise it won't show the changes. Maybe there is a \"refresh\"-Button, but I havn't found it so far.\n\n## Links\n* https://framer.com/\n* https://reactjs.org/\n* https://www.styled-components.com/\n* https://babeljs.io/\n\n## Author\n\n__Script:__ \u003chttps://github.com/zauberware/framerx-react-sync\u003e  \n\n__Author website:__ [https://www.zauberware.com](https://www.zauberware.com)    \n__Author:__ zauberware technologies / Simon Franzen \u003csimon@zauberware.com\u003e  \n\n![zauberware technologies](https://avatars3.githubusercontent.com/u/1753330?s=200\u0026v=4)\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzauberware%2Fframerx-react-sync","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzauberware%2Fframerx-react-sync","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzauberware%2Fframerx-react-sync/lists"}