Whilst there are a number of bookmarklet creators available on the web, none of them were close enough to the IDE experience I’ve become used to with vscode. As such, I decided make a first attempt at writing my own Bookmarklet editor by embedding the Monaco Editor within the page and integrating it with Prettier and Terser for easy switching between formatted code and a minified bookmarklet.

I discovered useKeyPress from ahooks which is an easy way to configure single or multi-key presses and their handlers in react.