Show HN: I built a website editor for TailwindCSS | Hacker News Reader

Show HN: I built a website editor for TailwindCSS

webase.com

Hey guys! I've spent the past three months rewriting the WeBase front-end based on TailwindCSS!

The original front-end was built with Bootstrap, a tool I still very much appreciate, but as I really started to "get" Tailwind I started to see its power and wanted non-developers to get to experience it.

The WeBase website editor only supports around 70% of Tailwind (the full surface area of Tailwind is pretty BIG!), but I am happy with how it has turned out.

There are still some UX issues I need to improve but I wanted to start getting some feedback as soon as possible to I'm making if generally available today!

I'm running a deal for HN users... 80% off of the Lifetime deal ($49 instead of $249). Just use the coupon code: HN4LYFE

The pro version allows you to publish to websites to custom domains with a Netlify integration as well access to a ChatGPT AI Assistant for generating content.

If you've every wanted to launch a personal or any other kind of website this is a pretty good deal! :-)

The coupon code will expire after Monday, April 10, 2023.

Feedback welcome!

This piqued my curiosity, but there are so many apparently broken links on the site. What components are there? What’s the accessibility story? What does it actually do (SOUNDS like a GUI editor to configure Tailwind class names for a component, but can’t confirm that, nor tell whether I can only configure YOUR components or add my own). Hard to motivate myself to spend even $50 to find out what I’m getting.

Congrats on the launch!

It seems[0] that the current lifetime deal is $99, not $249.

Also, to what extent can we try it without paying upfront?

[0] https://www.webase.com/launch-deal

It is completely free to try out and use. The deal gives you the integration with Netlify to publish to custom domains, the use of the AI Assistant, and the ability to download the source code.

Actually we haven't put the download behind the customer features yet so you can do that today, but at some point that will be a pro-feature. Of course developers can just inspect the source and copy anyway so it kind of is always "downloadable". :-)

After browsing the landing page I decided to see what the pricing was. I clicked the navigation and the only link was to get started. This link brought me to a signup screen. There was no indication if I register will I have access to the service. Is it free. Are you going to ask for my credit card number after I sign up for a newsletter, that I don’t want. I’d include the pricing in either the landing page or have a link in the nav. It’s currently tucked away in the footer. Be upfront with what you’re selling. Also, you’re selling a single purchase for $99 but there is no trial. There has to be a trial or nobody is going to purchase a product based on the landing page and no extensive docs on the service. Possibly create a directory of steps on how to use the service and that might help. Kind of like the docs for tailwind. It gives a detailed overview of tailwind and includes examples.

Great feedback. The general flow of describing the product and onboarding needs to be improved.

I like the idea of a "directory of steps" to make it easy!

Also really need to finishing building out the site with more info etc!

The Webase bootstrap editor was replaced? What about ppl that had websites built with that tool?

It will exists... I will add some links and make it easy to still use the older tool... it is at /workspace if you want to check it out.

The first version is honestly a more complete No Code tool supporting custom databases (like Airtable) and customer websites/views (like Webflow) in one tool.

And that is the ultimate vision, but I honestly believe the UI has to be a LOT better for it to be really useful. That is why we've re-written the front-end with a completely new approach that is more powerful and flexible.

Are you able to download your site as HTML? Preferably in a git repo with a history of changes?

This would be the leading feature against other CSS UI builders.

You can download the site as HTML... it bundles the HTML and CSS in a zip file; but it does not integrate with git in any way.

That is an interesting idea for a feature... I've built stuff on top of the Github API before but never to push code to a repo.

I wonder if people would pay for that feature?!?

I do not like lifetime deals. There might not be enough incentive for the builder / publisher to maintain the service. It might be gone again in a few years or even months once a lot of ppl signed up and revenue stream is going down.

I'm fine with lifetime as long as there's also a subscription option that some customers use. The former supports early product development and the latter encourages ongoing developer commitment. As long as their customers don't weight too heavily toward lifetime then it should be good for everyone.

Will there still be an option to use it with Bootstrap?

I could see something like this being helpful to a team I work with, but they're pretty strongly in on Bootstrap and there are human reasons I wouldn't want to pick up the challenge of changing that.

Yes... I built the original version on Bootstrap and have some abstractions in place to allow using a different CSS framework.

One of the goals for the platform is to make it incredibly simple to create new templates that could be sold on other sites like WrapBoostrap etc.

If I can help people make money by using WeBase I believe there will be plenty of opportunity for WeBase to make money.

Thanks for the comment!

Well, I would not recommend this tool to a development team which wants to speed-up the design part of building applications, unless it provides some kind of version control.

Ideally that would be what they use already, which is probably git. Note that I'm not saying GitHub, but just Git.

Edit: looks like I missed some copy on the landing page mentioning that you can download the code! Leaving the original comment below for posterity.

One thing I've never understand about the landing pages for this type of product… why mention Tailwind (or Bootstrap, etc)? It's not clear whether you get to download the actual code, but it does mention that it integrates with Netlify so I'm guessing not. If you can't get the actual code, why highlight what's ultimately an implementation detail?

(The app does look neat, by the way — congratulations on launching!)

> It's not clear whether you get to download the actual code

This would be interesting to know!

It looks like I can't see the source code for components. It appears this is a Pro feature, and if it is I'd recommend having a call to action (open to view code that shows upgrade dialog)

You can download the code of a website. I could easily add that feature to the components as well.

One cool thing about how this is built is components/templates/websites all have a uniform API and data model so the same editor is used for each one.

It's mentioned on the landing page

> When you are ready to launch you can deploy to a global CDN directly from WeBase or download the code and take it with you.

I think that's what you meant, no?

Whoops, I missed that! Editing my comment now.

Yeah... you can download the code but I still need to make that easier.

Thanks for the comment and the encouragement!

I apologise if this sounds rude, but the website/demo does not really instill confidence viz. the demo and the general non-functioning + a really dated design along with that price tag.

Feels like you're banking on the Bootstrap feel.

I don't really personally care, but I noticed that there isn't any cookie popup being shown, yet there are some cookies. Using a page like this (https://2gdpr.com/) shows 3 out of 5 tests as possibly in the red.

Never hosted a page of my own but always wondered how to make sure if I comply with all the rules after hearing from my colleagues that they've received a letter from some company asking for money for not complying to those.

AFAIK you are allowed to use cookies/localstorage as much as you want as long as they're not used for tracking.

Github for example uses cookies but doesn't ask for your consent:

"At GitHub, we want to protect developer privacy, and we find cookie banners quite irritating, so we decided to look for a solution. After a brief search, we found one: just don’t use any non-essential cookies. Pretty simple, really. " [1]

[1] https://github.blog/2020-12-17-no-cookie-for-you/

Ed: Just checked myself though. Page seems to be saving google and facebook cookies which would definitely require consent.

"TailwindCSS is rapidly becoming the industry standard styling framework"

This is a pretty bold claim. I wouldn't say that TailwindCSS is anywhere near the industry standard.

It has its fans, but it also has its detractors.

That is a fair point. I honestly HATED Tailwind when I first saw it... it felt like such a step backwards - like writing in assembly code.

But I have come to really appreciate its power even with its verbosity.

I have several ideas for some smaller tools around Tailwind and Bootstrap that I am looking forward to sharing with the world.

Webase is cool. I used an earlier iteration to put together a tiny project teacher prototype and it was very smooth. With the tailwind components, it looks nicer!

To be honest, the design of this site is so simple and somewhat bootstrap-era that I feel as if the $249 price tag is a joke.

Your landing page is ugly to be honest, half of links in the footer goes nowhere - this is unprofessional and lazy. There's no clickable demo, not even overview of components. Why do you lauch your product at current state? Why submit it to HN?

There are plenty of other web builders based on Tailwind or Bootstrap, often they have free tiers, and you're charging 249$, for what? For 300$ you can get Tailwindui* from creators of Tailwindcss or something like Shuffle.dev that has components for Tailwind/Bootstrap/Bulma.

https://tailwindui.com/

https://shuffle.dev/

> Why submit to HN?

For brutally honest feedback from stereotypical grumpy developers, clearly.

OP, stay positive and good luck. However, I agree and think this does need some improvement all around to be more useful.

Keep building and iterating. Congratulations on launch!

Thanks for the positive response. It does need a good be of improvement but I really just needed to draw a line in the sand and get this launched to get feedback!!!

I'll give you more specific criticism. I'm not gonna sign up until I've read something that shows me the workflow and I've imagined that it could make my life much easier. Even if there's a free trial, I don't want to sign up for another thing without first confirming there's a chance I'll actually use it.

It's a UI builder, not a set of components.

But you're right that they built a pretty ugly landing page. Especially the color palette and fonts selection. I don' think this should detract from the service offered, so I hope they fix this quick.

> It's a UI builder, not a set of components.

I think it's UI builder that has predefined set of components that user can customise - globally (by customising 'theme' - font family, primary colors etc) or per component (padding, margins, overwriting theme settings). From these components user creates pages/templates. User can create there own components if they want so that's good.

Bu OP doesn't show those predefined components even as images, ever more there's no information how many components there are. And predefined components are important feature of most web builders as they can save a lot of time. Also well designed components (good color scheme, typography, spacing) helps develovers without design skills.

You are right that I need to just do a WAY better job of showing the product on the home page.

I honestly just needed to get this out to the world so I can hear comments like these to make sure I am focusing on the right things!

Thank you for the comments!!

There is a lot of subjectivity into what makes a great landing page but I am sure you are right that the current version can be improved.

Thank you for the feedback!!

> Why do you lauch your product at current state? Why submit it to HN?

Keep it constructive - you're being a dick.

If one finds themself thinking this comment is not constructive, I would suggest that the 3 words at the start are considered. Even if one thinks that those last 4 should have been more carefully chosen, you can bet those first 3 are a useful suggestion.

“Ugly” is very harsh tbh. I think it looks fine. Although I agree not breathtaking.

You are right here. It needs to be breathtaking!

One feature I want to add soon is some animations. Just a few animations can add some polish.

We also need to steer away from the heavy use of cards and be a bit more creative.

This feedback is really helpful!

Are these 2 the best? Any other choices out there?

This a good question. Tailwind UI is really nice but it is for developers and requires a developer to benefit from the templates.

Shuffle.dev is also nice but again... it is for developers and doesn't support hosting and lots of other features I'd expect from a UI Builder in 2023.

WeBase is the first tool that I know of to bring the power of TailwindCSS to non-developers.

> Why do you lauch your product at current state?

Launching as-is and iterating is totally fine IMO. Either they get some users now, much earlier than they would have if they waited, or nothing happens. At worst, it is neutral to not launching. The upside is much higher.

Yes... that is how I was thinking about it. The feedback is invaluable even if it is negative because that provides some clarity on exactly what to fix first!

I will be doing some serious iterating over the next few weeks to get more polish on it before doing a Product Hunt launch.

But HN is a great place to get early feedback in my opinion.

Thank you for the comment!

100% on the links in the footer not going anywhere. I will get that fixed ASAP.

The beauty is that since WeBase has several components and pre-built pages it will be easy! :-)

I do believe there is a market for this... just needs more polish and I need to highlight the features better (components, ChatGPT integration etc).

You're a rude person. Your keyboard should be confiscated for a month until you learn to be nice.

Well... his tone was a bit harsh. If anyone saw how much I worked to get this far they definitely wouldn't call me lazy.

But I get it... strangers have no reason to trust you and the bar is REALLY HIGH these days even for an MVP.

But thank you for reminding us of the importance of being nice! This world does need a whole lot more LOVE and KINDNESS in it.

Check out the Values section of this template:

https://www.webase.com/template-preview/vanilla-landing-page...

One thing I really want to do with WeBase is spread POSITIVITY and ENCOURAGEMENT around the Internet!!

> Your landing page is ugly to be honest, half of links in the footer goes nowhere - this is unprofessional and lazy. There's no clickable demo, not even overview of components. Why do you lauch your product at current state? Why submit it to HN?

We don't know what the age, experience, circumstances, constraints of the OP is. Why jump straight away into using strong words?

Yeah... there is always more to the story than what we see on the surface... and it was an aggressive comment.

Honestly I knew the missing links in the footer was lame but just wanted to get some feedback and was tired of delaying "talking to potential users"!!

Now I will have renewed energy to fix these things!

And frankly I am glad I did... it made it to the front page of Hacker News for over two hours so at least people are interested even if it needs more polish!

Thank you for speaking up!

To deploy each site on netlify, are you creating individual repositories for created website?

No privacy policy?

Reply on news.ycombinator.com