What do you use to build HTML pages?
I'm looking to build a web app, and user interfaces are the biggest problem for me. It takes a long time to build a simple interface with HTML editing approach. You need to find a CSS framework, think of the layout, encode it in code. If you're not too expert in CSS, you're going to struggle.
While doable for a larger projects, I find the above approach not suitable for rapid prototyping.
I'm looking for a good visual editor with a drag-and-drop to build web apps out of smaller components. The closest one I found is the Swift editor in xCode (https://developer.apple.com/documentation/xcode/creating-your-app-s-interface-with-swiftui) - you get the flexibility of code editing while having the speed of a robust drag-n-drop app builder.
For the web, I didn't find good solutions like that so far. There is a ton of "website builders" on ProductHunt, but they most frequently are intended for simple landing pages, maybe blogs - but not complicated web apps which are supposed to be backed by some logic. On the other hand there are app builders like ReTool, but they are for internal tools, don't allow much design customizability, and cost a fortune.
All of those alternatives I found are "black-boxes": you don't get the HTML so you can't use seamlessly a framework like React.
So I'm curious: what do you use for HTML/CSS UIs for rapid prototyping?
Sorry to say that, but if you want to build a complex web app that serves exactly your need you will not find a no-code/low-code tool. Drag and drop works best for static pages but how would you imagine this working with a web app?
Learn HTML, CSS, JS. Then continue with react.js. Once you got that choose your framework (for me its nextjs). After that Learn any database language (psql, msql, mongodb, etc.). After that you should be able to build your web app.
Note: If you want to test your hypothesis then a webflow gimmik could be enough. Doesnt have to work you just need to see if people are interested in the service you "proclaim" to provide.
Honestly, it works much better for me to just create the page first - and when I'm completely comfortable with how it looks, start to code it. My workflow: paper -> Figma -> code
How do you go from Figma to code? I'm using UI frameworks that provide ready UI elements for you, e.g. Skeleton UI for Svelte. Figma, OTOH, has a different approach: you customize there every shade, more like photoshop for design. So, I end up in situations where I design a nice looking website in Figma but have no idea how to do the same in HTML/CSS, so I work with the restricted UI framework.
Is there a good way to use Figma when you only have a set of pre-defined components?
I use Tailwind in my layout. Having used it quite a bit, I sort of know what's possible and how I could code it. So, I do keep that in mind when creating my Figma design already.
For specific libraries, you'll often find Figma plugins. For Skeleton UI, a quick search returned this one: https://www.figma.com/community/file/1266774078142216791/Skeleton-for-Figma. It's not complete yet, but it's a decent start.
No low-code tool will ever give you the flexibility and complexity you need to build anything more than a landing page or a simple e-commerce storefront.
"HTML page" is really an application in itself. It renders actively in a web browser. It has to handle an infinite number of screen sizes, resolutions, fonts, input devices, software versions, etc. It just cannot be done in some drag-n-drop editor reliably.
Hi there!
I don't want this to be a self-promoting answer, but I am currently building a design/UI development app (very similar to Figma) that generates pixel-perfect react code from drag-and-drop designs. It even supports imports from Figma. I am also currently looking for early adopters, in order to do a case study, to whom I can offer special conditions.
If you'd be interested to try it out here is the link: https://kubi.design
And if you want to learn more in person you can ping me via vytautas.butkus@gmail.com
I haven't seen any for web apps. It requires a deep understanding of HTML/CSS and would most likely require educating the market.
Where as a landing page/marketing site builder is much easier.
I have got Tailwind UI and other admin dashboards working in https://versoly.com/ but haven't pushed far on it.