I built Webfoundry, a precision visual Tailwind CSS editor | Hacker News Reader

I built Webfoundry, a precision visual Tailwind CSS editor

webfoundry.app

4 pointsguiprav8 comments

Hi all. Over the past 12 months I've been working on this project called Webfoundry and a friend even posted here about it a couple months ago. It's a precision visual Tailwind CSS site builder/editor, meaning it's not a "dumbed down" drag-and-drop-based site builder, which can be very imprecise and quirky. Instead, elements in Webfoundry are added using simple editor commands such as Create After, Create Before, Create Inside, etc. Those commands all operate relative to the currently selected element. You can click elements to select them.

There are 2 main modalities for using Webfoundry. The first is to develop an app entirely in Webfoundry, which has untethered support for JavaScript (we're looking to add TypeScript support eventually). The second is to only use Webfoundry as a Tailwind CSS editor. In other words, you'd still use React/Vue/etc, but you'd be copying JSX to and from Webfoundry. For example say you have a header and you want to make changes to it. First you'd copy its JSX to Webfoundry, then you'd make the necessary changes to it visually, and finally you'd copy the JSX back to your source. In my experience, once you get the hang of the editor, you can develop UIs up to 2x faster than by writing code (not made up, I measured it!)

The editor's source code is available for the curious minds, but for now it's proprietary: https://github.com/guiprav2/webfoundry3 We want to make it fully open source soon.

We use Intercom for in-app communications and reply quickly. You can get any help you want related to web development with Webfoundry there. Would love to read your opinions on it!

Cheers, Gui @ Webfoundry.app

Forgot to mention we also have a YouTube channel with some videos showcasing some real work being done with it: https://www.youtube.com/@webfoundryapp

Maybe add a note that the site doesn't work in Safari. I tried clicking on some random icons and didn't understand what was going on. In Firefox the laylout looks correct but I don't have a clue how to use it.

Hmm, looks like a Tailwind bug, some classes don't seem to be generated for some reason. I'm using Play CDN which they outright tell users not to use in production and I've been wondering why. Maybe this is it? Surprised the problem only happens on Safari though, I would think the Play CDN developers use macs with Safari easily accessible for testing. Weird. Will try a minimal repro and if confirmed send a bug report I guess. Thanks for the note!

As for how to use Webfoundry, the learning curve is steep but short. As soon as you understand you can click elements and use the Styles tab (accessible through the paint brush action on the sidebar) to view and modify Tailwind CSS classes, everything should make a lot more sense.

Other than that, adding elements and navigating the DOM without drag-and-drop and without an HTML tree can seem counterintuitive but is very easy once you get the hang of it. You can use the Left Arrow to select a parent element, the Right Arrow to select the first child, and Up and Down Arrows to move the selection between siblings. This combined with click-to-select makes it quite easy to reach any point in the DOM tree very visually. Once an element is selected, you can use the Actions tab (accessible from the little hand icon on the sidebar) to create elements after the currently selected element, before, or inside using the action buttons that show up. Keyboard shortcuts are visible on the right so you can learn to use the keyboard if you want. It speeds things up drastically but isn't for everyone.

Anyways, thanks for giving Webfoundry a go even if short, we really appreciate it!

I couldn't find a way to upload an existing project, do you plan on adding this feature anytime soon?

ZIP import/export is on its way but the ZIP must be compatible with Webfoundry. If you just ZIP a folder with a bunch of HTMLs that won't work because there's a lot going on with Webfoundry's HTML files to make it all work. Such as loading Tailwind CSS, etc.

That's pretty amazing. Is this going to remain free to use?

For the foreseeable future, yes. We might introduce subscriptions once the product has enough users and is mature enough. For now we want to keep it free and localStorage-based so any amount of users have zero costs for us.

Reply on news.ycombinator.com