Devtool for manipulating React + Emotion styles in the browser
A React devtool for live-updating Emotion styles in the browser. When the styles look good, write them to your source files with one click.
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.
@emotion/react
with css
prop
npm install --dev manipulative
# or
yarn add --dev manipulative
The server writes changes to your source files.
npx manipulative-server
Use one of these two approaches.
useCssPlaceholder()
- quickest but not idealIf 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.
import { useCssPlaceholder } from "manipulative/macro";
function MyComponent() {
return (
<div css={useCssPlaceholder()}>
<p css={useCssPlaceholder()}>...</p>
</div>
);
}
css__
propThis more convenient approach requires a little Babel setup (see below).
// no need to import anything
function MyComponent() {
return (
<div css__>
<p css__>...</p>
</div>
);
}
In 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.
Be sure to remove any imports from manipulative
when building for production!
If you want to use the more convenient css__
syntax, you'll need to install a Babel plugin that runs before React Fast Refresh.
If 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
.
{
loader: 'babel-loader',
plugins: [
'manipulative/babel',
'react-refresh/babel',
],
...
}
If you have not ejected CRA, you can still use this plugin with something like react-app-rewired. Here is an example config-overrides.js
with react-app-rewired
.
const { getBabelLoader } = require("customize-cra");
module.exports = function override(config) {
getBabelLoader(config).options.plugins.unshift(
require.resolve("manipulative/babel")
);
return config;
};
css__
cannot be used with css
prop on the same element
css__
is transformed to css={...}
. Therefore, one will override the other. There may be support for modifying existing styles in the future.