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
  • Gen Kazak commented
    January 18, 2017 05:01

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

  • 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.

  • 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...)

  • 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!

  • 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>.

  • Eric Potratz commented
    January 20, 2017 17:37

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

  • Kyle kimberlin commented
    13 Feb 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.

  • Karla Goodwin commented
    05 Jul 04:02

    This will become essential. happy wheels free Being able to create "section templates" will allow editors extra freedom to create more, and will ease the designers work load. It got to be optional, of course, so we can prevent the careless editor to break the website.