Consider this: a new web page is being previewed inside Wind Surf. Now, I’m going to use its new feature, the “select element,” to start requesting changes. You can note that at the bottom, the element was selected and added to Cascade.
Changing Element Styles
I want to change the color of this element to white so it offers better contrast. Let’s ask it to do that.
Now, it’s generating and implementing the edits. It correctly identified that we were pointing to the text in the hero component, so we didn’t have to specify anything; it just understood what needed to be done. We accurately told it which element was faulty and needed to be changed. In my opinion, this is one of the biggest advantages.
Let’s go ahead and restart the development server. The text color was successfully changed.
As I was saying, this is one of the best ways to make a front end with AI because now, instead of manually providing instructions for every change, you can simply point to the element that needs modification, and it will take care of the rest. It’s pretty cool and speeds up development significantly.
Adding Animations and Popups
Now, let’s try another example. This time, I’ll select the entire testimonial section and ask it to add animations to the cards. It’s now implementing those animations, and this is another reason why Wind Surf is now superior to other editors. It’s becoming the go-to choice for front-end developers because this feature is incredibly powerful. We did run into some errors, but Wind Surf is fixing them by itself.
The animations have now been added, so let’s go ahead and accept the changes. The animations are fully functional and look really smooth. This is a super quick way to implement front-end features as efficiently and quickly as possible.
Now, let’s add a popup to the “get started” button. Let’s go ahead and do that.
Previously, whenever I created front ends using other tools, if an error occurred, I had to take a screenshot and let the tool guess which element needed fixing. For example, if the color of a single text element was off, I had to go through the entire process again, which was extremely frustrating. But now, with this feature, building and iterating on front ends is much, much faster.
It has now applied the popup, so let’s accept the edits and restart the server. The popup was successfully implemented.
Other Major Updates
In addition to the feature I just described, Wind Surf has also introduced several other powerful updates.
- Unlimited Deep Seek V3: You won’t consume any credits when using Deep Seek V3 with it.
- New Flagship Models: The latest flagship models, Claude 3.7 with its thinking mode and GPT-4.5, are now available, bringing the best from both Anthropic and OpenAI.
- Previews Feature: The preview functionality which was just demonstrated.
- Tab to Import: Initially, they had autocomplete, which simply inserted standard text. Then they introduced super complete, which made full edits. In the last update, they added tab to jump, allowing you to quickly navigate and edit different parts of your code. Now, they’ve taken it a step further with “tab to import,” which automatically adds necessary imports to your files while you write. For example, if you use a dependency, it will be automatically imported; no need to manually add it.
- Built-in Linter Integration: Cascade now has built-in linter integration. Previously, if there were any linter errors, you had to manually ask Cascade to fix them. This feature makes editing even smoother.
- Suggested Actions: Cascade is a flow-state editor, meaning the agent collaborates with you, remembers your workflow, and makes intelligent suggestions based on what you’re doing. If you request a specific change, it will proactively suggest related improvements, making your coding experience even more efficient.
- Built-in MCP Documentation: Since MCPs are at an all-time high in popularity given their incredible functionality, Wind Surf now provides built-in documentation for them, making it easier than ever to integrate them into your workflow.
- Drag and Drop File Support: In Cascade, instead of manually referencing files, you can now simply drag and drop them directly into the editor, saving time and effort.
- Admin Control for Models: Lastly, admin control for models has also been introduced.
These are the latest updates to the Wind Surf code editor. The preview and select-to-edit features are game-changers, allowing you to build front ends incredibly quickly. With these new additions, iterating on your designs is now easier than ever.