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
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.