Webstudio
@webstudio.is
A happy place to design and build for the web.
☆ Open Source https://git.new/website
☆ All CSS properties
☆ Dynamic at the speed of static
☆ Open Source https://git.new/website
☆ All CSS properties
☆ Dynamic at the speed of static
Pinned
You can now generate CSS animations and scripts with AI — then simply paste them into the Webstudio Builder.
Create reveal effects, clickable galleries, and much more. 🎨✨
wstd.us/inception
Create reveal effects, clickable galleries, and much more. 🎨✨
wstd.us/inception
Create Reveal Animations and Clickable Galleries Using AI
In this video, we’ll show you how to take your Webstudio projects to the next level using AI-generated CSS animations and scripts. You can easily generate animations, reveal effects, clickable galleries, and more — then just paste them right into the builder. https://wstd.us/inception
youtu.be
November 11, 2025 at 2:53 PM
You can now generate CSS animations and scripts with AI — then simply paste them into the Webstudio Builder.
Create reveal effects, clickable galleries, and much more. 🎨✨
wstd.us/inception
Create reveal effects, clickable galleries, and much more. 🎨✨
wstd.us/inception
Got dozens of projects in Webstudio?
Now you can organize them all effortlessly using tags!
#webstudio #productivity #workflow #important
Now you can organize them all effortlessly using tags!
#webstudio #productivity #workflow #important
November 7, 2025 at 11:03 AM
Got dozens of projects in Webstudio?
Now you can organize them all effortlessly using tags!
#webstudio #productivity #workflow #important
Now you can organize them all effortlessly using tags!
#webstudio #productivity #workflow #important
2025 is the year we finally render the current date correctly. Apparently, it’s been an unsolved problem since 1988, when ISO 8601 was first published.
🔁 Auto-updating
🗄️ Server-rendered — no flash of wrong/empty dates
🕒 Semantic HTML using
🔁 Auto-updating
🗄️ Server-rendered — no flash of wrong/empty dates
🕒 Semantic HTML using
Render a semantic, server-side, auto-updating current date
Rendering an automatically updating current date — for something as simple as a copyright notice in the footer — seems to be a problem static site builders have been struggling with since 1988. Build unlimited sites with Webstudio for FREE 👉 https://wstd.us/future-web
youtu.be
November 4, 2025 at 12:05 PM
2025 is the year we finally render the current date correctly. Apparently, it’s been an unsolved problem since 1988, when ISO 8601 was first published.
🔁 Auto-updating
🗄️ Server-rendered — no flash of wrong/empty dates
🕒 Semantic HTML using
🔁 Auto-updating
🗄️ Server-rendered — no flash of wrong/empty dates
🕒 Semantic HTML using
Have you ever struggled to create a filter form for directories without a submit button — where every checkbox or input instantly updates the results?
We’ve updated the @baserow example in the marketplace to include a form with auto-submission.
We’ve updated the @baserow example in the marketplace to include a form with auto-submission.
November 3, 2025 at 2:23 PM
Have you ever struggled to create a filter form for directories without a submit button — where every checkbox or input instantly updates the results?
We’ve updated the @baserow example in the marketplace to include a form with auto-submission.
We’ve updated the @baserow example in the marketplace to include a form with auto-submission.
A workflow for going from 0 → production with Webstudio Inception & Builder:
🎨 Generate your design in Inception
🧩 Generate the design system
🏗️ Transfer to Builder and go live
youtu.be/rwJG5yGb0WA
wstd.us/inception
🎨 Generate your design in Inception
🧩 Generate the design system
🏗️ Transfer to Builder and go live
youtu.be/rwJG5yGb0WA
wstd.us/inception
A workflow for going from 0 → production with Webstudio Inception & Builder
🎨 Generate your design in Inception 🧩 Generate the design system 🏗️ Transfer to Builder and go live https://wstd.us/inception Prompt I used: 1. create a design system using css variables 2. define the variables in a style tag 3. use the variables via tailwind inside the class 4. keep all html exactly the same 5. provide me a code block with everything Wait for my html code
youtu.be
November 1, 2025 at 4:04 PM
A workflow for going from 0 → production with Webstudio Inception & Builder:
🎨 Generate your design in Inception
🧩 Generate the design system
🏗️ Transfer to Builder and go live
youtu.be/rwJG5yGb0WA
wstd.us/inception
🎨 Generate your design in Inception
🧩 Generate the design system
🏗️ Transfer to Builder and go live
youtu.be/rwJG5yGb0WA
wstd.us/inception
This Finnish website is literally on fire.
It’s green, fast, and multilingual — and somehow it didn’t burn the budget. 🔥
Built with Webstudio, powered by a Baserow backend.
👉 finskved.fi/en
It’s green, fast, and multilingual — and somehow it didn’t burn the budget. 🔥
Built with Webstudio, powered by a Baserow backend.
👉 finskved.fi/en
October 31, 2025 at 10:56 AM
This Finnish website is literally on fire.
It’s green, fast, and multilingual — and somehow it didn’t burn the budget. 🔥
Built with Webstudio, powered by a Baserow backend.
👉 finskved.fi/en
It’s green, fast, and multilingual — and somehow it didn’t burn the budget. 🔥
Built with Webstudio, powered by a Baserow backend.
👉 finskved.fi/en
We just dropped a new Style Dialog in Webstudio Inception.
Explore compositions, layouts, colors, and even emotions.
These aren’t templates — they’re AI instructions.
Composable. Generative. Never the same twice.
wstd.us/inception
Explore compositions, layouts, colors, and even emotions.
These aren’t templates — they’re AI instructions.
Composable. Generative. Never the same twice.
wstd.us/inception
October 30, 2025 at 9:08 PM
We just dropped a new Style Dialog in Webstudio Inception.
Explore compositions, layouts, colors, and even emotions.
These aren’t templates — they’re AI instructions.
Composable. Generative. Never the same twice.
wstd.us/inception
Explore compositions, layouts, colors, and even emotions.
These aren’t templates — they’re AI instructions.
Composable. Generative. Never the same twice.
wstd.us/inception
Reposted by Webstudio
String & Array Operators in Webstudio Expression Editor
YouTube video by ELECOS - Ihre Boutique-Agentur
youtu.be
October 23, 2025 at 8:33 PM
New in the Expression Editor docs.webstudio.is/university/f...:
You can now use safe JavaScript Array and String methods!
Search, manipulate, and compare data from your variables or APIs — all directly inside your expressions.
You can now use safe JavaScript Array and String methods!
Search, manipulate, and compare data from your variables or APIs — all directly inside your expressions.
October 20, 2025 at 12:52 PM
New in the Expression Editor docs.webstudio.is/university/f...:
You can now use safe JavaScript Array and String methods!
Search, manipulate, and compare data from your variables or APIs — all directly inside your expressions.
You can now use safe JavaScript Array and String methods!
Search, manipulate, and compare data from your variables or APIs — all directly inside your expressions.
Enhancing variability of designs using probabilistic sampling. Based on the new research paper, we attempted to improve variability, did we succeed?
All details are in the description: www.youtube.com/watch?v=MTg5...
All details are in the description: www.youtube.com/watch?v=MTg5...
Enhancing variability using probabilistic sampling
YouTube video by Webstudio
www.youtube.com
October 18, 2025 at 11:30 AM
Enhancing variability of designs using probabilistic sampling. Based on the new research paper, we attempted to improve variability, did we succeed?
All details are in the description: www.youtube.com/watch?v=MTg5...
All details are in the description: www.youtube.com/watch?v=MTg5...
Unfortunately, bullying AI into making a better design actually works 😅
Happy bullying wstd.us/inception 😈
Happy bullying wstd.us/inception 😈
Unfortunately, bullying AI into making a better design actually works 😅
Happy bullying https://wstd.us/inception 😈
youtu.be
October 15, 2025 at 7:06 PM
Unfortunately, bullying AI into making a better design actually works 😅
Happy bullying wstd.us/inception 😈
Happy bullying wstd.us/inception 😈
From idea to web design in minutes. We built 32 unique versions for 3 businesses - in just 15 minutes. Here's the time-lapse 👇
wstd.us/inception
youtu.be/S_yQCUnOtCo
wstd.us/inception
youtu.be/S_yQCUnOtCo
From idea to web design in minutes. We built 32 unique versions for 3 businesses - in 15 minutes
YouTube video by Webstudio
youtu.be
October 13, 2025 at 7:57 PM
From idea to web design in minutes. We built 32 unique versions for 3 businesses - in just 15 minutes. Here's the time-lapse 👇
wstd.us/inception
youtu.be/S_yQCUnOtCo
wstd.us/inception
youtu.be/S_yQCUnOtCo
A walkthrough of the Webstudio Inception interface - the second video in the series is live!
🎥 Watch on YouTube www.youtube.com/watch?v=9mGj...
If you liked this one, let me know what other videos you’d like to see next.
If you didn’t — we’d love to learn from your feedback 🙏
🎥 Watch on YouTube www.youtube.com/watch?v=9mGj...
If you liked this one, let me know what other videos you’d like to see next.
If you didn’t — we’d love to learn from your feedback 🙏
A walkthrough of the Webstudio Inception interface
In this video, I’ll walk you through most of the functions you’ll find in the interface and give you some context on how to use them. Learn more about Inception: https://wstd.us/inception
www.youtube.com
October 12, 2025 at 3:36 PM
A walkthrough of the Webstudio Inception interface - the second video in the series is live!
🎥 Watch on YouTube www.youtube.com/watch?v=9mGj...
If you liked this one, let me know what other videos you’d like to see next.
If you didn’t — we’d love to learn from your feedback 🙏
🎥 Watch on YouTube www.youtube.com/watch?v=9mGj...
If you liked this one, let me know what other videos you’d like to see next.
If you didn’t — we’d love to learn from your feedback 🙏
The first video in the series is live: "Editing Generated Designs in Inception"
In this video, we’re going to build a website for a rocket company that delivers payloads to orbit 🤣
🎥 Watch on YouTube www.youtube.com/watch?v=iMph...
If you liked this one, let me know what other videos you’d like t
In this video, we’re going to build a website for a rocket company that delivers payloads to orbit 🤣
🎥 Watch on YouTube www.youtube.com/watch?v=iMph...
If you liked this one, let me know what other videos you’d like t
Editing generated designs in Webstudio Inception
The first attempt at generating a design with AI can be a total miss, but it doesn’t have to stop there. You can choose the direction you want to go and change everything you don’t like. Learn more about inception https://wstd.us/inception
www.youtube.com
October 11, 2025 at 10:34 AM
The first video in the series is live: "Editing Generated Designs in Inception"
In this video, we’re going to build a website for a rocket company that delivers payloads to orbit 🤣
🎥 Watch on YouTube www.youtube.com/watch?v=iMph...
If you liked this one, let me know what other videos you’d like t
In this video, we’re going to build a website for a rocket company that delivers payloads to orbit 🤣
🎥 Watch on YouTube www.youtube.com/watch?v=iMph...
If you liked this one, let me know what other videos you’d like t
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...
Where should we take this tool next? Let’s discuss it on Product Hunt:
producthunt.com/products/web...
October 8, 2025 at 7:56 AM
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...
Where should we take this tool next? Let’s discuss it on Product Hunt:
producthunt.com/products/web...
POV: when you have a small army of AI models that generate designs simultaneously.
Right now in Inception: wstd.us/inception
Right now in Inception: wstd.us/inception
October 6, 2025 at 2:36 PM
POV: when you have a small army of AI models that generate designs simultaneously.
Right now in Inception: wstd.us/inception
Right now in Inception: wstd.us/inception
Fetching data in Webstudio just got 3× better, thanks to all the feedback from the community. 🙏
1. You can create bindings for each search parameter
This means you can pass data from other variables as search parameters — including JSON values.
2. You can define Cache Max Age
This means your
1. You can create bindings for each search parameter
This means you can pass data from other variables as search parameters — including JSON values.
2. You can define Cache Max Age
This means your
September 8, 2025 at 1:27 PM
Fetching data in Webstudio just got 3× better, thanks to all the feedback from the community. 🙏
1. You can create bindings for each search parameter
This means you can pass data from other variables as search parameters — including JSON values.
2. You can define Cache Max Age
This means your
1. You can create bindings for each search parameter
This means you can pass data from other variables as search parameters — including JSON values.
2. You can define Cache Max Age
This means your
Multi-frame canvas in Inception has some key differences compared to Figma:
1. It is made for fast experimentation. You can quickly generate many versions, delete them, and add new ones.
2. High parallelization. Everything can be generated in parallel while you wait for the first generation to fin
1. It is made for fast experimentation. You can quickly generate many versions, delete them, and add new ones.
2. High parallelization. Everything can be generated in parallel while you wait for the first generation to fin
September 3, 2025 at 8:39 AM
Multi-frame canvas in Inception has some key differences compared to Figma:
1. It is made for fast experimentation. You can quickly generate many versions, delete them, and add new ones.
2. High parallelization. Everything can be generated in parallel while you wait for the first generation to fin
1. It is made for fast experimentation. You can quickly generate many versions, delete them, and add new ones.
2. High parallelization. Everything can be generated in parallel while you wait for the first generation to fin
A discussion on the future roadmap of Webstudio is happening on Reddit. Please add your comments or simply upvote things you want to see happen!
www.reddit.com/r/webstudio/...
www.reddit.com/r/webstudio/...
September 1, 2025 at 8:32 AM
A discussion on the future roadmap of Webstudio is happening on Reddit. Please add your comments or simply upvote things you want to see happen!
www.reddit.com/r/webstudio/...
www.reddit.com/r/webstudio/...
Announcing “Where is this image used?” 🙃
Ever wanted to delete or update an image but had to visit every page to find where it’s used?
Now you can see a complete list of everywhere each asset appears.
Ever wanted to delete or update an image but had to visit every page to find where it’s used?
Now you can see a complete list of everywhere each asset appears.
August 12, 2025 at 4:49 PM
Announcing “Where is this image used?” 🙃
Ever wanted to delete or update an image but had to visit every page to find where it’s used?
Now you can see a complete list of everywhere each asset appears.
Ever wanted to delete or update an image but had to visit every page to find where it’s used?
Now you can see a complete list of everywhere each asset appears.
Announcing image descriptions!
If you:
1. Add an asset
2. Describe what’s in the image
then every image that uses the asset will automatically include an alt attribute, so people using screen readers get the context.
A huge win for accessibility!
If you:
1. Add an asset
2. Describe what’s in the image
then every image that uses the asset will automatically include an alt attribute, so people using screen readers get the context.
A huge win for accessibility!
August 12, 2025 at 4:34 PM
Announcing image descriptions!
If you:
1. Add an asset
2. Describe what’s in the image
then every image that uses the asset will automatically include an alt attribute, so people using screen readers get the context.
A huge win for accessibility!
If you:
1. Add an asset
2. Describe what’s in the image
then every image that uses the asset will automatically include an alt attribute, so people using screen readers get the context.
A huge win for accessibility!
Announcing "asset renaming"!
It’s like MacOS Finder - just for renaming images.
Don’t like a name? Change the name!
It’s like MacOS Finder - just for renaming images.
Don’t like a name? Change the name!
August 12, 2025 at 3:40 PM
Announcing "asset renaming"!
It’s like MacOS Finder - just for renaming images.
Don’t like a name? Change the name!
It’s like MacOS Finder - just for renaming images.
Don’t like a name? Change the name!
Announcing "Black Dot" ⚫
It’s like a black hole - but for cleaning up unused assets.
See a dot on an image? That image is unused.
1. Click it
2. Delete the image
3. Enjoy
It’s like a black hole - but for cleaning up unused assets.
See a dot on an image? That image is unused.
1. Click it
2. Delete the image
3. Enjoy
August 12, 2025 at 3:12 PM
Announcing "Black Dot" ⚫
It’s like a black hole - but for cleaning up unused assets.
See a dot on an image? That image is unused.
1. Click it
2. Delete the image
3. Enjoy
It’s like a black hole - but for cleaning up unused assets.
See a dot on an image? That image is unused.
1. Click it
2. Delete the image
3. Enjoy
Great news! You can now self-host sites featuring scroll-driven animations powered by the Webstudio Animation Engine.
webstudio.is/scroll-drive...
webstudio.is/scroll-drive...
August 4, 2025 at 2:26 PM
Great news! You can now self-host sites featuring scroll-driven animations powered by the Webstudio Animation Engine.
webstudio.is/scroll-drive...
webstudio.is/scroll-drive...