Show HN: Browser-based web design platform with code import and CSS filters | Hacker News Reader

Show HN: Browser-based web design platform with code import and CSS filters

demo.gocodestudio.com

91 pointsaxeleratorr17 comments

I built a web-based app for building websites. The main unique features are:

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.

Open articleView on HN

The route linked here is the least impressive page of the site. It's very empty, the text "Click the button above to get started" is a bit vague, because the New button is not directly above it. Make it more idiot proof for a visitor to check out the edit mode IMO and make it clearer that you can actually edit the page live.

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.

Thanks for trying it! I agree the dashboard is definitely lacking, and your feedback helps me know what direction to go to improve it.

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.

Looks good and quite intuitive. Bug report: Editing text doesn't work in FireFox.

Uncaught DOMException: An invalid or illegal string was specified ondblclick https://demo.gocodestudio.com/studio/assets/index-a9HvzMS3.j...

Thank you for the heads up, I will have to do more cross browser testing and apply the fixes. I appreciate you pasting the error as well.

edit: I went ahead and applied a fix

I really like the floating code window and the ability to dock it. However, it can't be resized while docked.

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

I'm glad this tool is NOT infested with overly bloated HTML through Tailwind.

Thanks for trying it. Your ideas are helpful and I have included them in my notes.

When the code window is docked, does grabbing the right edge to resize it work for you?

Hi, Nice idea, I really like it but it's not responsive. Do you have plans in the future to give the possibility of working on it from mobile too?

Thank you! Yes, I would like to make it responsive in the future

Really cool tool, sadly the code editor is glitched out for me (I can't select all the text, using Edge if it helps). Some bugfixing and you have a really good tool on your hands.

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.

Thank you for the feedback, and yes that helps to know which browser you experienced it in! I have some cross-browser fixing to do

Congrats on the launch! Looks good - I love the simplicity. Not sure about the differentiation though, there are other visual experience builders that let you use your code elements (e.g webflow, builder.io, etc.)

Thank you! I do see your point about the differentiation, perhaps I can think of something more valuable to offer than code import

SyntaxError: expected expression, got '?' index-ZK7vbils.js:37:3451

Thanks for the heads up, I am looking into it

I can only use the left half of the site on Mobile

Thanks for trying it, I'll plan on making it mobile-friendly in the future

Reply on news.ycombinator.com