This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Marc Krenn
Posted Mar 21 - Read on Facebook

'codePanel' module

... adds a code panel - similar to the one known from the examples - to any project. All you have to do is to drag'n'drop the module onto your FramerStudio window.

Example (contains module):


Marc Krenn

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.

* 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! :)

Jordan Robert Dobson

I can help you brute force the CSS you need.

Krijn Rijshouwer

Really nice Marc!

Read the entire post on Facebook