... adds a code panel - similar to the one known from the framerjs.com examples - to any project. All you have to do is to drag'n'drop the module onto your FramerStudio window.
Example (contains module): https://tr.im/codePanel
This is an Alpha release with quite a few known issues. Some of those issues are likely related to CSS rules used by FramerJS, meaning they’re potentially hard to „fix“ without breaking a lot of other things in the process:
* The code is NOT selectable in Safari, … * … yet it’s overwriteable in Chrome (should be selectable/read-only).* The panel has no scrollbar.* Resizing of Framer.Device is a bit buggy.
ToDo:* Get rid of the `loaction.reload()´-workaround, which reloads the prototype when closing the panel in order to regain the „responsive“ behavior of ‚Framer.Device‘.* Add URI-query `#code´, which would automatically open the panel.* Add custom Framer keywords to the syntax highlighter.* Rewrite `callback hell´.
Special thanks to Sergey and Jordan for helping me on this one - you guys rock! :)
I can help you brute force the CSS you need.
Really nice Marc!