paul shenprojects
  • Install via yarn add --dev manipulative
  • Run the server npx manipulative-server
  • Add the css__ prop to elements you want to style. See setup.
  • Modify styles in the browser manipulative panel
  • Press the commit button to write styles to source
  • A Babel plugin transforms useCssPlaceholder() calls to include the source location and line of code. The css__ prop is similarly transformed, equivalent to css={useCssPlaceholder()}.
  • useCssPlaceholder() returns an Emotion css object, updated as you type in the inspector.
  • Committing talks to the simple node server that writes the changes to the source file.