Enhanced code editing?

Question

I cut this together as an idea just for fun. I know there has been talk and some issues opened around code editing UI for Webstudio. The idea with this would be:

maintaining access to canvas while editing code,
improved code editing experience,
access to settings and styling without changing tabs,
potentially using one of the editing blocks for vars, api stuff, or CSS vars -- again, without popping over the canvas.,
I wonder about one day having full access to CSS editing in a code editor (like Advanced Mode but a more traditional IDE experience)?,

Drawback is of course screen space. But even at 1440 height, it's totally reasonable. Not sure about 1080. My thought is that you could resize the panes like in dev tools.

Mikeoxygen · Answer

seconded.

Oleg Isonen · Answer

This is eating away a lot of the canvas space. I wonder who is the person who wants to have access to code, css and style panel at the same time ... if you are a technical designer, you will prefer to see code less often, probably as little as possble

Oleg Isonen · Answer

I thought that code view would be instead of canvas, not in addition, simply because to view code you usually need space and also to view canvas you need space

Oleg Isonen · Answer

on the oher hand there is probably a way to decide where you want to see it, depending on what you do

Igor Couto · Answer

I'd be happy just having a command-click shortcut to open the window for the HTML element directly on the canvas, rather than having to select the element, go into the Settings Editor, click into the field there, click to open the window, then click again to expand it... Making incremental, small changes becomes a real chore...

Oleg Isonen · Answer

I think you mean HTML Embed component, the topic here is full code editor for everything on canvas

Join the Webstudio community

Enhanced code editing?