{"id":40136461,"url":"https://github.com/jamsesso/fxsync","last_synced_at":"2026-01-19T14:02:51.953Z","repository":{"id":57120194,"uuid":"172350755","full_name":"jamsesso/fxsync","owner":"jamsesso","description":"Synchronize your production React components with Framer X","archived":false,"fork":false,"pushed_at":"2019-02-26T23:45:52.000Z","size":71,"stargazers_count":30,"open_issues_count":6,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-12T09:59:30.369Z","etag":null,"topics":["create-react-app","design","design-system","design-tools","framer","framerx","react"],"latest_commit_sha":null,"homepage":"","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/jamsesso.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-24T14:54:58.000Z","updated_at":"2023-07-30T10:56:19.000Z","dependencies_parsed_at":"2022-08-24T00:30:43.433Z","dependency_job_id":null,"html_url":"https://github.com/jamsesso/fxsync","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/jamsesso/fxsync","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamsesso%2Ffxsync","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamsesso%2Ffxsync/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamsesso%2Ffxsync/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamsesso%2Ffxsync/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamsesso","download_url":"https://codeload.github.com/jamsesso/fxsync/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamsesso%2Ffxsync/sbom","scorecard":{"id":504744,"data":{"date":"2025-08-11","repo":{"name":"github.com/jamsesso/fxsync","commit":"3ff9eacb08a7c64d1d298c501ba6802704069a03"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":0,"reason":"Found 0/8 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-19T23:01:35.964Z","repository_id":57120194,"created_at":"2025-08-19T23:01:35.964Z","updated_at":"2025-08-19T23:01:35.964Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28571556,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-19T12:50:50.164Z","status":"ssl_error","status_checked_at":"2026-01-19T12:50:42.704Z","response_time":67,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["create-react-app","design","design-system","design-tools","framer","framerx","react"],"created_at":"2026-01-19T14:02:51.890Z","updated_at":"2026-01-19T14:02:51.946Z","avatar_url":"https://github.com/jamsesso.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/jamsesso/fxsync/master/fxsync.png\" alt=\"fxsync\" /\u003e\n\u003c/p\u003e\n\n**fxsync** is a bundler that allows you to import React components from your existing projects into a Framer X file without changes to your existing code.\n\n## Installation\n\n```sh\nnpm install -g @jamsesso/fxsync\n```\n\n**Important:** Node.js \u003e= 10.12.0 is required!\n\n## Usage\n\n### Setup\n\nFirst, create a `.framerx` file that you want to inject your project's components into.\n\nNext, In your npm project, annotate each component file you want to inject into your Framer X design with the `@framerx \u003ccomponent name\u003e` pragma. For example:\n\n```js\n/** @framerx MyProductionButton */\nimport React from 'react';\n\nfunction Button({children, onClick}) {\n  return \u003cbutton type=\"button\" onClick={onClick}\u003e{children}\u003c/button\u003e;\n}\n\nexport default Button;\n```\n\n**Important:** The component name in the `@framerx` pragma does not need to match the component name defined in the file, but it must be a valid JSX identifier. Your component must also be the default export in the file.\n\nThe name you specify in the pragma is the name that the component will have inside your Framer X design file (in this case it is `MyProductionButton`; see line 1 of the previous example).\n\n### Bundling your Components\n\nNext, run `fxsync` with the path to your npm project (the directory containing the project's `package.json`) and the path to your existing `.framerx` file. This works best if you do not have the Framer file open in Framer while this command is executing.\n\n```sh\nfxsync \u003cpath to your npm project\u003e \u003cpath to your .framerx file\u003e\n```\n\nThis will build a common-js compatible file named after your npm project (`name` in the `package.json` file) and inject it into your `.framerx` file at `code/lib/\u003cyour npm project name\u003e.js`.\n\n`fxsync` can be run any number of times against the same `.framerx` file. When your production React code is updated, re-run the `fxsync` bundler to update the components in Framer X.\n\n### Integrating Components into Framer X\n\nNow that your production code is available inside of your Framer X design file, we can use them in our designs.\n\nIn Framer X, create a new component from Code. This will generate a file that you can modify. For this example, I am going to create a code component called `MyFramerXButton`:\n\n```ts\nimport * as React from \"react\";\nimport { PropertyControls, ControlType } from \"framer\";\n\n// Import your production components.\n// my-project-name should be replaced by the name from your \n// project's package.json file.\nimport {MyProductionButton} from './fxsync/my-project-name';\n\ntype Props = { text: string };\n\nexport class MyFramerXButton extends React.Component\u003cProps\u003e {\n  static defaultProps: Props = {\n    text: \"Hello World!\"\n  };\n  \n  static propertyControls: PropertyControls\u003cProps\u003e = {\n    text: { type: ControlType.String, title: \"Text\" }\n  };\n\n  render() {\n    return \u003cMyProductionButton\u003e{this.props.text}\u003c/MyProductionButton\u003e;\n  }\n}\n```\n\n## API\n\n`fxsync` offers an API for running the build in code.\n\n```js\nconst fxsync = require('fxsync');\nfxsync('/path-to-project', '/path-to-design.framerx');\n```\n\n## Testing \u0026 Issues\n\nThis bundler was developed against a project that uses `create-react-app` and `styled-components`. It may not work for every type of project structure at this point.\n\nIf you find issues, I will do my best to explain how this bundler needs to be changed in order to support your project's requirements - however, it will likely be up to you to submit a PR with a fix.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamsesso%2Ffxsync","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamsesso%2Ffxsync","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamsesso%2Ffxsync/lists"}