Transcript
Use with ChatGPT / Claude Auto-scroll A
The hosts introduce the event and frame the conversation around the future of web creation. Avishi explains how AI is changing the role of web professionals and why agencies will still play a major part.
Hi everyone and thanks for being here today with us.It's been a while since we had our last event and we are excited to be here and talk about the future of web creation.Joining me today is our CEO and co-founder Avishi.
Thank you for being here today and thank you for joining us on this exciting event, an exciting moment.
It's really important for us to have you here today and I know for our partners as well.I know it was also important for you to be here today and share with us why
I've been building wigs for the last 20 years and and during this time pretty much from day one right agencies become uh a big part of our business and uh over the years I met hundreds and became friendswith with quite a few and and we're here today to tell about a new offering for agencies for partners right they became our partners and and it was important for me to be here so everybody can see howcommitted Wix is all building fantastic tools for agencies so yes being here today means a lot
so I'm going to use this opportunity to ask you one of the most asked questions in the community and in general.A lot of our work is is changing new AI tools that are emerging.There is a new era.How do you think that this is affecting the role of web professionals?
It's a really good question, right?And AI is changing everything and nobody knows the future.I think there always going to be room for agencies and there always going to be this age that agencies bring.But I think there's another transformation that is even more important.If you look at a business today, then traditionally you would have about I would say 10 to 20% of of businesses could be maintained and managed with computers today.website being a big part of it.However, when we look in three years, in five years, I think this is moving to be 80 90% of business can be operated and which which actually translate to the fact that you're going to end up having morevalue and when you have more value and being driven from for a business then I think that the total financial value generated out of it will be even bigger.
Yes, it's require agencies to evolve but I think we're going to see that agencies are moving to really building the whole operation of a business and I think that will drive a lot more value for the businesses andbecause of that a lot more opportunities for the agency
for the partners if I'm a professional sitting hearing you I think that it's very inspiring because what you're really saying is that all of these tools are going to empower our professional web creators
it is one of the main driver things you can do with studio Yes.
Avishi introduces Studio 2.0 and its rebuilt visual editor, open React-based workflow, and extensibility with custom components. He explains why agencies should choose it, highlighting security, handover, and integrated business tools.
Do you want to tell us more about studio 2.0?
So I I think you know there are many things that I'm very that we change in studio 2 but maybe the obvious one right is that we completely rebuild the visual editing and and I think in my mindit's by far the best visual editor out there at least by far the best one we ever built at Wix.And it goes in many directions.So you don't have to learn complicated layouts to deliver your studio sites.But if you want to go deep, we give you all this extra functionality, all the full control of course, all of responsiveness and uh and break points and and different kind of layouts.Exactly the same document with w weeks harmony and w studio.So if a customer built a harmony website and said can you help me fix it again make it better you can just open it in w studio work in it save it again and the customer can open its
harmony.There's no migration.It's a fully open system.You can build a website outside of Wix.If you build it in React with the right subset of React, you can just bring it into Wix and you can fully edit it in Wix.You can do also do the other way around.You can export it outside of Wix back to React, run it on your local machine or run it on the server.So, it's fully open and and that's one side of it.Another side of it is that you can build any component that you want and put it inside of your Wix website.Right?So you let's say you need some kind of calendar or some functionality or a gallery or a workflow you can do it and those components can talk to them.They can talk to the W system between themsel which makes it that you can pretty much extend the functionality to pretty much deliver any website that you want.
So there are no limits and I want to say thank you for everybody who help us from the agency side to actually understand what we should be doing
and it was worth the waiting.
We're going to know soon.Okay, we're seeing a lot of people creating amazing things with other tools.Why should they choose Studio 2?
Well, I think that there's a quite a few reasons, but maybe we start with something that is a hot topic just from recently, right?Security, right?We've seen a PHP vulnerability making pretty much every WordPress site because build on PHP, right, be open to anybody who want to take all the data, access everything, not just WordPress, right?And security is one of the things we've been doing very well traditionally at Wix and we because we invest so much into that reliability website built on Wix app almost all the time that says almost never done thebut those are two technical reasons right there's something more I think that you can do a client handover how do you give it to a customer that he can do things on himself by himself right he can promptand destroy everything another important part is all the business application business utilization And so we have e-commerce and we have the the scheduling and the booking and the events they're all built.
So I think there's tremendous value in that integration, tremendous value in the UI, tremendous value in the handover and of course in the fact that you don't have to maintain it.
The demo shows how to convert an old site into React, bring it into Studio, and make broad changes with Arya and the editor. It also covers adding custom components, animations, and reusable controls for professional workflows.
We're getting to the really interesting part which is you demonstrating and inspiring us with a few of the things that you can do with studio.
So I was actually thinking a lot about how to do it.Okay.I want to address one of the cases that I think is happening a lot because it happened to me a lot right and and it start with somebody come and said well you know I have this old websiteand I want to make it new or I have designed this thing in in in Photoshop I designed this in Figma how do I bring it in two weeks first of all this is the website right so thisis what I ended up building with with studio okay pretty cool right you see those I love those 3D things and but I think the interesting question is not that we built it right And uh especially because I'mnot that much of a designer, it's probably more interesting is how we got here.So let me start by showing the original website.
Right?So here you can see this is an old style architect website and and now we want to convert this into Wix and make it into a very modern website.So the first thing to do is take the files and see the files and tell Claude to convert them into React.So, we just prompt that.And it takes a bit because it converts all the files and everything.And we're finished, right?And now it's inside of Wix.So, we can open it now inside of studio.Well, you have it in Wix, right?Now, you can edit it.You can just drag and drop and you can move and you can do everything that you do with Wix.I want to focus on on the first part, right?Is how do I work with Arya to make global changes on the website.So, let me show you.
You just tell Arya, you just ask it.You do those ask you to change your viable change fonts and all of the thing magically change.
Can you also do it without area?
Yeah, of course.Of course, of I'm less of a designer, so it's easier like that.But you can also just go directly to the menu and do it yourself and and so yes, absolutely.
Okay, so up until now it looks fairly easy.
Yes,
show us more things.
We have this crazy design tool called brick, right?Which allow you to build those very complicated components.So let's go for a minute to break.Okay, outside of wigs, you can do them anywhere.It's a design tools for designers and and now we're building something that fits our website.We can take this new component and put it inside of our website.This is how you do it and this is what you get.Right.And that's pretty cool.
Yeah.
Right.Pretty cool.Looks great.Now I would never be able to build it by myself.Then the next part of course is that animation.Animation is where you bring this really cool stuff to your website.Right.You have the standard way of setting everything yourself and controlling.So if you are more if you like to do that you can but you can also just prompt and this is where I prompt it's a product called animate and it's just prompt anything you want and most ofthe time it turns out to do it really well.
So basically if I'm trying to build the horizontal scroll this is something that we have tutorials about and a lot of partners have been trying to do.They can just prompt it with animate and it will work for them.
Yes, you don't need the 21 steps anymore.It's just prompt, but you can do so much more than that, right?Yes, absolutely.
Super cool.
So, essentially, right when now we have this really cool website
and up until now, how long it took me?
Uh, well, in real time, I think between one to two hours
and before studio 2, how how long did you think?
I just copying the content would take me a few hours and then designing it would take me way more.So, that would be a few days.But I think the next part is something that I love.Okay.So what I'm going to do now is I'm going to go to Google Cloud and tell it that I want to create this Freddy component to present architecture projects.Okay, again it doesn't have to be cloud and we're just doing the demo.It can be anything you want.Now we need to take this component and bring it into Wix.And this is how you do it.It's that simple, right?You just do that and then I have this component running inside of the website and you just edit something to Wix that didn't exist before.
And that's true for every React component, right?pretty much anything you want to do, you can do.
So every feature that our partner used to miss,
now they can just code it themselves.
Yes.And even more than that, right?Unlike most of the time you build something with code, if you want to change it, you have to go back to prompting here.No, here because the way we told the skill to work, it build you those properties.So you can actually go and change things.You see, so I can control different things and and as if it was a native Wix component, right?So in many ways it's an upgraded version of what I would normally get because I can control and change anything I want.I I think this this is just huge.
The presenters show how Studio 2 connects to AI and business systems to generate landing pages and handle real customer interactions. A live phone-call booking demo illustrates how the site can respond to business activity in real time.
Now the next part is how do we make it alive?How do we start connecting the business activity?So let's start with something simple.This time instead of cloud I'm going to use symfony okay which is a product for an AI team to help you manage your business.And I'm going to ask it, hey Symphony.So I build this new website and can you do please for me a marketing analysis and add the and marketing performance and add relevant landing pages for my website.Okay.So now it's working of course but it's going to take a bit of course running it faster.Here we can you can see that the landing page has been added.Okay.And we just have to publish and boom we have it live and uh and and and we just built new landing pages.But it doesn't stop there, right?
It's it's an old ecosystem.Once the site is connected to Symfony, you can tell Symfony to do different things.It can tell it to think about new opportunities, to add new pages, answer FAQs, update things.It can do all of that.But I like that one of the thing that I really like is that we can tell Symfony to connect to the contact page and to connect to the booking system and to essentially allow our customers, right, to haveAI answer the call phone calls, right, or schedule with customers.So, why don't you try it?Call the website and let's see what happens.Okay.
Okay.All right.It should work.
Let's see.Okay, I'm calling.Let's see if it's working.Hi.
Hi.Thank you for calling Vera.How can I help you today?
Hi, I just saw your new website which looks really, really good and I wanted to know if I can set a consultation call.
Of course.What day works best for you?
H next Wednesday.
And what time would work best for you?
Around the morning time, 10:00 a.m.
Of course.Scheduled.
Thank you.That's super cool.I'll be shy.So that really takes us to the vision of where we want to be and where we are already and we are in our at our last question and I want to ask you if there is one thing thatyou want our partners to take out of this conversation what should it be
if there's one thing I think that is my personal advice for everybody is that the world is changing and change is always scary but I think the opportunities on the other side of it are much bigger and andif there's one thing that I want you to remember from today is that you need to change you will have to change and we'll be there to support you as much as we can for that process.We really believe that the agencies are our partners in success of Wix and and that we've been working together for 20 years and we intend to do that for 20 years more.
So thank you Abisha.I think this is a great statement to end our conversation with and it's time to see the editor in action.
I agree.A lot of really really amazing demos are coming.Hey guys, thank you so much.I appreciate it and it's an honor to be here and I hope you're going to enjoy what's coming next.
Gi introduces the new Studio 2 creation flow, including prompts, skills, and plan mode for generating a site from a brief. The demo shows Arya producing a complete outdoor adventure site with multiple homepage options and supporting pages.
Hi everyone, I'm Gi, head of Wix Studio.Avvici just shared why we built Studio 2 and how rebuilding it on a React-based infrastructure makes it truly open platform.Whether you're bringing in any React component using any AI tool or building your own custom workflow, Studio 2 expands how you work and what you can offer.You can move freely between tools and bring your work into Studio 2 for deeper visual editing without the extra token spent.That makes it a go-to professional editor for AI output from anywhere.But we didn't want Studio 2 to just be open.We wanted it to be an editor you love working on.It's AI native with a deep visual editing so you can flow between natural language generation, true drag and drop, visual precision, motion editing, and full React CSS code environment.You're about to see all of it today.
I'll start by walking you through three of the many ways you can kick off your creation process.First, generating a site with Studio 2.I'm happy to introduce our new site creation flow.We know every professional has different workflows and their own way to kick off the building process.Sometimes I already know exactly what I want to build, but other times I'm starting with nothing more than an idea.Studio 2 supports it all.I can start from a blank canvas, choose a template, or generate a fully designed functional site, starting with a prompt with Arya 2.0, the improved generation of Wix's Agentic AI.I want to focus on generating a site using Arya.I'll start by describing what I have in mind for this demo.I want to create a site for an outdoor adventure and hiking brand.and I can add the tone and style and main features I want in it.
Usually, when building a client site, you already have a lot of information about the brand and the product.I can add it during this stage, so it will help shape a more precise site.It can be product images or design assets like images, color preferences, or a full brand book.I can also add any visual reference, including a link to a site I like to influence the desired output and keep it on brand from the first iteration.As professionals, you've built valuable expertise over the years.Skills allows you to capture it and reuse instructions for Arya.That way, Arya can follow your standards and workflows across projects without you having to explain them each time.You can create a skill at the brief stage to guide how your site is generated.But you can also create one within the editor as you work on the site.
But before I generate anything, sometimes I want to think through the project for a more precise output.What's important to this business?Who's the audience?What experience do I want visitors to have?That's what plan mode is for.Here we define the goal of the site, the business, the client's brand and visual direction, the pages I need and the functionality I want to include.And Arya makes it happen.It asks guiding question and builds a plan from my answers.It starts with the business asking about what makes it unique and what is its goals.Then it fills out the brand from the visuals and guidelines I uploaded and I can tweak anything I want.Next is the structure.I choose which business solutions I need.And Arya suggests a structure to match, adding the relevant pages and sections.I can also see all the assets and visual references I added in my initial prompt and add more from here if I need to.
And now that the brief is ready, let's start generating.While it's generating, I want to talk about Arya.In Studio 2, we're using a new model, Arya 2.0, which is a smart model with improved memory that enables handling complex prompts and bulk actions using natural language.It can help me generate ideas, add custom code, or take care of repetitive work like changing fonts for the entire site with one simple prompt.I can work with Arya whenever I want, or I can close a panel and work how I'm used to.That's really the point.I can move between AI and direct editing whenever it makes sense for me while keeping control over the results.We can see that Arya created three different homepage designs and I can pick the one that I want to kickstart with.I could keep iterating from here, but I like this direction.
So, let's go with it.
The team demonstrates importing a site from Claude and the Wix MCP, then editing it inside Studio 2. They also show how Figma designs and existing Harmony sites can be moved into the new environment.
Well, this is the site that was generated.We can see the prominent hero fold and the business solutions added stores, bookings and Arya has also added animations and effects to the site which looks great.And you can also see that a whole site was generated with all the relevant pages and not just the homepage.This is actually a big moment because you can finally see our new Studio 2 editor.We're really excited to show you everything that has changed in the editor, but bear with us for a bit longer before we'll walk you through it.Another way you can start the creation process is using our new import and export capabilities.I'm really excited about this one.It's a huge breakthrough.There are many ways and workflows that it supports.Let me share a few.Let's say I have a client that has a Scandinavian furniture brand.
We've had multiple meetings, many back and forth emailing, and they've shared many assets and files.Now, I want to kick off the actual creation of the client site.I'm going to open Claude and connect it to the Wix MCP.It includes the Studio 2 skills, which allows me to create, edit, and import a Studio 2 site.In order to keep track of all the communication and documentation with my client, I have a folder that updates automatically on Claude.I'm going to leverage all of that and ask it to create a website for me.While it's generating, it does all the work behind the scenes.It gathers the client's references, including their brand, project details, and visual assets.Then it creates a Studio 2 site and builds it section by section with the client's media, fonts, and colors.Along the way, it checks its own work against the references and fixes anything that doesn't match.
Then it imports everything into Studio 2 exactly as generated.Now I got a link to see the fully functional site.I can view it in the preview link or directly inside the editor.And now we can put in effect all the capabilities of the editor.I can drag and drop all the components, resize, relayout.Everything is connected to the side styles which you can find here.And of course, it's fully responsive and I can add and connect any business solution I need.As we know, there is a back and forth process when working with the client, and getting feedback is part of it.Since Claude is connected to our environment, I can instruct my agent to take the feedback, implement the changes, and reimpport the project file again.For example, I can ask it to add a sustainability page covering material sources, makers, and the brand's environmental commitments.
Claude studies the site's design, builds a matching sustainability page, and adds it to the menu.The new page then appears on the site.
In another case, when starting the design process on Figma, using Figma's MCP, you can easily bring in your static design to Studio 2 with our new streamline.
Another powerful example is that you can export in order to work on your preferred code environment and import it back whenever you're ready to work on the design and add business solutions or if you have an enterprise clientthat requires you to host it on their infra.But it's not just about external tools.We've seen countless DIY potential clients that started on Harmony and understood they want a professional to take over.So now that our infrastructure is shared, you can just take a Harmony site and open it on Studio 2.Here's how it works.I have a Wix Harmony site open.I'm going to site actions and I'm going to select create a version on Studio 2.This moves your Harmony site design and data to Studio 2.while the original harmony site stays live until you publish the studio version.
The editor tour covers the new layout, panels, responsive controls, and canvas workflow. The presenters then demonstrate AI-assisted section editing, smart image changes, motion presets, and the new Animate and Brick integrations.
Okay, the next part of the demo will be focused on the new editor capabilities and near head of the studio product team will take it from here.Hi everyone, I want to jump back to the first site we generated with area 2.0 and finally show you around the brand new studio 2 editor.So this is the site we generated.But let me give you a quick tour of the editor before we start designing.If you know the studio editor, you'll notice studio 2 is much cleaner, but the capabilities you know and love are still there.First, we have a new site overview panel with everything related to your site like SEO, accessibility, domain management, and brand settings.This toggle opens the browserbased Visual Studio Code environment where all my code is always visible and editable.Here I can switch between my breakpoints.As you can see the mobile version is automatically organized.
By default we start with two break points but you can always add as many breakpoints as you want and manage all the sitewide responsive behaviors.On the left, we have the ad panel with all the Wix elements I can bring onto the canvas from buttons to repeaters and yes, even a repeater inside a repeater.Of course, you can add design sections and we've also added this new option to add pages.There's also one place to manage the business solutions connected to the site.The site styles panel allows you to view and manage your design system, not only for colors and textiles, but also for buttons, lines, and containers.I can style each element for different states.And changes I make apply all across the site.And from here, I review and edit the structure of the entire site, layers, pages, and global sections.When I select an element or component on the canvas, the action bar surfaces the most used properties automatically, so they're always easy to reach.
If I need more depth, I can open the inspector panel on the right for all the advanced design capabilities, motion, and further settings.We also built Studio 2 on a dynamic canvas, so you can move around it, zoom in and out for focus work and easy drag and drop.And coming soon, you'll be able to use this space around the canvas to iterate on your designs and bring in references.Okay, so we have a strong starting point created for us.Now, let's make it ours.I'm going to start with a hero fold.I like what we got, but I want to push it in a different direction, and I'll use area to help me make that happen.I want to change the layout and make it more editorial and fashion forward.I'm thinking about a two column layout highlighting two categories.Of course, the more precise I am, the better the outcome.
Now, while area works on the section, I can continue my work in parallel.I think we're missing an about us section.So, let's add it right here after the categories.I'm going to choose this one.Now, I'll change it a bit.Remove what I don't need, like this button.Add a background image.and change the text color.We know you love working on the canvas, so we've added so many new experiences.Let me show you a few.With a draw component tool, I can use this panel to quickly add the top used elements.Or even better, we have shortcuts.Just press S on the keyboard to place the shape right there on the canvas at the exact size.Let's replace it with a relevant icon.Okay, I have text for this section.Now that I see it in the design, it looks a little too long.
So, I want to shorten it.That's where AI actions would come in handy.You just click shorten text and it's done right away on the canvas.Cool.And if you want to quickly adjust the spacing in this section, I can use this handle, which you might recognize from the Wix editor.Just drag it up or down and all the elements below it move along with it.Looks good.Okay, back to the hero section with what area generated.Nice.I like it.But I want to make some adjustments.I want to change the background of this image.For that, I'll use smart edits which are readymade AI actions.There are a lot of cool options here.This is what I need.I can choose from the suggested backgrounds or describe what I want.Exactly what I had in mind.Another thing I want to update is this button.
I'll just switch it from primary to secondary using my saved button styles.Now, no site is complete without some motion.Studio 2 offers a range of animations and effects from readymade presets to custom effects.And like we saw, when Arya generates a site, it adds those animations and I can customize them in the motion panel to fit my needs.
But sometimes I want to go bolder and transform an entire section.Complex, unique experiences like that usually take a lot of time, precision, and often code.That's exactly what this new feature is for.Meet Animate, your motion agent.It's a creative mode that lets you build complex section level motion experiences with AI.Once I select a section, I'll open animate and choose a style or a visual reference.The effects I get are tailored to my section based on its content.I can also describe something I have in mind.Uh, for example, here I want to create a globe like feeling for this gallery.Let's run it.Animate reads your section structure, content, and design.Then transform your layout into a complete motion experience, combining dynamic composition, complex motion, and interactions.It's ready.It looks great.I can fine-tune it by prompting animate to make further changes or with these dedicated controls designed specifically for this section.
I'll make the photos just a little smaller and make the halo effect a bit stronger.Perfect.In the editor, I'll see the section without the animation so I can keep editing my content as usual.And all motion experiences are accessible and automatically responsive.But it doesn't stop here.Studio 2 opens up even more ways to get creative with motion.You might already know Brick, a Wix created platform that lets designers create motion design tools and high-end interactive experiences using AI or code.The new brick integration allows me to embed any brick component directly into my Studio 2 site as a native component.There's a library to choose from or I can generate my own brick component.I'll bring it into the site from here.The process of building it takes a little time.So, I've sped up this part.I can also control its behavior and parameters directly from the editor's auto panels.
Let's set the image scale ratio and increase the hover offset and see the result in preview.
Jonathan explains how Studio 2 connects components to data and business logic with more flexibility than before. The demo shows customizing store and booking widgets, building a blog section, creating a custom magnifying-glass component, and editing its code directly.
Super cool.Okay, this next part is a game changer.I'll pass it on to Jonathan to tell you all about it.Hi everyone.In Studio 2, the components were built from scratch as standard React components, which allows for a coherent unified creation experience.But the revolution doesn't end here.We also built from the ground up the way you connect components to their logic or data.You have the full flexibility to visually create whatever you want and add layers of data or behavior.And you do it in the same way whether you're connecting it to code, a data collection, or one of the native business solutions.This allows AI models to work with a binding model directly, which means AR can design a business solutions front end, generate or modify the logic and code, and automatically bind anything new it creates.So what does it actually mean?
In Studio 2, for example, business solutions aren't locked to fix slots anymore.You can customize them freely as any native element using the same tools and panels as other elements on canvas.You can use parts of the visual components or logic and mix and match between the business solutions.You can redesign their widgets or build one from scratch placing Wix components and connecting them to any business solutions.Let's look at this store section showcasing the new collection category that Arya generated.You can see that it has a pink outline and binding indication, which means that this entire section and the elements with are connected to the store's data.So, I have full freedom to change the design, to move things around, or even replace elements while still keeping them connected to the data.Of course, this also affects the product page itself.Until now, customizing a business widget was limited, but in Studio 2, it's not a closed component anymore.
I can really play around with it.See how I can just move things around here.I can put the image in the middle and change the additional images to a horizontal layout.I want to add a background image to bring in that nature feeling and really make the product pop.I can also easily add custom CSS to it using AI.I can describe what I want in my own words and the code is created for me and applied directly to the element.So here I asked it to add a breathing dots effect to the background image.Perfect.But I don't just want this page to look good.I want the experience to respond to what's actually happening in the business.For example, I can encourage sales by creating a small banner indicating that a product is selling fast, but I want it to apply only to products on sale.
So I can ask Arya to connect this banner and display it based on my logic.AR is connecting to the data source while also creating a visibility condition which we can see here in the settings panel.Let's check it out.So we have this item with a banner and this one without as we intended.I can also reuse the same banner in other places.For example, the booking section.Once it's in place, I can connect it to the service list and set up the relevant logic.We've seen how Arya can do this, but I can also set it up manually.I'll change the source to booking service item and use the availability field to show the banner only when the service is fully booked.Then I'll just update the text
and that's it.Easy.Now in those examples we had a starting point provided for us by the business solutions but I can also build from scratch with any other Wix component.Let's give it a try with the Wix gallery.For example, I want to create a blog section.There are many new Wix gallery presets that look super nice.I like this one.It fits the brand's editorial vibe.I can play around with it, change the thumbnails design, and choose which elements to display.All I have to do is connect it to my blog collection from the settings panel.
Now let's see how it looks.
Amazing.
Now I want to show you how you can create a specific custom experience exactly the way you want.We have this fold that focuses on the materials and the main features of the product.I want to make it interactive and show a deeper look at the product's materials.I have something in mind, but let's clean this up first.So, I want a magnifying glass experience, a lens that follows your cursor, zooms into the material, and surfaces the relevant feature as you go.Let's see what Arya builds.Arya uses native components and elements where possible.When a custom component is needed, it can generate one from scratch, including its UI and underlying logic.It also automatically generates panels for controlling the components behavior, just like it was created here.Very nice.So a magnifying component was created and added to the stage and its code was added to the code tab.
Unlike Harmony Studio 2 is not a blackbox.In the code tab, we can preview all the code that was added behind the scenes by Arya.Before we look at the code, let's take a quick tour of the development environment.A Visual Studio Code environment is integrated into the editor with standard React code and built-in code generation.As a developer, you can inspect, edit, and extend the site's code.Now, back to our example.Let's say I want to make another change to my newly created component.For example, when the additional text is revealed, I want the title to also be highlighted.So, I can ask Arya to do that for me.But since it's a small change, I'm going to do it myself.I'm going back to the code to add a CSS marker effect.Arya named the titles as annotation label.So, I'm putting the CSS code to this specific class name.
Let's go back to the design tab and have another look at our section.We can see that when I'm hovering over this part, the title is highlighted and the text is revealed.Nice.So, in Studio 2, you no longer have to be a developer to add a custom component or custom logic to your site.You can simply do it with Arya.
The final section focuses on mobile responsiveness, typography controls, and the completed design. The event closes with a summary of Studio 2's promise and an invitation for feedback from the community.
And if you're a developer, you can get professional tools and full control over your code.So, the site is almost ready, but what about mobile?Studio 2 automatically adapts the design for mobile while keeping the layout responsive across screen sizes.And every element added to the desktop will automatically be adjusted for mobile.The autovertical spacing feature keeps the spacing consistent between components as you build, keeping the composition intact and letting you focus on the design.And of course, you can also control everything manually using stacks and CSS grid.And the new responsive settings panel lets you manage site level responsive decisions including break points, max width, and automo preferences.You can also disable automo per section or per side for precise control.So I get a responsive starting point automatically with the freedom to refine it myself.Now I can also define typography per screen size from the side styles panel.
For example, let's take heading two.We've added the sizes feature in which you can set the global font size, the minmax, and spacing per breakpoint range.These size variants mirror the break points you have in your website.So for this heading, the mobile is set to 28 pixels.I can change it to 32 and it changes globally.So any other text connected to heading 2 will update automatically without any overrides.Everything stays connected always.Studio 2 has plenty more features and design tools.We used a few to add motion and finishing touches to the site.We can't cover it all today, but let's take a look at the final design.
So that's a look at studio 2.We started with an idea, planned the site, generated a starting point, and then made it our own.We used AI to move faster, but stayed in control of the design.We worked freely on the canvas, connected our design to real business data and logic, created custom components, and even worked directly in code.That's the power of Studio 2.Professionals shouldn't have to choose between speed, control, and working in their preferred environment.Studio 2 brings all of those ways of working together in one place.So whether you start in another AI tool, your own IDE, or with a prompt right in Studio 2, you'll have full control over every project from first prompt to final pixel.We can't wait to see what you build.Thank you so much.Over to you, Noah.
Thank you guys for showing the product and sharing the vision behind where we're headed.I hope today gave you a clearer picture of what Studio 2 is all about and more importantly where we're going together.Studio 2 will roll out gradually over the coming weeks.As you start to get access and begin exploring, we want to hear from you.So, bring us your questions, share your feedback, and tell us what you're most excited about.And if you've got ideas for features or capabilities you'd love to see in the future, keep sharing those, too.Every piece of feedback will be reviewed with the product team.So what you share can help shape what comes next.The community has always played an important role in making Wix better and Studio 2 is no exception.Join us in the Studio Discord where it all happens.Post your feedback and swap tips with other professionals.
We'll also be there with updates, new capabilities, and upcoming community events where you can hear directly from the teams behind Studio 2.Today isn't the end of the conversation.It's the very beginning.We can't wait to hear your feedback and even more, we can't wait to see what you build.Thanks for joining us today.