1. The ability to copy and paste any HTML and CSS into the editor with no limits. I was never able to find another app that could do this without some form of limitation.
2. CSS filtering, which means you can click on an element to view and edit the CSS selectors and rules that apply to that element alone. In many cases I've found CSS naming conventions like BEM to become irritating at certain scales, so this is an alternative solution. This part of the app needs some more development work but the concept is there.
3. Lightweight UI that leaves most of the development to code. I tend to get annoyed with UI's that try and address every styling possibility because it feels like I'm spending too much time learning the app, when it would have been faster to just type a couple lines of CSS.
I would love to hear your feedback. There is no sign up and is not mobile-friendly.
Hit [C] on the keyboard to open the code editor or hit the "<>" icon in the toolbar.
The link here: https://demo.gocodestudio.com/studio/, was pretty cool, I tried editing the text, copy pasting the underline animation, and editing the code behind one of the components. I agree that we can make coding web pages a lot more intuitive while still maintaining flexibility.
The code box that pops up in the editor is a bit buggy. Backspacing to replace some of the styles, it wasn't always clear where the cursor really was.
I think instead of just the pure css styles, maybe have a mode where people can adjust the styles via natural language. Yes, how typical to have an LLM angle to it. But CSS is a PITA to learn and remember for a lot of people, I think natural language could help here. Maybe if I say 'update font size' for the paragraph component, a popup can open showing the font sizes in the theme, and offer previews at different responsive breakpoints. I like what you have but I guess it needs to be cleaned up a bit, and perhaps pushed farther in some areas before I would abandon my old IDE.
I'll work on making the code editor work better.
The natural language idea is really cool, I would have never thought of that. I think that's a great approach to using an LLM in a useful way.
Uncaught DOMException: An invalid or illegal string was specified ondblclick https://demo.gocodestudio.com/studio/assets/index-a9HvzMS3.j...
edit: I went ahead and applied a fix
Would be cool with some preset color palettes to quickly change the feel of the site. Undo-redo actions could be useful along with an ability to re-order the sections. Just a sidebar showing the tree structure with drag-n-drop would be a nice feature.
Other ideas: - Configure link hrefs in header - Multiple pages - Use Tailwindcss - AI prompt to describe the layout and content - React export
When the code window is docked, does grabbing the right edge to resize it work for you?
I don't really have much use for it though as the websites I tend to work on are either fine with a slightly customized prebuilt template or are more full-on web-apps in nature.