CSS Element Preview Panel

A CSS panel to preview the CSS of a selected element. It would be super handy when using Webflow as the HTML layout and design tool for larger apps built in Rails, Node etc. All the other screen design tools support it, Invision Studio(as seen in the demo video), Invision Inspect, Zeplin, Framer, and plugins for Sketch do it too in the handoff process. 

Webflow comes so much closer to production code than all of the aforementioned tools except for this tiny feature. Exporting the whole zip file, hunting for the tiny block of CSS from the single generate CSS file, converting it to SASS and then pasting it back into the project is process that can only be described with several expletives.

Do it Webflow, I know you can.

  • Dayton Pereira
  • Oct 31 2017
  • Jean-Pierre Stopinski commented
    16 Mar, 2019 09:31pm

    In a recent Webflow tutorial video a panel like this was used. I was wondering if this was a new feature, but unfortunately afaict they only use it for tutorial purposes.

    This feature would make my day 100000 times more easy.

    We work on a lot of different projects and sometimes, when refactoring only a few components, webflow as a small visual css editor would help a looottt. Just to design a component and output the various portions you need instead of having to export the whole css code and picking out pieces one by one.

    Please share this awesome internal tool with us @webflow!

  • +3