Introducing Inception V2 - generate and edit designs, edit images, backed by code. Choose any model. webstudio.is/inception

We are trending on GitHub ⭐️⭐️⭐️⭐️⭐️ Wanna show this beautiful repository even more love? github.com/webstudio-is/webs…

Announcing the Webstudio CLI for Developers & Designers 🙀🙀🙀 Now you can publish your website to @vercel, a platform developers use to deploy modern frontends 🎉 ▶️Watch full tutorial: wstd.us/cli-vid

Want full control over every aspect of your website? ...but overwhelmed by complex builders? In just a few minutes, Alex takes you through the anatomy of Webstudio. 👇

Fellow Designers, Visual Developers, and NoCoders, Webstudio Beta, an Open Source alternative to Webflow, is now live on @ProductHunt 🎉 It is our first production-grade version! producthunt.com/posts/webstu… Here is why we are so excited about it 🧵🧵🧵

We are creating an Open Visual Development Platform for the Web Design Community 🫶🏻

Open Source Webflow alternative is getting ready to launch in a few weeks 🚀🚀🚀 - Community-first - Free Cloud & Open Source - Real-time collaboration - Connect any Database or CMS Click "Notify me" to get a notification when we go live on @ProductHunt producthunt.com/products/web…

Today is a big day for Webstudio! We are excited to unveil what we have been working on for the last year! Webstudio CMS is live on ProductHunt: producthunt.com/posts/webstu… We took an unusual approach to CMS because we wanted to prioritize maximum scalability, performance, and flexibility. This is effectively a new approach to handling any data in a NoCode tool. Have fun watching the demo!

Calling all Designers and Template Creators! We are officially opening the Webstudio Template Creator Program. 🥇 Be the first and gain full exposure to our growing user-base 🤑 Keep 100% of the profits, we don’t take a cut. Apply here 👉 wstd.us/template-creators

We are thrilled to announce the alpha release of Webstudio - an Open Source Visual Development Platform Producthunt producthunt.com/posts/webstu… Landing site webstudio.is built with @webstudiois @remix_run @radix_ui @vercel and more Tech intro dev.to/oleg008/webstudio-nex…

Webstudio AI Alpha has arrived 🚀 You can ask it to do lots of things: create layouts, generate CSS, write copy, and more. One thing it won't attempt to do is replace a Designer. It is meant to be an assistant to help you realize your vision. Support us on Product Hunt producthunt.com/posts/webstu…

Native scroll-driven animations engine is live! Webstudio is the first builder to leverage the latest web standard — the Scroll Timeline API — which allows animations to run at 120 FPS off the main thread. piped.video/cxsjKsqrn0Y

Fellow Designers and Visual Developers 👋 Webstudio - an Open Source alternative to Webflow has now become much more accessible with powerful Radix UI components 🪄🦸🏽‍♂️ We JUST launched on Product Hunt! producthunt.com/posts/webstu…

Webstudio is getting ready for the Beta 🚀 Click "Notify me" here to get notified when launch goes live @ProductHunt producthunt.com/products/web… Deep dive into Webstudio: piped.video/watch?v=SbE5dx1v… Try it yourself: webstudio.is

Copy from Webflow, paste into Webstudio and let the magic happen - ⌘ C 🪄 ⌘ V - Structure, names & attributes gets preserved - Classes turn into Tokens - Everything stays responsive, same breakpoints - Images uploaded and WebP-optimized wstd.us/copy-paste

We just made self-hosting static sites for free SUPER EASY. - One-click download - Human-readable classes – Host anywhere (Vercel, Netlify, Cloudflare Pages, GitHub Pages, etc.) - Free to use wstd.us/static

Guess what's coming to Webstudio soon? 🙂

Graduate from classes. 👨‍🎓 Webstudio simplifies managing styles by using Design Tokens, the new standard for visual tools. 📖 Article: wstd.us/design-tokens ▶️ Video: wstd.us/design-tokens-vid

Next week, we are launching the Webstudio CLI - a way to publish your project anywhere. The default will be publishing to Vercel. Are you excited about this?

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 producthunt.com/posts/webstu… ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.

Today, we are not launching a feature; we are unveiling a new look and feel! We have redesigned 200 icons and updated the colors of all controls! Our goal was to reduce visual noise and enhance the crispness and clarity of the icons.

Figma sites is not replacing Webstudio. Beyond the scalability of the projects you can build, our mission is to be an open platform for everyone. And that puts us in an entirely different category. In fact if Figma is going to push the boundaries of what's possible - we are going to make it accessible to everyone.

We just added publishing to staging! - Test it on different devices - Share it with your team - Get approval from your client Publish to the default subdomain or any custom domain and see a preview of the site that is 100% identical to production.

You asked for rich text, here’s something better: 𝗖𝗼𝗻𝘁𝗲𝗻𝘁 𝗕𝗹𝗼𝗰𝗸. 📝 Author long-form content with the 𝗦𝗹𝗮𝘀𝗵 command. 🖱️ Add 𝗰𝘂𝘀𝘁𝗼𝗺 templates to Content Block. ❤️ Get a 𝗡𝗼𝘁𝗶𝗼𝗻-like authoring experience. 🦾 Get more 𝗽𝗼𝘄𝗲𝗿 than typical editors.

Form Component - build it with the full power of HTML and CSS without writing any. webstudio.is/blog/form-compo… - Responsive - Style all the states - Flexible Success and Error content and styling - Can be sent to @airtable , @n8n_io, and other services (stay tuned for the next video on this topic)

Did you know you can already use @splinetool with Webstudio? 🎉

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-web…

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, not just pretty pictures. Use the code anywhere you want, or drop it straight into Webstudio Builder and go live.

Is this you?

Something new is coming to Webstudio: Content mode. If you want to share your projects with clients or team members but don’t want to give them full power of the builder, this mode is for you. Stay tuned.

Announcing the new "Markdown Embed" component! Now you can render and style Markdown—whether it's written directly in Webstudio or fetched from any CMS. It is 100% server-side, SEO friendly! Watch our demo with @baserow and @airtable piped.video/wTpDo4ieFYs

A super fast way to build with Webstudio — Commands & Search.

Webstudio vs Webflow This short article will explain the main differences: webstudio.is/blog/webstudio-… Click "Notify me" to know when Webstudio Beta goes live on @ProductHunt producthunt.com/products/web…

Ready to showcase your stunning designs to the world? 🌎 With Webstudio, you can publish your sites to your own domain name, FOR FREE! 🛠️ Configuring your domain is extremely simple, no puzzling registrar UIs, you can do it without leaving Webstudio Builder.

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.

New addition to the Style Panel: Transforms! These enable you to rotate, skew, translate, and apply other effects to your designs – all without writing code.

Introducing “Element” - this smart new component improves the UX while giving you the ability to use any HTML tag and attribute. - Tag auto-detection - Tag-aware attributes and states - Paste any HTML from anywhere - Quick access via commands webstudio.is/blog/the-new-co…

🚨 Designers, Developers and Agencies, it's time to confidently deploy to production with Webstudio Cloud. ✅Unlimited sites ✅Unlimited domains + Ensure the Open-Source future of Webstudio ❤️ wstd.us/pro

Poor Image Rendering is the second biggest cause of poor website performance! Visitors won't always complain about a sluggish website; they'll simply switch to your competition. 🤗 Fast website - happy customer, especially on mobile 📈 Happy customer - happy business

🚀 Dynamic Data Bindings have arrived! 🔗 Integrate with anything that has an API ⚡ Dynamic at the speed of static 💡 Create your own expressions with support for calculations and conditions Details 👇

Complex CSS values are easier to work with! Code editor now displays when the field contains CSS functions and other complex values.

Announcing native SVG support in Webstudio: now every SVG element can be edited visually. 🚀

Webstudio is growing! Just in September - 9k publishes this month - 5k new projects created - 2.7k signups - 140 custom domains added wstd.us/growth

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 😉

🚨 Animations engine sneak peek 🚨 Added a way to animate each letter. Highly performant, customizable, and simple to implement. Coming soon.

Build a directory, add filters, and scale your programmatic SEO without writing code. How? Using Webstudio with @baserow - an open source alternative to Airtable. A Baserow template is now available in the Marketplace.

Today we deployed a bunch of performance improvements 🏎️🏎️🏎️ The builder should feel about 70% snappier now when you select instances or change styles. Please let us know if you can feel the difference! 🙏

Webstudio AI is Launching tomorrow 🚀🚀🚀 Click "Notify me" producthunt.com/products/web… The idea here is to put the designer in the driver's seat, not to generate flashy stuff that's only great for demos.

4200 organic signups in october, no ads 🚀

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

Craft v1.0 is live — a new standard for building with Webstudio. It allows you to eliminate the learning curve when switching between Projects. It contains: - CSS vars - A style guide - Tokens - Guidelines Craft makes building websites fast, flexible, and reusable. piped.video/watch?v=EeLoBZvl…

The day has arrived: Webstudio AI Alpha is officially in general availability 🔥 Let it handle layouts, generate CSS, write copy, and more while you focus on the big picture. Show off what you've built and tag us in your favorite prompts 🥳 🤖👉 wstd.us/ai-ga

Need to render hundreds of thousands of items on your website? No need for a custom frontend app—we’ve made it possible out of the box, with zero custom code. The Webstudio website isn’t a static site. It can fetch data from any backend or CMS: 1. Define where to fetch the data from. 2. Bind that data to elements on the canvas to control how it's rendered. 3. Publish the site—now any content changes made in your CMS or backend are automatically reflected on your website without needing to republish. Always fresh, always up-to-date.

Introducing Video Animation - a component for scroll-triggered video playback. We also support uploading short videos directly to Webstudio now without going to 3rd party services.

We’re testing a new UX feature. This makes it possible to see long CSS values (often variables), directly in the input fields.

😉😉😉😉😉 A roadmap feature moves to "In Progress"...

Paste CSS from anywhere into the Style Panel! - Import all your CSS variables - Copy styles from @figma and @penpotapp - Copy styles between Webstudio Tokens piped.video/watch?v=OAgK-aYn… This is now the 3rd source you can paste in, joining Markdown and Webflow. More ecosystem compatibility is yet to come!

Our team is deciding on the first CMS integration for @getwebstudio. Meaning with this integration you can use the CMS for all content and use Webstudio to build the design. What is the CMS you would want to use and why?

Who wants @getwebstudio to be local-first? Meaning - you can start the app offline (not like figma) - you can work on it offline - when you go online your changes are all synced up to the cloud - when you are online you can still collaborate in real-time - you can open a project from your file system

Hey Creators👋 We're launching a special lifetime deal for our earliest adopters! A one time payment to build and publish unlimited websites. Limited to 100 accounts. Imagine having uninterrupted access to all of Webstudio's PRO features, forever. 👇 wstd.us/x/lifetime-launch-de…

In the last 3 months, we released 7 big features, 45 smaller features, and 140+ fixes and improvements. Here is the full writeup 👉 wstd.us/news/2024/9

Almost 35k publishes in January. This is a 6.6x growth of real-world usage in 6 months. You guys are killing it!

Want to build on Webstudio using best practices? Watch this comprehensive tutorial, where we build a landing page. See it all! CSS variables, naming conventions, strategies, animations, responsive... And, it's all done using the new Craft standard. wstd.us/full-tutorial

Check your Navigator, folks! You've asked for this feature for a long, long time! 🎉

Some facts about Webstudio 📈 Since Beta Launch in June 2023: 👷‍♂️ Total users: 19242 🛠️ Total projects: 32866 🚀 Total publishes: 49852 Over the last ~3 month, you published: - 23041 times in total - 1772 times per week - 253 times per day Thank you all for being part of @getwebstudio 🙌

There's no "best" headless CMS – it all depends on the use case. Use this Headless CMS Finder to find the right tool for your project. wstd.us/cms-finder No affiliate links, just helpful info.

Are you ready for another big feature launch?

Look! No more var() This frees up a lot of space. When you click the input, var() will appear.

We just added Swiper.js swiperjs.com demos to the Webstudio Marketplace. From those demos you can learn how to build any kind of Swiper.js gallery.

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 @Flightcontrolhq to deploy your site to AWS.

Two new improvements to the Navigator: 1. Added a horizontal scroll bar for those without a mouse that scrolls horizontally or who didn’t know about it. 2. Made the show/hide icon visible even if there is horizontal overflow so it’s easier to access.

Horizontal scrolling images with parallax built using the unreleased animations engine

Inception is going into private Beta webstudio.is/inception 🚀 We are going to give a few people access in the next couple of days, stay tuned

Customers are still asking for WordPress, but you want to use a modern no-code builder. We just released a WordPress template that lets you use Webstudio, publish to the edge, and keep your customers happy with headless WordPress.

Neat UX enhancement: To adjust the spacing on all sides WITHOUT dragging, enter a value on one side, then press Shift + Enter. Alternatively, use Option + Enter to apply the value to two sides. This method offers precise control without manually entering the value each time.

Not only free subdomains, but 5 external domains you can connect for free. And yes, custom code and analytics are free as well. We are not monetizing features you need to build. Only those that are designed for teams.

⚠️ This is an UNOFFICIAL way to animate your Webstudio site. Ani Motion is a lightweight (8.59 KB including CSS) library that adds minimalistic animations to your Webstudio site, including on Radix Components. Now available in the Marketplace. wstd.us/ani-youtube

Webstudio SEO Settings is here 🚀 🎥 wstd.us/seo-settings ✅ Favicon ✅ Site Title ✅ Page Title ✅ Page Descriptions ✅ Meta Tags ✅ Open Graph Tags ✅ Head Code Embed ✅ robots.txt ✅ sitemap.xml

Images from third-party platforms are now automatically optimized! If your images come from Hygraph, Airtable, or any other platform, they'll receive the same optimization treatment as those uploaded directly to Webstudio: converted, compressed, and served as responsive images.

We're incredibly proud to receive such a huge shout-out from the #GoogleIO stage for our work on scroll-driven animations! @una ❤️🙏 piped.video/watch?v=XASRYAR7… piped.video/watch?v=XASRYAR7…

New feature: code folding! ˅ Useful for: ˃ ↔️ API responses (JSON) ˃ 🛠️ Custom code like JavaScript

A deep dive into the upcoming Webstudio CMS integration - A No-Code Frontend for Headless CMS webstudio.is/blog/frontend-f…

We made a platform-wide change that reduced INP, a Core Web Vital. Our site went from 409 ms to 137 ms on mobile.👇

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

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

Check out these stats! 💻 Over 100k projects 🤝 Over 50k users ❤️ Almost 4k Discord users 🌎 Serving terabytes of data per month Webstudio is built to scale.

WebP images are the gold standard when it comes to site speed. Webstudio automatically converts all your uploads to the best format 🤩 Started with a 2MB image. It's now 70KB. That's 96% lighter 🤯

Happy Holidays from all of us at Webstudio! A lot has happened over the past three months, so we’ve put together a summary of the biggest changes: docs.webstudio.is/news/decem…

The first milestone of 60 paying customers has been unlocked! 🔥 We are incredibly excited and hopeful for the upcoming months. It's a fantastic time to embark on something new with Webstudio!

Have you seen the new Webstudio site? We rebuilt it using CSS variables — in 3 days. As users of our own product, we are thrilled about the advancements CSS variables have made in visually building and maintaining websites.

Positivus is a new template in the Marketplace that was built using the Craft standard. It's for digital marketing agencies and showcases services and case studies to potential clients. Credit for the design goes to olgaaverchenko on Figma.

No hosting lock-in 🔓 with this setup: Webstudio, Hetzner, Coolify 🔥 Webstudio 👉 Full site export Hetzner 👉 Cost-effective servers @coolifyio 👉 Deployment management Watch the tutorial 👇 piped.video/OnHLO2Plt2E

Release 0.123.0 is now live! 🤘🚀 🆕 Visual editing for box shadows 🆕 Lazy loading for Vimeo videos 🆕 Code editor now supports syntax highlighting 🆕 Atomic CSS has been added to all projects, resulting in up to 90% reduction in CSS file size ⚡ Details 👇

On monday, we are releasing a feature you have been asking A LOT, one of the most requested features!

Custom fonts are killing performance, but what can we do about it? There is a way - it's called Modern Font Stacks. No Downloads, no layout shifts, no flashes - just instant renders. Now, in Webstudio - learn all about it wstd.us/modern-font-stacks

We are launching clonables 🚀 You can share a link to the project and anyone with that link can now clone your project. Happy cloning 🧙‍♂️

📣 We are launching the Documentation Portal! 📣 Thank you for sticking with us despite the lack of documentation. What we have is far from complete, but with @GitBookIO, you can now contribute to the documentation in just a few clicks ❤️ docs.webstudio.is

A redesigned dashboard with search is here! 🔥

Preparing for a big announcement on Monday, what do you think we are launching? 🚀

So many have asked us to compare: Webstudio vs Webflow vs Framer. John from @gocreatetoday took the time to go as deep as possible and compare the three. webstudio.is/blog/webstudio-… Let us know what you think! Do you agree? Disagree? Don't care? Surprised? We want to know!

The Marketplace is expanding, so we’ve moved integration templates to their own tab. We offer templates for: @NotionHQ @WordPress @airtable @Ghost @HyvorBlogs @hygraph Users can still integrate with any platform without a template. What should we add next?