Streaming live at 10am (PST)

Live Inline Code Editor


#1

I know this has been something that has been brought up before.

Is there any plans to add a inline code editor to Webflow? So we can have the ability to toggle and add/edit a page's html, css and JS directly.

I am sure some developers would agree that it is sometimes easier to edit or create certain things directly and that the present just HTML widget isn't as ideal.


#2

Oh they would, but Webflow aims at designers and if you look closely, everything is done to avoid code. Still, we have a HTML code widget, custom head and body code at site and page level.

That said I know nothing about the roadmap, but I can see a lot coming before an inline editor. My advice would be don't wait for it.


#3

I do agree with what you are saying. My background myself lies more on the design side of things which is why I love Webflow. But even with that being said, since it does produce clean code I find some things would just be easier to edit through the HTML / CSS directly.

Hopefully I am not alone on this and it is something Webflow would consider.


#4

You are not alone but i don't think Webflow will be adding this sadly :frowning:


#5

IMHO, if Webflow did implement live code editor, designers and developers would agree ... at least for all the ones I know and attract more users. Since, even with so much that Webflow could do now, there are limits. Currently what we have to do to avoid messy code and complications due to special effects / functions that our clients need / want, we export the site out. And because we can't import back in, we can not host with Webflow and keep on using their awesome designer / cms to maintain the site. As much as I hate to admit, next if our team really needed the visual interface ... we would import into the Webflow clone: Stackhive to edit and maintain, because they have live code editor and import.

I hope Webflow would deeply consider or reconsider the importance of this feature.

Others are getting ahead of the game now. We are keeping a close eye on xpos.it at the moment. A user themselves .. they seem to nail some of the problems of Webflow. I would hate to see others beat Webflow!

Just my thoughts. :smiley:

Cheers,

Diana


#6

Exactly my thoughts as well. Since I started using Webflow I know an inline code editor has been brought up multiple times by the Webflow community. I too hope we can continue the chatter till one day it is reconsidered!


#7

Yes. It is a shame that we can not use Webflow cms, hosting and execute Webflow's full potential without such a feature. @LukeB Can you share what you would do to solve this issue if you had to use Webflow to build a larger enterprise site? Something that is more than a mockup / prototype and more advance than a small business / portfolio site. Trying to find another solution / workaround. :smiley:

Cheers,

Diana


#8

+1 this is my most sought after feature.

My ideal world would be some sort of fine line between Webflow and Visual Studio for when I need to build custom solutions (authentication, management, reporting etc) - I think the closest thing to this is being able to import your site back in or allow an external repository to host (ie: GitHub). Exposing APIs to the community could be an interesting experiment and some pretty cool extensions could be cooked up.

If I need to bring in the big guns, I want Webflow being my tool of choice in early / cosmetic stages of a project, I am a backend developer and while I know my HTML, CSS and Javascript I am no designer and find this to be a bottleneck if I wanted to start my own consulting agency.

To go one step further, I've shown Webflow to a few of my designer colleagues. They absolutely LOVE how fast this tool can prototype saving them hours of time writing boilerplate. Clients could see results super early and with some being very indecisive, they could save us the headache of having gone down the wrong design path - and we could just export the code after sign off and import it into our environment.

This is a gold mine guys...or is it just me?


#9

I totally agree with these sentiments.
I am a designer and have loved Webflow for what it gave us when first launched. The updates have all been welcome but there are still serious limitations.
I would love Webflow even more if they could sort some of the 'missing features'

  1. CSS, editing (no pseudo classes, awkward workarounds for similar classes, cut and paste of code much quicker etc)
  2. Editing list contents in code would be a lot, lot faster
  3. …and just maybe if we had access to the code we would be able to copy assets from one project to another, which for me is one of the biggest and MOST FRUSTRATING shortcomings.

If we could do this with Webflow it would make life so much easier. The arrival of Webflow gave us access to fast prototyping, easy media query implementation and access to animation that would take so much longer to set up by other methods.
If we had updates that included these features it would elevate Webflow to the NEXT LEVEL.
Please guys, work hard, deliver these updates and keep your users happy for Christmas :wink:


#10

+1 to everything that has been said. i really like webflow but am becoming more and more frustrated with the inability to set up and work with code the way i would like in certain instances. i get that webflow is built for designers but more and more today designers like myself can code too. webflow is a great entry point for designers who do not code but it doesn't mean that functionality for those that can has to be left out. advanced features are common place.


#11

how do you like stack hive? looking at the video i am thinking about jumping ship to them but am concerned that their blog and twitter hasn't been updated in awhile. if you have used it, does it appear that they are actively it? is there a community of users similar to here that you can point me towards?


#12

@DesignerDiana At first I was using Webflow as a mock up tool, skipping the whole Photoshop process as it helped me save time and bridge that communication gap between designs and development. All the additions Webflow has been making have been awesome so I have even started to keep my smaller production sites Webflow builds.

However for larger production builds my teams and myself more go with tools such as Sublime Text, PineGrow and then migrating to WordPress. Pinegrow is an awesome desktop top app that offers a more visual way to build Bootstrap, Foundation and Wordpress website.

Like @dapitts08 said, with the resources online today good designers are starting to learn front end development as that knowledge really does help us better compete in the industry.

Webflow having a inline editor will make it so much more desirable and turn it into a more complete tool. Even a super simple editor interface like what codepen.io uses.


#13

I understand a big concern would be those who don't know code using the editor and causing problems with their site. But I have seen tools in the past remedy this by having an enable / disable (lock) feature and if your site is using custom code, support is limited or not available.


#14

Now that you've mentioned it ... they don't seem to be socially active as much. I never really paid attention .. I don't think they have a community or forum like this.
To be honest, I don't adore Stackhive at all, I'm kind of forced into using it. The designer is a bit clunky and slow. And when I import sites in they aren't always perfect, there is some tweaking needed. I wouldn't use it if I don't I have to. Therefore, depending on your needs ... I would suggest to consider. Maybe take a look at Pinegrow.

I want to use Webflow for everything ... from designing, developing, hosting to cms but without the ability to edit the code inline ... Webflow can only be a prototype tool, to me and my team until something that allows advance designers and developers like a live inline code editor has been implemented.

From a business perspective, with this ... along with White Label, Webflow could potentially attract big agencies, studios and enterprises to use their tool as their one stop workflow ... the primary tool set for development, thus increasing in revenue.


#15

@LukeB That's exactly what I was thinking. No support for inline code editing because that is the users' own responsibility ... such question should most likely be asked in a programming community like stackoverflow. Along with a toggle switch for enable/disable live code editor with a codepen like interface. This would be just perfect!

You've mentioned you use Pinegrow. I tried them out in the early stage and they seem slow ... with a lot of times unresponsive. How are they now? Would you recommend them?

Thanks for sharing! :wink:

Cheers,

Diana


#16

@DesignerDiana well Pinegrow is more of a tool that helps front-end developers code more efficiently. So it doesn't really require much support.

As my background is more on the creative side, I really do love Webflow. I just mentioned Pinegrow as an example of a tool that I am forced to use because Weflow does not offer inline code editing.

Even if we could edit the html / css on a per section / content block level (along with their html widget) that would offer far more flexibility to front end developers. Again referencing the editor codepen uses which is super simple and clean.


#17

Can you guys give a few examples where a more flexible code editor would benefit? Curious what the scenarios are.


#18

Hi @brryant I think for users that are front end developers sometimes it is more efficient for them to do quick edits via the HTML and css. I will talk to the developers I work with to maybe give more examples on this. I have attached a gif showing how some other visual builders have included an inline editor into their app nicely.

Those who are more creative (like myself) are becoming more and more involved in coding. Areas I would find an inline editor helpful would be pasting in code spinets of modules and sections created on other projects with or without Webflow. Also more effectively adding in code drops from around the web. I don't think the html widget is the most effective at this. It would be great to also see it have a more friendly looking "sublime" style interface that is laid out with html / css / js tabs (ex. codepen).

Finally I think developers will find it useful for when they need to integrate specific APsI they need included in there sites. It would be very useful for when trying to integrate various tools like eCommerce and marketing.


#19

I think developers will find it useful for when they need to integrate specific APs

To facilitate a better workflow for people working with APIs, a good workaround is to include a dropbox link to your Javascript file in the <head> - that way every single save in your code editor gets synced to dropbox, and the next time you load your published site, your custom code will be live (prevents endless copy/pasting)

eCommerce and marketing

We're releasing some sweet tools that will allow you to use CMS data in embeds! Will be great for e-commerce use cases.

Sitebuilder, etc has cool code integration, and it's something we'll continue to investigate. Would be good to hear if others have other specific use cases that would benefit from a live code edit experience


#20

thanks brryant.

for me the ability to copy/paste elements/code across projects would be a MAJOR improvement

also....i think an inline code editor would make it much easier to use a modular/atomic/object-oriented css approach with webflow which i am very much interested in doing and find it really difficult to do currently with webflow.