Chrome devtools extension

[jxnblk]

An optional Chrome devtools extension could allow someone to inspect and live edit a site built with Theme UI could make adjusting the style of a site easier by providing a GUI for editing things like color values, which can be difficult to assess when editing raw values in code.

Ideas/questions

• The extension could be either a panel (tab) or sidebar in the elements tab
• Changes in the inspector should show live updates in the site
• This could be flagged as a development-only feature or enabled for production sites as well
• The extension could offer a JSON export of changes made in the browser
• This should support multiple theme shapes, but would likely benefit from a separate Theme UI schema package (Schema validation package #85)
• The UI components used in the extension should be a separate package that can be used in other applications (Add style guide components #59 Add theme editor components #60)

Rough proof of concept: #79

Similar concepts & prior art:

• https://github.com/styled-system/styled-system/tree/master/packages/edit
• https://theme-ui.com/demo/