{"id":13727103,"url":"https://github.com/paulshen/manipulative","last_synced_at":"2025-05-07T22:30:50.345Z","repository":{"id":143888874,"uuid":"316302424","full_name":"paulshen/manipulative","owner":"paulshen","description":"Devtool for manipulating React + Emotion styles in the browser","archived":false,"fork":false,"pushed_at":"2020-12-01T19:50:28.000Z","size":740,"stargazers_count":38,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-04T22:17:50.319Z","etag":null,"topics":["devtool","emotion","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/paulshen.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-11-26T17:54:21.000Z","updated_at":"2024-11-15T23:15:57.000Z","dependencies_parsed_at":"2023-05-20T07:15:36.672Z","dependency_job_id":null,"html_url":"https://github.com/paulshen/manipulative","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulshen%2Fmanipulative","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulshen%2Fmanipulative/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulshen%2Fmanipulative/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulshen%2Fmanipulative/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paulshen","download_url":"https://codeload.github.com/paulshen/manipulative/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252965211,"owners_count":21832839,"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":["devtool","emotion","react"],"created_at":"2024-08-03T01:03:39.535Z","updated_at":"2025-05-07T22:30:49.523Z","avatar_url":"https://github.com/paulshen.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Libraries"],"sub_categories":[],"readme":"# manipulative\n\nA React devtool for live-updating [Emotion](https://emotion.sh/) styles in the browser. When the styles look good, write them to your source files with one click.\n\n![manipulative demo](./manipulative.gif)\n\n\u003e manipulative is currently alpha-quality software. If manipulative is not working for your use case, please file an issue and I'll try my best to help.\n\n## Requirements\n\n- You're using `@emotion/react` with [`css` prop](https://emotion.sh/docs/css-prop)\n- You're using React Fast Refresh (included w/ [create-react-app](https://create-react-app.dev/) 4+)\n\n## Installation\n\n```sh\nnpm install --dev manipulative\n# or\nyarn add --dev manipulative\n```\n\n## Usage\n\n### Run server\n\nThe server writes changes to your source files.\n\n```sh\nnpx manipulative-server\n```\n\n### Invoke manipulative\n\nUse one of these two approaches.\n\n1. `useCssPlaceholder()` - quickest but not ideal\n\nIf you have a create-react-app, you can use the Babel macro without any setup. Add calls to `useCssPlaceholder()` on elements you want to style.\n\n```js\nimport { useCssPlaceholder } from \"manipulative/macro\";\n\nfunction MyComponent() {\n  return (\n    \u003cdiv css={useCssPlaceholder()}\u003e\n      \u003cp css={useCssPlaceholder()}\u003e...\u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n2. `css__` prop\n\nThis more convenient approach requires a little Babel setup ([see below](#recommended-babel-setup)).\n\n```js\n// no need to import anything\nfunction MyComponent() {\n  return (\n    \u003cdiv css__\u003e\n      \u003cp css__\u003e...\u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Modify and commit styles\n\nIn the browser, you should see the manipulative inspector with an input for each `useCssPlaceholder()` or `css__` prop. Type CSS in the textarea to see styles update live. Click \"commit\" to write changes back to the source files, replacing `useCssPlaceholder()` and `css__` props.\n\nBe sure to remove any imports from `manipulative` when building for production!\n\n## Recommended Babel setup\n\nIf you want to use the more convenient `css__` syntax, you'll need to install a Babel plugin that runs before React Fast Refresh.\n\nIf you have access to the Webpack config (e.g. you ejected CRA), add `manipulative/babel` to the list of Babel plugins. This plugin needs to run before `react-refresh/babel`.\n\n```\n{\n  loader: 'babel-loader',\n  plugins: [\n    'manipulative/babel',\n    'react-refresh/babel',\n  ],\n  ...\n}\n```\n\nIf you have not ejected CRA, you can still use this plugin with something like [react-app-rewired](https://github.com/timarney/react-app-rewired). Here is an example `config-overrides.js` with `react-app-rewired`.\n\n```js\nconst { getBabelLoader } = require(\"customize-cra\");\n\nmodule.exports = function override(config) {\n  getBabelLoader(config).options.plugins.unshift(\n    require.resolve(\"manipulative/babel\")\n  );\n  return config;\n};\n```\n\n## Known Limitations\n\n- manipulative only supports static styles. It does not handle functions or JS variables.\n- `css__` cannot be used with `css` prop on the same element\n  - `css__` is transformed to `css={...}`. Therefore, one will override the other. There may be support for modifying existing styles in the future.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaulshen%2Fmanipulative","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpaulshen%2Fmanipulative","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaulshen%2Fmanipulative/lists"}