Oleg

There are few ideas to integrate Engramma into various tools. Now you can use Engramma on your website. The new engramma package packs the whole app in a Custom Element that you can drop into a dialog and use to edit design tokens extracted from CSS variables directly on the page.

Today we’re finally unveiling Inception - a creative AI tool that lets you experiment with design ideas backed by production-grade code.

Where should we take this tool next? Let’s discuss it on Product Hunt:

producthunt.com/products/web...

una.im | Follow-the-leader pattern with CSS anchor positioning Learn how to create a dynamically re-anchored pointer element.

I've been using a "follow-the-leader" pattern with CSS anchor positioning lately so I decided to write about it!

You set up a "follower" element and dynamically update the anchor on an event/state. Surprisingly simple and effective.

Read more with demos!:

👀➡️ una.im/follow-the-a...

Super nice!

Surprise! We've been sneakily backing up your published sites forever... just forgot the "Restore" button. Now, if you royally screw up your build, rewind to the last good version with one click.

Moving away from static interfaces in an AI-driven world means we need to rethink how we approach design in the coming years.

webstudio.is/blog/moving-...

Inception: a creative, code-first, AI-native design tool

webstudio.is/blog/incepti...

Breaking news: the PAGE NOT FOUND page can now be found!

By default, Webstudio didn’t include 404 pages - you had to add them yourself. Now that’s changed: they’re there by default when you create a new project, and, as before, you can style the page however you like.

We just added HTML+Tailwind paste 🚀

Paste HTML + Tailwind from any site into Webstudio in one click. Use AI to generate sections or choose from thousands of Tailwind templates.

But there is more to it: webstudio.is/blog/making-...

Webstudio Inception - where ideas become real YouTube video by Webstudio

Introducing Webstudio Inception - the AI-native way to design and build websites.

Invites: webstudio.is/inception

We believe we unlocked something incredible—go from a single prompt to a unique, beautiful, creative website in minutes. Production-ready code.

www.youtube.com/watch?v=Uf2l...

Prompt: Build a hero section for a company is called iRobot - it makes humanoid robots that help you with farming e.g. harvest veggies from the garden etc

play.tailwindcss.com/EGWkhlEpen?l...

play.tailwindcss.com/HiYvSeAW58?l...

play.tailwindcss.com/I74EDMa90r?l...

Prompt: Create a hero section for a luxury real estate brand that sells expensive homes. Show some objects, prices, locations.

play.tailwindcss.com/gh1SZEH8ip?l...

play.tailwindcss.com/8tfyNfTtMA?l...

play.tailwindcss.com/tcdqKoDMU0?l...

Prompt: Create a hero section for a incredible Coffe shop. Tell about location, opening hours, menu, price range, etc. reviews about how incredible it is.

play.tailwindcss.com/R9bxkes97L?l...

play.tailwindcss.com/hrPssTcyPT?l...

play.tailwindcss.com/dzlUUjx0SU?l...

- Create a hero section for a web developer Ivan Starkov
- Section must contain at least 3 heroic events in his life.
- Section must contain people reviews about how great he is

play.tailwindcss.com/e4L8vbtcAH?l...

play.tailwindcss.com/hUHHNU4cQ1?l...

play.tailwindcss.com/ucGRc3KWD7?l...

1. All of these were generated from a single, simple prompt—written in a language anyone could write.
2. No template was part of the pipeline; this is 100% generative AI.
3. No manual changes, no second prompts, no adjustments whatsoever.

I will be posting more examples to this thread.

🧵

Team @webstudio.is has been researching Generative Web Design for a while, and this week, we had seven breakthroughs. I can’t disclose the details of each one, but I can share the results.

This is just our prototype—we still have much to do, but:

Truly unbelievable shit show

#CSS only carousels arrive in Chrome 135

⤷ nerdy.dev/css-carousel...

Deploy Webstudio to Hetzner with Coolify In this tutorial, you will learn how to export your Webstudio Project and use Coolify to deploy it to Hetzner. Coolify is a PaaS that makes it easy to deploy and manage applications on your own server, giving you control over your infrastructure without the complexity. You can self-host Coolify or use their Cloud. See the documentation for more info: https://docs.webstudio.is/university/self-hosting/hetzner-coolify Coolify: https://coolify.io Hetzner: https://www.hetzner.com Build unlimited sites with Webstudio for FREE 👉 https://wstd.us/future-web

No hosting lock-in 🔓 with this setup: Webstudio, Hetzner, Coolify 🔥

Webstudio 👉 Full site export
Hetzner 👉 Cost-effective servers
Coolify 👉 Deployment management

Watch the tutorial 👇

Deploy Your Webstudio site to Digital Ocean with Coolify In this tutorial, you will learn how to export your Webstudio Project and use Coolify to deploy it to Digital Ocean. Coolify is a PaaS that makes it easy to deploy and manage applications on your own server, giving you control over your infrastructure without the complexity. You can self-host Coolify or use their Cloud. See the documentation for more info: https://docs.webstudio.is/university/self-hosting/digital-ocean-coolify Coolify: https://coolify.io Digital Ocean: https://www.digitalocean.com Build unlimited sites with Webstudio for FREE 👉 https://wstd.us/future-web

Here’s another self-hosting tutorial — this time with @coolify.io and @digitalocean.com 🙂

Want to reuse an email 📧, phone number, or CMS connection data throughout your site??

Now you can with Global Data Variables!

🌎 Define reusable data globally
📦 Access the variables anywhere… including inside Slots!
👌 Maintain consistency
🫰 Easier CMS setup!

Demos below 😉

Webstudio now has Docker support for sites!

Export your dynamic site, and deploy it just about anywhere.

Get total control over your hosting, cost, and compliance.

See comments for a tutorial on using Flightcontrol to deploy your site to AWS.

4,000 community members in Discord.

Couldn’t imagine Webstudio without you all ❤️

Google is screwing your SEO performance? It's all in your 𝗵𝗲𝗮𝗱.

Meet Head Slot component — the visual way to customize the <head> per page.

🛠️ Set canonical URLs to manage duplicate content for search engines

🛠️ Set alternate URLs for multilingual/regional versions

Made in Webstudio without writing code

“Other platforms are stuck in 2015”…

Study reveals Webflow sites have 256% more classes than Webstudio

More classes correlate with harder maintainability and slower websites.

Here are the details and the underlying reason for the difference.

wstd.us/tokens-classes

YouTube component is here!

↔️ Responsive by default
💤 Fast with lazy loading
🎛️ UI inputs for all the settings
▶️ Customizable play icon and loading icon
👻 “Privacy Enhanced” Mode enabled by default

New feature: code folding!

˅ Useful for:

˃ ↔️ API responses (JSON)
˃ 🛠️ Custom code like JavaScript

New in the Marketplace: RSS Feed

🎛️ Fully customizable
📲 Let users subscribe to your content

We made a platform-wide change that reduced INP, a Core Web Vital.

Our site went from 409 ms to 137 ms on mobile.👇