Visible custom code inside designer

Would be nice to have custom code changes visible in the designer rather than publishing to see changes

  • Gen Kazak
  • Jan 18 2017
Designer
  • Post comment
  • James Wee commented
    June 07, 2020 12:19

    This needs to be top priority. Can we prioritise this please?

    Attachments Open full size
  • Kyle kimberlin commented
    February 13, 2019 16:06

    Please I love webflow as a designer but not being able to seamlessly integrate with front-end developers and not being able to import code back into webflow is a deal breaker for using it with my company. Unfortunately is making me look into other options such a sitejet.com if you could just add code editing similar to them I would be so happy as I would finally be able to fully integrate it into our work environment.

    Attachments Open full size
  • Eric Potratz commented
    January 20, 2017 17:37

    This request should be merged with this one: https://wishlist.webflow.com/ideas/WEBFLOW-I-42

    Attachments Open full size
  • Eric Potratz commented
    January 20, 2017 17:32

    Yes, it would be very helpful to see custom code live in the designer!

    To extend this, it would be great to simply click on the code within the designer, and change the existing CSS, rather than needing to put it in the <head>.

    Attachments Open full size
  • Antonio Balderas commented
    January 18, 2017 21:05

    The style tag is good for a few lines of code but for large chunks of code a editor in webflow  that put the code inside the css stylesheet will be nice, also a toggle switch to enable js in the designer!

    Attachments Open full size
  • Martin commented
    January 18, 2017 11:24

    I agree, although I'd like to see the things this is usually used for implemented first :) (eg pseudo classes, breakpoints...)

    Attachments Open full size
  • Matthew Sanderson commented
    January 18, 2017 10:27

    I hadn't thought of a debug URL with auto refresh – that could work!

    For seeing CSS only changes, there is a hack detailed below that might help some, but I would also like to be able to see custom code (CSS and javascript) in the designer.

    Pretty much every site I build has custom code of some sort – being able to see the effects without having to refresh would be helpful.

    ___________

    (this is from a post that was specific to pseudo classes but works for any CSS):

     

    I found out the other day from @samliew that if you add an embed element to your page containing <style> [add pseudo classes here] </style>, the effects of the code will be reflected in the webflow preview.

    Part of the pain for me was having to publish to see the effects of any pseudo classes I added as custom code – at least this way I can see the effects directly in the editor (it feels a bit weird adding <style> blocks outside of the <head> but I can get over that!).

    I'm sure this is probably old news to some but finding this out has really helped me use pseudo classes until webflow figure out how to give support in the editor.

    Attachments Open full size
  • Gen Kazak commented
    January 18, 2017 05:01

    …or maybe some kind of debug url that has auto refresh?

    Attachments Open full size
  • +22

Related ideas