Show HN: Tips.io – A Tailwind playground with AI, page management, and theming
tips.ioHi HN!
My name is Nick and this is my fun side project. Please lay it on me. HN can think of Tips.io as a cracked out Tailwind Playground that has page management and amazing AI integration.
There are a few core ideas:
1) The HTML is the CMS
There are no fields or restrictions. Just hover, click, and start tweaking any HTML. Also, certain elements you click will have special easy edit abilities:
- <img> auto creates an uploader, stock photo picker (or HTML)
- <video> auto creates an uploader, stock video picker (or HTML)
- <svg> auto creates a big icon picker (or HTML)
- <div class="prose"> auto creates a WYSIWYG Editor (or HTML)
2) Slices
Think of these as just individual HTML sections of a page or lil baby single-file components. They are self-contained and isolated so you drag them around easily. The real power comes from reuse across your pages and linking them (aka, one HTML footer updates globally). You can also use "slices" from any other tips.io project for quickly expanding your site with more design options.
3) AI Elements, Not Pages
Another cool concept is you can select any element on an HTML slice an edit that individually vs re-streaming/rebuilding and entire component every time. We support 5 different AI models right now. Some other really intense/cool AI integration is coming soon.
4) Tailwind Everything, No Build Step, & Theming
We have a custom "themer" to make creating Tailwind config files near instant with real-time font trying, color palettes/preset trying, and more. All our Tailwind is automatic and requires zero config instantly. The same Tailwind that magic runs client-side will run server-side so quick no one knows a build step is happening. Tailwind and AI are also a match made in heaven.
Other features:
- Animations - Zoomable page tree - Basic Forms (yes on your static site!) - Analytics - Redirects, site passwords, and much more.
Tech:
- 100% Cloudflare Workers - Svelte - UnoCSS
Some resources:
- Promo video: https://www.youtube.com/watch?v=s8U2rJJX-rk - Tutorial & demo video: https://tips.io/tutorial - Just launch: https://new.tips.io
Good lord, man, this is a _side_ project? Most impressive. Nothing much to add except to say I am most impressed.
Haha, thanks so much! It did get a bit feature rich and has sat around forever as it wasn't my main source/priority for income.
> https://www.youtube.com/watch?v=s8U2rJJX-rk
video is a good start but is a little bit long without cuts. for the kind of background music you chose you probably want bigger/more dynamic text and videos to match the energy.
This is solid, I'll show my appreciation by giving constructive criticism. This is after giving it the "120 second glance" that I imagine is how most people scan projects quickly without a proper deep dive:
* First impression: this is a website builder that looks and feels like many other website builders, with some advantages like low onboarding friction, and AI integration. As a solo project reaching par is a triumph. But I think if you continue to diverge your marketing page from a default SaaS startup style you can separate yourself more from the pack AND build a reputation as a better design tool instead of another design tool. Of course the product is more important than the landing page, but perception is perception. You do for example show personality in some of the loading pages which I personally enjoy.
* I got about 4 hours of sleep last night. I was thrilled when I could click into your app and immediately play around without having to register or experience other forms of friction. But complex design interfaces are overwhelming to me. How do I learn your tool quickly? Why should I invest the time to learn your tool versus other great tools? These are questions I'm left with after a quick scan. There are a lot of developer tools vying for my time. And I imagine their all working on AI integrations if they don't have it already.
* As a SWE I don't like Tailwind. I don't like the syntax soup, I don't like having to memorize less conventional syntax because my brain already has enough trivia in it, and I prefer small indie projects that are maintained by extremely small teams with limited resources. As a result I do not reach for Tailwind (despite having paid the $300 or whatever for their membership!). What about developers who don't want to use Tailwind?
* As a potential business customer, can I depend on you? Where will this product be in multiple years? What's the process to transition from a competing tool? What's the process for transitioning to a different tool? Enterprise customers, where the real money is, care about consistency and managing liability sometimes (often?) more then the potential value of a new tool. Consider looking into various compliance licensing, industry audits, and enterprise features, that will be needed to attract investors who want returns based on enterprise sales, not consumer sales.
I wrote this up because I like your project and hope you succeed. Hopefully it helps!
> What about developers who don't want to use Tailwind?
What's that Steve Jobs quote? "You know, you can please some of the people some of the time"
I have a hunch there's a good reason almost all of these site builders go with Tailwind rather than classic CSS, but as mostly-backend developer I couldn't tell you what that was :)
Context for the quote: https://youtu.be/oeqPrUmVz-o
Tailwind is amazing for LLMs. You can't beat it:
- concise
- inline with the rest of the code
I am willing to bet it's going to become a standard because of its existing popularity + the insane tailwinds that codegen give it.
as a (currently) non-SWE I don't like tailwind either.
If this was based on Bulma or similar I would jump right into it.
I did a ctrl-f looking for 'export' - found nothing.
If webflow had explained earlier in their existence that export is easy and those don't count towards your limits I would of been using them - but it was too confusing pricing wise and it seemed to lock you into their ecosystem, so I avoided it.
tailwind - I've tried to like it, I can see why some people will like it, but to me it's bloat in many ways, give me bulma, skeleton, similar.
This project does look interesting though for many reasons.
Wow, this is ridiculously polished for a one-man-show side project. Massive kudos.
Do you have a write-up somewhere of how you built this? I think there is a lot that I (and probably many here on HN) can learn from you.
Thank you so much. Please just make a free site and add your email with notifications enabled or signup for the newsletter. I'll be posting some pretty detailed and mind-blowing updates soon
This seems like a very capable and solidly built project. Well done!
That being said, I can't wrap my head around the naming. Why tips.io? What do tips mean in this context?
(PS: Excuse me if it's covered in the promo video, I'm currently in a zoom call and I can't put any audio through right now)
Super true. I know... I bought this domain a long time ago for another project that never launched and swore to use it one day. It's a short .io that is easy to remember. I agree it does not match well
Just say it stands for “Tailwind is pretty super” or “Tailwind integrated play space”
Done!
Tailwind Intelligent Site Prototyping
Pite Srototyping?
First thought as well. Apart from “cool.tips”, it makes everything sound like you’re on a patreon page.
looks pretty sick, if you don't mind me asking. How long did it take you to build this and how are you marketing this? how many paying customers do you have so far may I ask
Thanks! It's been a fun side hobby project for me. I typically crank out contract work day in and day out.
I got the proof of concept done in a month or so. It took a little longer since I wanted to build it on 100% Cloudflare Workers for ideally low cost, scale, and speed. Other low-pressure things I was trying too.
It has sat around for almost a 1/2 year now unlaunched where I have just added small features here and there.
Over the next few months, I plan to release a ridiculous amount of high quality Tailwind themes for people to start from amongst some other marketing efforts.
I'm curious to why FF isn't supported? What actually breaks it?
Try it. It mostly works but I think the way they manage memory is different or something complicated. We're essentially just constantly hammering an iframe for the preview. In early tests, I kept getting issues with it. I want to revisit in time and optimize that whole thing.
1. Why does it open a new tab when creating an account?
2. Why does it ask for my email in a confusing way later? If you are not going to let me play directly, just do the usual sign up process.
3. I selected the Stripe option and I couldn't understand a thing.
4. Then I went back, create a new page (slug?) and got the AI to generate some code. Clicked preview and instead got the Stripe pages? I later "figured out" that I have to click the "mouse arrow" button to get the preview.
Honestly, overall, I couldn't make any sense of the interface. It's not intuitive. Lots of buttons all over the place. I don't know what's happening, where my files at, and how everything fits together. I also can only see this being useful for creating a very simple landing page. So maybe I am just not the target market for this.
Actually great feedback and finds
Constructive feedback:
I created a free account and dragged four “slices” on to what I thought was a page.
When I clicked save it told me it was out of space and I have to upgrade to premium or clear out space.
I then went to the dashboard dropdown, and selected pages, and added a page slug, and dragged a “slice” to it. Tried to save, same message.
If I go to billing, it says that the free plan has a 5 page limit. But I don’t seem able to create any pages.
I’m wondering if it automatically counts the “slices” that I have to choose from in the theme I chose as being part of the page limit? It looks like there are 16 slices to choose from in the theme I picked.
If it’s because of the slices that came with the theme that I’m out of available pages, I would suggest not counting included slices from the theme toward the page limit for the free plan.
You’re right. It’s cumbersome. And this will change.
I actually spooked for launch and dialed things down.
The idea was for a user to skip the interface and just type a subdomain to get started: <whatever>.tips.io
All sites would start in a playground mode where no signup is required to get going.
But it would be timed and if you didn’t add an email progress would be lost and the site would self-delete.
For launch, I limited it to basically zero to work out bugs and spam. I will be reversing this but open to ideas to balance onboarding.
Front end devs are officially on notice at this point. If you're someone who makes their living doing little more than design -> code (and there are many of us still), it's time to upskill or be left in the dust. The days of writing markup/styles by hand are over.
I've been using chat gpt for quite a bit of UI work lately. Mostly react and tailwind but also other things (python, kotlin-js, etc). It's pretty decent at it and it saves me a lot of time. And more importantly, it saves me from having to herd a bunch of frontend developers into doing what needs doing and frees me up to do more interesting things.
What makes this work well is that tailwind is declarative and relatively simple to figure out for an LLM. There's a lot of stuff but most of it is pretty straightforward stuff. LLMs struggle more on hard stuff like algorithms. UIs are easy.
I just tell it to build me login screen or whatever, I give it some basic instructions (use tailwind, daisyui, react, and typescript). And then I give it some OpenAPI spec in json format and tell it what to do. It does the whole thing complete with working handlers.
The main trick is scoping prompts well and following up when it only implements half of what you asked for or otherwise goes a bit of offscript. Often just nudging it "do the whole thing, damnit" seems to fix that, which I find hilarious. The most tedious thing about this is waiting for it to generate loads of code and then iterating on that code. It's faster than doing it manually but it's a bit like watching paint dry.
Currently the process is time consuming mostly because chat is bit limited as a UX for this and you end up passing it whole files and then re-generating parts of it. I think there's going to be a lot of improvements on that front that will save a lot of time. Mostly that's not even going to be related to improving model quality but simply by building better integrated tools. There's no good technical reason why an LLM can't plugin directly to refactoring or editing APIs in IDEs. You can probably generate a lot of the code that would accomplish that even.
You might want to work a bit on the getting started. I picked a subdomain and clicked and it made it red. An error message of what is wrong might be helpful.
Found a name that works only to get the message that I should be using Chrome.
Tried to start with AI but got the message that it's not available yet.
So I picked a theme only to get the message that it's premium and will be deleted after an hour.
By that time I really felt not super welcomed. I know it's all free and it looks nice, but at every step it was like I did something wrong.
Nice. Reminds me a bit of a product by a friend of mine that is doing similar things: veryfront.com.
It's a web based IDE for react based applications as well as a solution that builds and hosts your project. He's been doing lots of work on that for a few years and it has a bunch of nice features like live previews, support for custom react libraries and styling solutions, pulling in libraries from Github, exporting stand alone builds, etc.
My friend has actually been experimenting with AI code generation as well.
Cudos for making an email-less one-click trial! Looking quite robust, but I did not understand AI feature.
I selected a menu element, and tried some prompts like "make it shine" "make it see-through" "make it cool" and "make it rock", and I saw it rewriting exactly same code for menu every time, changing some of these tailwind ciphers but with no effect on actual look & feel. What am I supposed to get or prompt there?
Really cool! Is it strictly a playground? Entering a subdomain at the start gives me the impression that I can use the result as an actual website, perhaps there's already a path for that but I wasn't sure.
Thanks Ryan. Great question. It's more of "build a full site via small Tailwind playgrounds". I chose that language to best describe quickly the idea. Hope that helps clarify
It looks like you’re using the same domain for the app and user generated content? You usually want to host the user sites on a separate domain because the whole domain can be penalized in search engines for the content users create.
Yep. I also own tipsio.com but I figure for remembrance/launch reasons it's not super big deal right now. SEO play has not happened yet.
More importantly, user content can read and write cookies from the subdomain to the parent domain.
No image uploads on the free plan is tough. Might drive more upgrades but makes using the free plan untenable for me
Might be smarter to limit to a few images because 0 will likely push a lot of people away
I killed it off right before launch actually. I got spooked by potential spam. I think you're right this is the move after I get through some launch stuff.
Congrats on launching! I love the design and the clever loading messages ("Harambe would love this"). Do you plan to support an export option if I want to self-host?
You can already backup your site as either static files or the original "tipsio" files.
Very useful, I did not see this right away. Thanks!
This looks sick! How easy is it to add custom stuff into the pages? Say I've got a really cool three.js project I want to showcase. Is there much work to add it in?
Come on. This is soo not cool. You cannot call something this amazingly effing polished - a "side" project. As someone who struggles with FE I went into a mini depression mode! really amazing work. Please please put a write up on how you built this (if you are willing to share). Im really interested in the FE magic!
This is incredible work for one person. Keen to try it out but like the website might be getting hugged.
You seeing downtime errors? The platform is 100% serverless in Cloudflare Workers, so fortunately mostly hug proof
The content of the editor and the site preview were not loading previously. It seems to be resolved now.
I like how in the icon demo, it shows how you can replace X (formerly Twitter). Nice.
Looks really nice.
Some very minor feedback: the animations are a bit too busy for my tastes
Nick! Congrats on the launch. Super solid. I tried getting ado.tips.io but looks like domain needs to be at least 4 characters long :(
Very well done. And very impressive for a side(!) project, or what started as a side project.
As a backend engineer, I think I'll fall in love with it. :)
Very cool. Post it in the Svelte subreddit, I am sure they‘ll enjoy this.
This is awesome!
Who is it for?
I was thing this myself. Who is this for. I might recommend this for someone who needs to do a pop up concert / event venue site. Or a limited promotion for a niche presence. Any other use cases that people can think of?
Imagine coming back to the site and there being 30+ free themes for various websites and uses.
The people who benefit most would be:
- I can't dev websites => Go to Squarespace
- I dev tiny bit of websites/or smart enough to figure stuff out => Tips.io
- I am a dev => Go custom
Anyone who needs a site!
Big winners right now are developers or low-code (just HTML...) people who need:
- want to just pick a site, tweak, and go
- people who want an easy and free link tree or carrd.co style site without limitations
- splash pages, 1 pagers, microsites, coming soon pages, blogs/profile with full HTML, etc...
- people/orgs who need to do high volume sites
You might want to add some moderation.
https://sex.tips.io/
PS: I am sorry, but I could not resist.
[dead]
[flagged]
ai generated comment
Yep. This user needs to have the ban hammer put to them medium style - their entire comment history is just autogenerated LLM claptrap.
Yep, chose not to reply.
Cool, i looove .io TLDs! Instant "ignorant tech idiot" image!