paul shenprojects
natto.dev
a spatial live JavaScript environment
Potluck
an Ink & Switch project on malleable software
React memory leak
debugging and fixing memory leaks
draw battle!
a casual but competitive team drawing and guessing game
Code Explorer
exploring better interfaces to read and understand code
TypeScript AST Explorer
CSS Structure Editor
Rust GUI Experiments
manipulative
devtool for writing React + Emotion styles in the browser
Nook Exchange
an Animal Crossing inventory site built with ReasonML
manipulative
-> visit project
Usage
  • 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
Notes
  • 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.