If you're a fan of the Cursor Composer's new agent mode like I am, where you can chat without first specifying some files for context and it can automatically generate and run shell commands for you, then you've got Windsurf’s Cascade to thank (they did it first).

Cursor's new agent mode that can generate code across multiple files, run commands, and automatically figure out what context it needs (no need to manually add files explicitly).

Windsurf generally has a cleaner UI compared to Cursor's. It feels like comparing an Apple product to a Microsoft one — those little details really make Windsurf feel more refined.

Windsurf's Cascade feature — the original AI IDE agent that can automatically fill context, run commands, etc.

And, Windsurf is cheaper. While it starts at $15/seat, compared to Cursor's $20/seat, I'll say the pricing isn’t as clear cut as Cursor’s.

Things like "model flow action credits" — whatever the heck that means — are part of the pricing model. So, hopefully you won't run out of those. Fortunately, I didn't.

Overall, it seems worth diving in to compare these products in more depth.

Standard features

Both IDEs support the standard features you'd expect, like:

• AI-driven auto-completions
• Chatting with your codebase
• Generating and updating multiple files at a time
• Inline editing of code with AI

They’re both Claude

Both IDEs effectively have the same brain, as they're using Claude 3.5 Sonnet under the hood for the hard stuff.

I've noticed that functionally, I don't see a major difference in the quality of code generations or updates by either of these IDEs.

And I don't expect to — these are really just UIs on top of standard models.

When people try to compare and say "this code generated better than that one," it's my belief that they're mostly comparing the randomness of Claude outputs.

Both use smaller models for smaller edits and inline completions, but I similarly didn't find a major difference in the quality of one small model versus another.

Windsurf: simple and beginner-friendly

Windsurf really seems to push to be a very simple, easy-to-use product that's beginner-friendly and pushes for high-level, simple interactions with your code:

• The default chat mode is the Agentic mode.
• It indexes and pulls relevant code as needed.
• It will run commands for you.
• It won't clutter the UIs with buttons and code diffs everywhere.
• You need to click the Open Diff button to see it in the full code pane.

This creates for a much better it-just-works experience. There aren't 100 features to learn with lots of different modes and tabs and options and sub options.

Just hop in, start writing what you want changed, and it'll change. It's easy, the UI is clean, and just overall feels really nice.

Cursor: More manual, more control

Cursor leans towards more manual control:

• The Composer mode always defaults to normal (not agentic).
• You need to choose what files you want to put in the context for it to generate.
• It always shows you inline code diffs.
• It seems to push the point that you should always be reviewing this code closely every time.

In general, Cursor feels like more of a power tool with more precise control and handling.

There is a steeper learning curve, and I find many people don't even know about Cursor's best features (unlike Windsurf), but once you learn it, you have every tool you need and more.

Windsurf keeps you better in the flow

One thing that Windsurf does by default that I really like is the AI generations are written to disk before you approve them.

That means you'll see the results right inside your dev server in real time. You can use that to also see if the generated UI is what you want, if the new code creates build errors, and so on —before accepting them.

If the updates still aren't quite right, you can chat again to continue to modify before you accept the changes entirely. And if you don't love the changes, even after some iteration, you can revert to a previous step or even discard everything in one go.

Compare that to Cursor — you need to accept changes before you can actually get the results. Sometimes that means you make changes that end up looking horrible.

Reverting them isn’t as easy, either. I need to figure out where a chat started (which sometimes could be midway through a long thread and hard to find), then manually revert to that prior state and time.

Cursor is deep with power features

Where Cursor really shines is in a lot of its power features. For instance, Cursor supports multi-tabbing.

If it detects that you made a change that would benefit from another change later in the code, you can just hit tab and tab again to keep applying those new changes.

I find this very cool when it works, but it can be kind of clunky and confusing when the changes don’t apply in the right spots.

Cursor generally takes a “kitchen sink” approach to AI in the IDE. Everything has an AI button:

• See an error? There's a Fix with AI button.
• Dropdown options? There's a Fix with AI button.
• Error in the terminal? There's a Debug with AI button.
• And so on...

Clicking these generally opens the chat so you can go back and forth with the AI to fix the issue.

I find these “kitchen sink” features useful, but they add clutter to the UI. For instance, I've had cases where these overlays are annoying and in the way, and I can't dismiss them when I need to.

Having an AI in the terminal that's a keyboard shortcut away at any point is really helpful if you're like me and like to focus more on what your code needs, rather than remembering exact command names or arguments.

One thing that annoys me, though, is how Cursor has specifically hijacked Command+K for this, which means I can't use it to clear the terminal. It doesn’t seem like there’s a way to override that or turn it off.

Both IDEs let you specify custom rules to inform their completions, but Cursor's support is a bit more robust and flexible. It includes the ability to have Notepads you can search for and include in your context as needed.

Generally speaking, Cursor is way more robust at context management. Both IDEs let you tag certain files you want to include in the context, but Cursor lets you add:

• Whole doc sets
• Specific pages from the web
• Specific git branches and commits
• Tagging @web to do a web search

 One other really cool feature of Cursor is automatically generated commit messages with one click.

Even better, it respects your .cursorrules file. I found the default output to be more verbose than I like, so I added a note in my .cursorrules to keep commit messages shorter and voilà, perfect.

Another cool experimental feature of Cursor is the new bug finder.

After looking past an aggressive error message and clicking a button that has its own usage-based pricing (so may cost a dollar or a few just for the click) it'll scan through all the code changes on your feature branch versus main and look for potential bugs in your updates.

It's found some really useful bugs and saved me time having to find and fix them. For each bug it finds, it gives a confidence rating as well as an overview.

When you choose to fix it in Composer, it will fill the details into the prompt and generate updates like you're used to.

What's missing from both

The main thing I wish both products had was a more robust debugging loop. Something like what Devin promises (and sometimes can achieve), but right here in the IDE.

Both Windsurf and Cursor claim they have agents, but I am not sure if what they offer are truly agents.

I'm used to the idea of an agent being something that can try something, evaluate it, and repeat until it verifies that the result is correct. Which neither of them actually do. They only generate code, and if you've got bugs, it's your responsibility to go in and fix them.

Fortunately though, unlike the Zed editor, Windsurf and Cursor are forks of VS Code. This means you have access to the massive VS Code extension marketplace.

One extension available is Cline, which works great with either of these IDEs. Cline is more of an agent than Cursor or Windsurf have as it can take a series of steps, evaluate the result, fix its own issues, and continue.

Cline is surprisingly smart in some cases, like being able to run commands to validate its own correctness, open a browser to inspect what your dev server rendered, and so on. It's not perfect, but it's a solid step in the direction that I hope both Cursor and Windsurf ultimately go with their agents.

My favorite workflow

Speaking of compatibility with other tools, let's check out how you can turn a Figma design to code through Cursor or Windsurf and use AI to bring the design to life.

All you have to do is launch the Builder.io Figma plugin, select the element or frame you want to convert, click Generate, and copy the resulting command and paste it into the Cursor or Windsurf terminal.

Builder.io will generate pixel-perfect code from the design, even reusing your existing components just like you would.

Now that you have the markup I need, you can hop into Cascade or Cursor composer and prompt them to add whatever functionality you need like data, interactivity, and business logic, to name a few.

This is the end-to-end workflow I typically use: grab the design, have the AI add the logic, auto-generate a commit message, and fire up a PR. It truly feels like magic.

So, which should you use?

Honestly, I don't think you can go wrong with either Windsurf or Cursor.

Both are fantastic IDEs that support AI-driven auto-completion, inline editing, multi-file editing, chatting with your codebase, and agentic workflows where they can read and write to multiple files based on what you ask.

While I find Windsurf to be a little simpler, a little more intuitive, and with a slightly nicer and more polished UI, Cursor is just loaded with power features.

All those buttons everywhere can add clutter, but I find it hard to let go of some of these features I just love. I love the auto generated commit messages, I love the bug finder, and I even sometimes love using the multi-tabbing (when it works).

And while I'll suffer through some glitches in the UI, for a professional development tool, it's my personal preference.

For a more beginner developer, or someone who really prefers UI polish, Windsurf is probably a better go-to. It also has a lower starting point, and if you're coming off a tool like Bolt.new, Windsurf will feel a lot more like what you're used to.

But that's just what I think. What do you think?

We've launched a State of AI Tools survey for you to share what tools you find work best for you. Fill out the survey to receive the results once ready.

PS: I made that site with Cursor + Windsurf :)

If you enjoyed this post, you might also like:

• 5 Advanced Features for Cursor
• Devin vs. Cursor
• Cursor vs. GitHub Copilot
• AI Pair Programming in 2025
• OpenAI o1 vs. Claude Sonnet

Read the full post on the Builder.io blog

But here's the thing, there's more. A lot more. Cursor has some seriously cool advanced features that most people aren't using yet. In this post, I'm going to show you five of them.

If you're new to Cursor, check out my posts on Cursor AI for developers and Cursor vs. GitHub Copilot to get up to speed.

The Cursor agent

First up is the Cursor Agent. It's like having a super-smart coding assistant that you can summon with ⌘. (Command + period). Here's what it can do:

• Pull in context automatically (try @Recommended)
• Run terminal commands.
• Create and modify files.
• Do semantic code search.
• Handle file operations.

Right now, it only works with Claude models, and each tool operation counts as a separate request in your quota.

Cursor rules

Next up is the .cursorrules file. It's a way to give Cursor project-specific instructions. Here's what you need to know:

• Put it in your project's root directory.
• It provides instructions for Cursor Chat and Ctrl/⌘ K commands.
• It's like the "Rules for AI" in Cursor's settings, but just for your project.

Here’s a sample .cursorrules file you could define in a Next.js project:

You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind CSS.
  
Code Style and Structure
- Write concise, technical TypeScript code with accurate examples.
- Use functional and declarative programming patterns; avoid classes.
- Prefer iteration and modularization over code duplication.
- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
- Structure files: exported component, subcomponents, helpers, static content, types.

Naming Conventions
- Use lowercase with dashes for directories (e.g., components/auth-wizard).
- Favor named exports for components.

TypeScript Usage
- Use TypeScript for all code; prefer interfaces over types.
- Avoid enums; use maps instead.
- Use functional components with TypeScript interfaces.

Syntax and Formatting
- Use the "function" keyword for pure functions.
- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
- Use declarative JSX.

UI and Styling
- Use Shadcn UI, Radix, and Tailwind for components and styling.
- Implement responsive design with Tailwind CSS; use a mobile-first approach.

Performance Optimization
- Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
- Wrap client components in Suspense with fallback.
- Use dynamic loading for non-critical components.
- Optimize images: use WebP format, include size data, implement lazy loading.

Key Conventions
- Use 'nuqs' for URL search parameter state management.
- Optimize Web Vitals (LCP, CLS, FID).
- Limit 'use client':
  - Favor server components and Next.js SSR.
  - Use only for Web API access in small components.
  - Avoid for data fetching or state management.

Follow Next.js docs for Data Fetching, Rendering, and Routing.

This is super useful when you want to give Cursor some context about your project's specific requirements or conventions. It's worth noting that while .cursorrules is cool, Cursor also has Notepads, which can do even more. Speaking of which...

Notepads

Notepads in Cursor are like supercharged sticky notes for your code. They bridge the gap between composers and chat interactions.

Here's what makes them special:

• You can share them between different parts of your dev environment
• Reference them using the @ syntax
• Attach files to them
• Use them as dynamic templates for various scenarios

To create a Notepad in Cursor, click the "+" in the Notepads section, give it a meaningful name, and add any necessary content, context, or files. Reference Notepads in composers or chats using the @ symbol.

Notepads are great for documenting project architecture decisions, development guidelines, reusable code templates, team-specific rules and frequently referenced materials.

When you're creating a Notepad, try to use clear headings, markdown for readability, and include examples or file attachments as needed.

Notepads are still in beta, but they're already a super flexible way to enhance your workflow.

Bug finder

Cursor's got this neat new bug finder feature. It's pretty cool, even if it comes with a slightly aggressive warning message and a pay-per-click pricing model (yeah, you might shell out a buck or more just to use it).

Here's how it works: it scans through all your code and recent changes. If you're on a feature branch, it'll compare that to main, looking for potential bugs.

For each bug it finds, you get a confidence rating and a quick overview. Then it's just a click to fix it in the editor. Cursor fills in all the details in the prompt and generates updates, just like you're used to.

It's not perfect, but it's a pretty handy tool to have in your back pocket.

@web symbol

With @Web, Cursor constructs a search query based on the query and the context you’ve provided, and searches the web to find relevant information as additional context. This is particularly useful for finding the most up-to-date information.

The @Web symbol is like having a research assistant built into Cursor. Here's how it works:

1. You give it a query and some context.
2. Cursor turns that into a web search.
3. It searches the internet for relevant info.
4. The search results get added to your query's context.

This is super useful when you're working with new tech or anything where you need the latest info.

Bonus: AI commit messages

Here's a little bonus feature: AI-generated commit messages. It might not sound like much, but it saves me a couple of minutes every day and reduces the mental load of coming up with good commit messages.

Now, Cursor does have this habit of being a bit...wordy with its commit messages. But hey, you can tweak that behavior by adding some instructions in a .cursorrules file.

Convert Figma designs to code in Cursor

Let's talk about turning Figma designs into code using Builder.io's Visual Copilot plugin. It's a game-changer when you're working in Cursor.

Here's what you can do:

1. Export your Figma design using the Visual Copilot plugin.
2. Copy the generated command from Builder.io.
3. Paste that command right into Cursor's terminal and generate the code

From there, you can tell Cursor to add interactivity, animations, event handlers and more. It'll generate all the code you need.

The result? You get a pixel-perfect UI that uses your components as expected. It's pretty slick. This whole process — from design to functional code — is way faster than doing it manually.

The best part? This workflow fits right into Cursor's other AI features. You can use the agent to add logic, make your updates and auto-generate a commit message.

Cursor AI FAQ

Here are some commonly asked questions about Cursor AI:

Does Cursor work with all programming languages?

Pretty much. It's great with the usual suspects like Python, JavaScript, and Java, but it'll work with most languages VS Code supports.

Do I need an OpenAI API key to use Cursor?

Nope. Cursor works straight out of the box. No extra setup needed.

Can Cursor handle both easy and hard coding tasks?

Absolutely! It'll help with simple functionality, but it can also tackle bigger jobs like refactoring huge codebases or writing entire functions.

Is Cursor good for beginners?

Definitely. If you're just starting out, its AI assistance can help explain concepts, suggest best practices, and help you learn as you go.

How does Cursor deal with existing code?

Pretty well, actually. It can understand and work with code you've already written. It can help you manipulate code, refactor, and even explain complex sections of your codebase

Can Cursor make a whole app from scratch?

It's not magic — it can't conjure up a full app out of thin air. But it can speed things up a lot. With the right prompts, you can go from a simple idea to basic working app pretty quick.

Will Cursor mess with my existing workflow?

Cursor is designed to seamlessly fit into your development process. It's built on top of VS Code, so if you're used to that, you'll be fine.

Can Cursor help with unit testing?

Yes, Cursor can assist in writing and improving unit tests. It can suggest test cases, help with test setup, and even identify areas of your code that might need better test coverage.

What are the pricing options for Cursor?

Cursor offers a free Hobby tier with limited features, a Pro tier at $20/month with expanded capabilities, and a Business tier at $40 per user/month for advanced features and team management.

If you enjoyed this post, you might also like:

• Devin AI vs. Cursor
• Cursor vs. GitHub Copilot
• AI Pair Programming in 2025
• Windsurf vs. Cursor
• OpenAI o1 vs. Claude Sonnet

Read the full post on the Builder.io blog

The platform consists of two main components: Builder Develop and Builder Publish. Here's a breakdown:

Builder Develop:

Builder Develop is the core of Builder's AI-powered design-to-code functionality. It offers several key features that significantly streamline the development process:

• Design to Code: Reduce Figma-to-code development time by 80%. This feature transforms design files into production-ready code, dramatically speeding up the implementation process.

• Component Mapping: Automatically reuses existing code components when available. This ensures consistency with your current codebase and reduces redundancy.

• Custom Instructions: Refine code output at the developer or team level. This allows for fine-tuning the generated code to match your specific coding standards and preferences.

• Code Sync: Quickly shifts generated code from Builder to your developers' code editor. This seamless integration helps maintain workflow efficiency.

• Enterprise-ready AI: Builder's use of customer data for AI training varies by plan type. While free plans may use customer data to train and improve AI, and self-serve paid plans offer a toggle option, Enterprise plans do not use customer data for AI training or improvement purposes. Enterprise customers also have additional controls, including the option to choose specific LLMs or turn off LLM-use entirely.

Visual Editor: A new AI-powered Visual Editor that helps you:

• Create interactive features using natural language commands
• Work with your real data, APIs, and code components
• Visually make tweaks using your design system, including colors, typography, and spacing
• Sync design changes to code while preserving custom edits
• Enable non-technical team members to make updates without constant developer intervention

Visual Copilot understands your entire tech stack, from design files to code components and business logic. This allows it to generate complex, production-ready features that align with your specific design and development standards.

These features work together to create a powerful design-to-code pipeline that respects your existing architecture and coding practices while significantly reducing development time and enabling faster iteration cycles.

Builder Publish:

Builder Publish is a system that enables non-technical team members to manage content without frequent developer intervention. It integrates a Visual Editor, headless CMS, and optimization tools into a single API-driven platform. This setup is designed to work alongside existing codebases and respect established component structures.

Builder Publish combines three key features:

• Visual Editor: A drag-and-drop interface for making content changes without touching code.

• Headless CMS: An enterprise-ready headless content management system that can handle complex data structures and integrate with existing stacks.

• Optimization tools: Built-in A/B testing and personalization features that don't require constant developer intervention.

Integrations:

Builder integrates with existing tech stacks, supporting a wide range of tools and services across various categories:

• Omnichannel Commerce: Shopify, BigCommerce, Salesforce
• Digital Asset Management: Cloudinary
• Deployment: Vercel, Netlify, Amplify Hosting
• Localization: Phrase, Smartling

These integrations allow for pulling in data and content from various sources, creating a unified development and content management workflow.

What sets Builder apart is its ability to work within existing architectures. It respects design systems and coding standards, integrating with workflows rather than forcing adaptation to a new one.

Get started

Here's how different team members can leverage Builder:

Builder Develop:

Builder Develop is particularly useful for:

1. Automated code generation from designs
2. Rapid prototyping
3. Design system implementation
4. Legacy system modernization

Example: When building a new SaaS dashboard, use Builder Develop to convert new Figma designs into a modern, responsive React application, significantly reducing development time.

Builder Publish:

Builder Publish can help teams by:

1. Reducing maintenance overhead
2. Facilitating A/B testing
3. Enabling content personalization
4. Streamlining content updates
5. Managing multi-language content
6. Implementing dynamic content rules without complex backend logic

Example: Set up a component library that marketing can use to drag and drop to create and A/B test landing pages, freeing up development resources for more complex tasks.

Integrated approach:

For optimal results, use both Builder Develop and Builder Publish in tandem:

1. Use Builder Develop to create the core application and component library.
2. Leverage Builder Publish for visual editing, content management, and optimization.

Example: Build the front-end components for a high-performance, custom e-commerce storefront with Builder Develop. Use those components in Builder Publish to manage product pages, create seasonal landing pages, and run personalized promotions while maintaining performance and consistency.

To get started with Builder.io, you can:

• Sign up for a free trial
• Explore the API documentation
• Schedule a technical demo

Whether you're looking to optimize the design-to-code development workflow or reduce the backlog of content-related tasks, Builder provides the tools to build and iterate more efficiently.

Read the full post on the Builder.io blog

AI in programming isn't some far-off sci-fi dream anymore. With tools like Visual Copilot, you can convert Figma designs into code in one click or prototype features in a minute using Cursor. What began as basic code completion is now reshaping how we build software, offering context-aware code completions and even assisting with complex architecture.

AI has become as common in our IDEs as syntax highlighting. And just like any major shift in tech, it's bringing a mix of exciting possibilities and potential challenges.

Let’s explore what’s working, what’s not, and what’s downright concerning about AI pair programming.

The good

When it works, AI pair programming tools can be pretty sweet:

1. Speed boost: AI can instantly provide accurate code suggestions, handle code generation, and even implement entire functions based on natural language descriptions. Software developers focused on writing code can ship faster than ever before.
2. Cleaner code: Large Language Models (LLM) have been trained on a vast amounts of public code. They can suggest patterns that improve code quality and make your code cleaner and easier to maintain thereby reducing time spent debugging code. AI tools are particularly helpful when working with multiple files in complex projects.
3. Learning on the job: Junior developers can learn best practices in real-time as AI powered code assistants explain their suggestions. Even experienced developers working in multiple languages can discover new patterns and techniques without spending hours reading documentation.
4. Cost-effective (maybe): While the initial investment might make your CFO nervous, over time, organizations are seeing reductions in their software development lifecycle and fewer bugs in production.
5. Goodbye, grunt work: Repetitive coding tasks like writing unit tests, CRUD operations, and documentation can be delegated to AI, letting you focus on the more creative aspects of software development.

The bad

AI pair programming has its perks, but it also brings along some challenges to watch out for:

1. Over-reliance: It’s tempting to let the AI coding assistant handle everything, but this can lead to a shallow understanding of the codebase. If you're just accepting every piece of AI generated code into your existing code base without understanding the logic, you’ll face serious issues when things inevitably break.
2. Learning curve: Knowing how to interact with your AI pair programmer, when to trust its suggestions, and when to ignore them is a skill in itself. “You get what you prompt” is the rule, and there’s no shortcut around it.
3. Contextual limitations: Even advanced language models can struggle with domain-specific challenges, complex business logic, or new algorithms. When this happens, the code written by AI might be irrelevant or even counterproductive, slowing down progress.
4. Privacy concerns: Many organizations are grappling with how to leverage artificial intelligence capabilities without compromising intellectual property. The potential for code snippets to be used in training future AI models raises serious questions about ownership and confidentiality.

The ugly

Certain aspects of AI pair programming reveal deeper, systemic implications:

1. Job market impact: AI can empower senior developers but might leave junior developers without the foundational learning opportunities they need, widening the skill gap and creating barriers to entry for newcomers.
2. Ethical implications: Questions around code attribution, licensing, and intellectual property rights become increasingly murky when AI generates or assists in code creation.
3. Bias perpetuation: AI trained on publicly available code and older codebases risks reinforcing outdated practices, ethical biases, and security vulnerabilities present in its training data, along with potentially suggesting discriminatory code patterns
4. AI agents: The evolution of AI agents toward autonomy — moving from reactive assistants to proactive collaborators — is exciting but raises ethical and practical concerns. Autonomous debugging and task execution offer promise, but boundaries must be set for responsible use.

AI coding tools for pair programming

If you're thinking about diving into AI pair programming, here are some tools that can genuinely make a difference.

ChatGPT and Claude

Think of ChatGPT and Claude as the Swiss Army knives of coding assistants. Whether you're stuck on a weird bug, need a quick code snippet, or need code explanation that breaks things down like you're five, these tools are there for you.

GitHub Copilot

As one of the first AI coding assistants to gain mainstream traction, GitHub Copilot transformed the development process by integrating powerful machine learning capabilities directly into Visual Studio Code editor. It offers high quality code completions, contextual suggestions based on your project, and support for various programming languages like C++, Python, JavaScript etc.

Visual Copilot

Got a Figma file? Visual Copilot turns designs into responsive, production-ready code for HTML, React, Angular, Vue and more—letting you tweak the design or code to suit your needs. Instead of generating UI from scratch, it helps you leverage existing designs to accelerate development and maintain consistency.

Cursor

Imagine if your IDE got bitten by a radioactive AI. That's Cursor. With features like built-in AI chat, code completion, AI agent and automated debugging, Cursor redefines how you interact with code.

Bolt

When you want to build a full-stack web app without the hassle of setting up a local environment, Bolt is your go-to. Just describe what you want, and boom - you've got an app. Plus, you can see what you're building in real-time and deploy it without much fuss.

These tools aren’t flawless, but they’re designed to help you write better code faster, whether you're debugging, building new features, or transforming designs into functional apps.

The bottom line

The future of AI pair programming will not be defined by whether we use AI, but by how we use it. At Builder.io, we've been messing around with AI tools in our dev process for a while now. We've plugged them into everything from quick prototypes to shipping actual features.

Has it been a game-changer? Yeah, pretty much. We're moving faster, our code's more consistent, and our devs get to focus on the tricky stuff instead of writing boring boilerplate all day.

But it hasn't all been smooth sailing. We've learned that AI's great at some things, but it's not about to replace good old human brainpower. It's more like a really smart intern — helpful when you know how to use it, but you wouldn't let it run the whole show.

The key? Use AI to make your skills better, not to do your thinking for you. At the end of the day, we're still the ones responsible for building stuff that actually solves problems.

So yeah, the future of coding isn't about AI taking over. It's about figuring out how we can team up with AI to build cooler stuff, faster. And that's pretty exciting, if you ask me.

If you enjoyed this post, you might also like:

• 5 Advanced Features for Cursor
• Cursor vs. GitHub Copilot
• Devin vs. Cursor
• Windsurf vs. Cursor
• OpenAI o1 vs. Claude Sonnet

Read the full post on the Builder.io blog

It's a well-designed centered hero design with a sign-up box. It stands out that the hero text fades away while moving behind the code editor once you scroll down. How can you achieve such an effect?

I was curious and kicked off a quick reverse engineering session to discover that everything's built with React, and the application listens to scroll events. When scrolling, the JS updates the hero text's scale and opacity properties in a requestAnimationFrame loop. In short, a lot is going on to create this effect!

In this article, I will explain how to achieve a similar effect with modern (and future) CSS and zero JavaScript.

If you want to look at the final example, check a deployed demo version online!

Some prep work

To have some code ready, I quickly designed a hero section in Figma and used the Builder Figma plugin to generate some React code with Visual Copilot.

Sliding the hero image over the text with position: sticky

A reasonable first step to recreate the GitHub effect is to slide the hero image over the hero text.

To do this, we can stick the hero text at the top while scrolling. By using position: sticky, we can place an element inside a container and "make it stick" somewhere when people scroll around.

To give the hero text some air, we'll also add some space using the top CSS property.

.hero-text {
  /* Make the element sticky */
  position: sticky;
  /* Give the element some space at the top */
  top: 1rem;
}

When we add position: sticky, we'll discover that the hero text scrolls on top of the other scrolling elements. This is exactly what you want in most sticky scenarios, but in our case, we want the sticky element to go below the rest.

To make the hero text "slide under", we need to create a new stacking context for the other elements. There are many ways to do this, but I like to set isolation: isolate to create a new stacking context because it's a nifty one-liner, and more people should know about the isolation CSS property.

.hero-image {
  /* Create a new stacking context */
  isolation: isolate;
}

And voila — look at this!

That's not too shabby, isn't it? Now, we only need to add the scroll-fade behavior. How can we add it?

Adding CSS-only scroll-driven animations

If you're reading this blog, you're probably aware of the ongoing CSS evolution. Let me tell you, there hasn't been a better time to be a web developer. To name a few recent CSS features: we now have container queries, the :has() selector entered the stage, and view transitions make animating things easier than ever before.

The modern web is fantastic, and one other exciting feature in the making is scroll-driven CSS animations. Scroll what? Yes, you heard that right!

What are scroll-driven CSS animations?

Scroll-driven animations allow you to remove all these custom JavaScript scroll handlers and use the CSS Animations API to add scroll animation behavior.

The API runs off the main thread and provides a massive performance boost compared to thousands of firing scroll handlers in JavaScript land. With scroll-driven CSS animations, you can create scroll effects with less and more performant code.

The new CSS feature is currently supported only by Chromiums, but Webkit is open to this platform addition, and Firefox ships an initial implementation behind a flag! Native scroll-driven animations will be coming to the web!

If Chromium-only isn't good enough to use the new CSS feature yet, I understand. However, with Chromium-based browsers having a global market share of over 70%, it's fair to treat scroll effects as progressive enhancement. Browsers that support scroll-driven animations will show users some eye candy, while the other browsers will only render a headline on top of a hero image.

Side note: if scroll-driven animations are essential for your site, there is also a polyfill. I haven't used it, but it might be a valid alternative to add custom scroll behavior.

But let's get to it and add some eye candy!

Adding your first scroll-driven animation

Scroll-driven animations are based on good old @keyframes.

@keyframes fade-out {
  0% {
    opacity: 1;
    scale: 1;
  }

  100% {
    opacity: 0;
    scale: 0.5;
  }
}

We can define a fade-out animation that makes an element disappear by scaling it down and reducing its opacity. Next, we take our hero-text class and set our scroll-driven animation.

.hero-text {
  /* Set the animation */
  animation: fade-out linear;
  /* Connect the animation to the nearest scroller's scroll progress */
  animation-timeline: scroll();
}

And look at this: two added CSS declarations give us something to work off of already.

Let's understand what's going on here!

The hero-text class now sets the fade-out keyframes using the animation property. It isn't a "normal" animation declaration, though.

The animation shorthand doesn't define an animation-duration. Usually, time controls the keyframe animation progress, but in our case, the animation-duration is set to auto because we want to make it dependent on scroll progress and a scroll timeline.

Below the animation declaration, you'll see the new animation-timeline property. Theoretically, animation-timeline is also part of the animation shorthand, but you can only use it to reset a timeline. To define an animation other than auto we must define an animation followed by a specified animation-timeline. Order matters in this case!

But I got ahead of myself; what's an animation timeline?

Specifying an animation timeline

An animation timeline specifies the timeline used to control the progress of a CSS keyframe animation. Usually, you control your animations by time which maps to animation-timeline: auto. But with scroll-driven animations, there are now two new animation scroll timelines: scroll progress (animation-timeline: scroll()) and view progress (animation-timeline: view()) timelines.

Animating the hero element on scroll progress (scroll())

A scroll progress timeline defined with the scroll() CSS function maps the scroll progress of a wrapping scroll container (also called scroller) to values from 0% to 100% and applies them to a keyframe animation. In our case, the nearest scroll container is the html element. When scrolling down, the overall document scroll progress controls the fade-out animation.

And while this works, you might now wonder what happens with massively long HTML documents.

When the fade-out animation relies on document scroll progress, a longer document affects the animation progress.

scroll() comes in handy if you want to display a document scroll progress indicator, but for our hero animation, it doesn't make sense to use a scroll progress timeline. If you scroll 500px down in a 2000px high document, the animation will progress by 25%. But when the document grows to 10000px, the scroll timeline will only progress to 5%. The animation will be barely noticeable. Our animation should rely on something other than the document length!

Luckily, we can use another scroll timeline.

Animating the hero element on view progress (view())

If you don't want to consider the overall scroll progress, there's another way to control scroll-driven animations. The new view() CSS function allows you to consider the visibility of an element inside a scroller. The view() function is quite a beast to wrap your head around, but most importantly, view progress timelines are also wildly powerful!

I will only go into some of the details here (check the resources below if you want to learn more), but let's take a step back to rethink how the visual effect should work.

We want to:

• Start the keyframe animation at 0% when our hero starts moving off the screen.
• Finish the keyframe animation at 100% when the hero disappears.

To achieve this behavior, we have to adjust the animation range, and of course, there's another new CSS property for it — say hello to animation-range. animation-range enables us to define the start and end of our scroll-driven animation. For our fade-out animation, we're interested in kicking off the animation when an element starts disappearing (0%) until it's entirely gone (100%).

For this use case, we can add an exit animation range. Let's go ahead and put this into the CSS.

.hero-text {
  animation: fade-out auto ease-in-out;
  animation-timeline: view();
  /* Apply a custom animation range */
  animation-range: exit 0% exit 100%;
}

When you add the custom animation range, you'll discover that, for our hero animation, it doesn't work, though.

We defined the hero text to be sticky, and this positioning implies that it will leave the scroller only when the surrounding container is moving off the screen. The hero text animation is applied, but it's not visible because our hero dummy image covers the scroll exit animation.

When we remove the stickiness, we'll discover that our animation-range works appropriately. What can we do now that we want to animate a sticky element?

Attaching a named view progress timeline to animate sticky elements

Of course, the new scroll-driven animations have a solution to this problem, too. To make our animation visible, we need to control the animation depending on the view progress of another element with a named view progress timeline.

In our CSS, we can go into the wrapping hero container and specify a view-timeline-name…

.hero-container {
  /* Define a named view progress timeline */
  view-timeline-name: --hero-scroll;
}

… to then change our hero text to use the view timeline instead of view().

.hero-text {
  animation: fade-out auto ease-in-out;
  /* Specify the container animation timeline */
  animation-timeline: --hero-scroll;
  animation-range: exit 0% exit 100%;
}

And now check this out!

Our hero text element fades out and scales down right when the surrounding container starts leaving the screen. And how much CSS did this take us to write? It was only a few CSS declarations and one keyframe animation. I'm amazed!

Let's consider a few more things to be good web citizens, though.

Watching out for browser support and user preferences

First, some folks can feel discomfort or even sickness when faced with unexpected movements on screen. To build "a good web™", we can add a CSS reduced-motion media query to allow people to opt out of moving animations.

Second, while creating the demo, I discovered that Firefox's flagged implementation doesn't support the animation-range property yet. To resolve this, we can also add a @supports feature query to avoid a broken animation in browsers that don't support scroll-driven animations yet.

If you ask me, the fallback looks excellent as well, but of course, you could also remove the stickiness if you don't like the image sliding over the text.

So, here's the final code.

@supports (animation-range: exit) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-container {
      view-timeline-name: --hero-scroll;
    }

    .hero-text {
      animation: fade-out auto ease-in-out;
      animation-timeline: --hero-scroll;
      animation-range: exit 0% exit 100%;
    }
  }
}

.hero-text {
  position: sticky;
  top: 1rem;
}

.hero-image {
  isolation: isolate;
}

@keyframes fade-out {
  0% {
    opacity: 1;
    scale: 1;
  }

  100% {
    opacity: 0;
    scale: 0.5;
  }
}

Isn't this magical and fun? I'm a big fan!

Conclusion

So, with only a few lines of modern CSS, we rebuilt this JavaScript-heavy effect on GitHub's landing page. Our scroll animation is now more maintainable and performant because we're not relying on any JavaScript blocking the main thread!

And because we're relying on modern CSS paired with progressive enhancement, we can give users the best experience if their browsers support it. Win-win!

If you want to see the effect in action, here's the deployed version.

Are you hooked already? I indeed am!

Next steps

If you want to learn more about scroll-driven animations, there's a single place to go. Bramus from the Chrome DevRel team, aka "Mr. ScrollAnimation", maintains scroll-driven-animations.style. The site lists many tools, resources, and visual examples.

If you prefer learning with videos, Bramus has also released a free course on YouTube.

And if you wonder how to debug scroll-driven animations, this Chrome extension is invaluable for figuring out what's going on.

And now we're done, have fun animating, and let me know how it goes!

Stefan Judis

Read the full post on the Builder.io blog

What is Devin?

The main thing to know about Devin is it's primarily a Slack-based workflow — it's not an IDE.

You tag Devin in Slack and ask Devin to update something, fix something, et cetera. Devin includes:

• A remote server
• Browser interface
• VS Code editing interface
• A planner
• A chat interface

You can follow along step-by-step to see what Devin did and what it's doing.

Testing Devin with an image generation model

I heard about this new image generation model that's supposed to be small enough to run on consumer-grade hardware.

I was hoping for a basic web UI, but then I found all of this and realized I don't code in Python. I didn't know what to do with this, so I asked Devin.

Devin went to work and in the course of about 12 minutes it:

1. Cloned the repo
2. Got it spun up
3. Generated an image of a cat for me
4. Attached the image back to me

I then asked for four more images of a dog riding in a hot air balloon. And I got my images in full, terrifying quality.

Now that's not Devin's fault, of course; that's the model we're using.

Asking Devin to create a web UI

I saw one of the todos on this repo is to create a local, real-time interactive app.

So I asked Devin if he could clone this repo and add a web-based UI to type prompts and see images. Devin began spinning things up and sending me updates.

One really interesting thing Devin does is it takes notes and stores them in a notes.txt file to refer back to and use in subsequent prompts.

This seems like an interesting technique to summarize information that's important and carry it across subsequent steps.

Devin will also sometimes create knowledge entries, which are like bits of information that could be useful to refer back to in totally subsequent runs.

It'll store these and look them up when needed, which is supposed to emulate the tribal knowledge that exists within a team.

Devin was in fact able to add the web UI I asked for, but we hit other issues. More on that in a moment.

Devin's capabilities and limitations

Overall, Devin's pretty impressive. It:

• Creates plans
• Writes code
• Finds bugs in the code
• Corrects the code
• Runs its own end-to-end tests to verify it works
• Responds to your feedback if you find issues and attempts to address them

Anything you reply in Slack, Devin will start working on a reply to. In this case, it was able to verify we're hitting deployment issues.

I kept working on debugging it, but unfortunately, after a lot of back and forth, it still never was able to solve it. Eventually, I gave up because I was sick of trying.

Personally, slack thread hell is not my favorite method of developing/debugging:

I prefer not to be demoted to the “any updates?” guy.

Finally, I asked if I could just pull this code down locally and run it locally. It gave me instructions, but they weren't valid because it didn't actually send this code in a pull request.

Devin's pull request capabilities

That's not to say that Devin can't do a pull request. One of my very first runs of Devin was to add a feature to a weather app.

It was able to add the feature I wanted as well as respond to my feedback that I wanted it to look more like iOS styling.

The final pull request was not bad. It added two packages, and the code was pretty good, but there was a console log in the code.

It also forgot to uninstall a package that it no longer needed after my feedback. But we can go in and just leave comments, like a normal person, to remove this log and that this package is no longer needed.

One cool thing Devin did when we were going back and forth on what the UI of this weather app update should be is it actually generated a deployment with a preview URL without me asking.

So when I type in a city, I can see that the feature I wanted has an iOS style like I asked. Even though I actually don't have a deploy preview set up on this repo, it deployed a version for me to see anyway.

When it learned I want an iOS style for this app, it proposed this to save in the knowledge. I can review and approve it, and it'll remember that during subsequent runs.

For some reason though, I couldn't get Devin to reply to my feedback this time, even though I've seen it do it before. I don't know what went wrong.

In general, I hit a few bugs along the way while using Devin, but nothing super crazy that I couldn't usually work around.

Fixing bugs with Devin

A separate task I asked of Devin was to fix a bug in our existing website. After about 12 minutes, it spun up a PR with a fix, finding the necessary boolean and updating it from true to false.

But then it updated some other stuff I didn't expect:

• Added a fallback: true in getStaticPaths, even though getBuilderStaticPaths already sets fallback to 'blocking'
• Removed a check, even though we already turned that value to false
• Added a type declaration that I know firsthand isn't needed

The cool part is I asked in the PR why it did this, and Devin added the eyes emoji to tell me it sees this. Then it explained itself.

I'll be honest, I was kind of hoping it would fix those things. But it did provide a thorough explanation. It just wasn't a good one. Most of this information is not actually true.

Fallback true does not enable client-side navigation or enable Builder.io's preview system. Fallback blocking, which was already used, is our preference. Also, the tabler icons react type definition is just not needed. It's included in the package.

It made some weird comment that these components are part of the client-side navigation system, whatever that means. But the nice part is I can talk to Devin like a human, leave a comment, and it can make updates accordingly.

Adding a backend feature

The last thing I asked Devin to do is implement a backend feature. I said to add to our GraphQL admin API the ability to read and write from the comments collection.

Devin created a PR that was decent. It added this reflect metadata package that I don't think is needed (we haven't needed it to date).

But most importantly, it did recognize we use this resolver structure. It created a comments resolver and added it.

This code actually looks pretty typical of how we've written this on the backend. Now it did make up a couple of fields that would have been nice to ask me what the schema is. But otherwise, I'd say this is decent code.

Workflow issues with Devin

Overall, I'd say the biggest problem I have with Devin is this is just not my preferred workflow. I don't want to make an ask and wait 15 minutes for a pull request, and then have this back and forth on the pull request and/or Slack.

I much prefer Cursor's workflow where I have all of this right in my local environment and IDE. I can see the updates in real-time and can commit and debug locally, without jumping to some remote server and other set of tools I don't know, and having all these long waits and delays that are just unfamiliar and unproductive.

I get that the idea of Devin is to set some asynchronous agent coworkers off at a task and let them do lots of things in parallel and just come to you with results.

But that really isn't a great workflow until Devins are a lot better. I don't want the AI to just go off and do its thing and come back only when it's done, unless I have high confidence it's going to be really, really reliable at that.

Otherwise, I'd prefer my IDE just do it.

Comparing with Cursor agents

Let's compare some of the same tasks with Cursor's new agent features.

Context handling

The big difference between Cursor agents and the standard Cursor composer view is you don't have to manually add files to the context. Cursor will scan your codebase and find the relevant files and add them for you.

Cursor was able to find this no client-side routing variable and flip it to false. If I accept the updates, we can see it did exactly what we wanted. One basic minimal diff.

User control and feedback

Cursor's not always perfect, but the part I like most is I'm in control and in the driver's seat. If I want something different, I could also say, just delete that variable and all references altogether. And I could see the update immediately. There's less waiting and more action.

While I'm more closely in the loop, I have more trust with this process. Because I know what I want, and if it can scan my code, update multiple files and not make me have to worry about the details, I can provide real-time feedback and hand modifications and send the pull request my way.

That's a much easier to adopt workflow for me and my team.

Ownership clarity

With Cursor it's also more clear who owns the pull request: it's me. I find this process faster, easier, and nicer. We don't have weird bots creating pull requests where it's unclear who actually owns that and is responsible for making sure the code is good.

Nobody has to clone down that bot's PR and push updates to it. And every update happens pretty quickly.

GraphQL example

I also tried the GraphQL prompt with our very large internal repo in Cursor agent mode as well. And I got very similar results. It:

• Added the comments resolver
• Integrated it into the API
• Added the types as well

So pretty similar results to what you'd expect with Cursor's composer view. But again, because of the agent mode, I didn't have to specify files. I just typed my prompt and it happened. That was nice.

Image generator repo clone

Now let's try a more agentic workflow where we have it clone this image generator model repo. You'll see the main difference between Cursor agents and Devin is it asked me before it runs commands.

Cursor is generally more cautious than Devin, which is nice because it's running on my local machine. But also sometimes I wish it would just run this stuff for me.

I've noticed if it catches an error, it'll automatically try to fix it, which I've seen it be successful at, which is great. Now it's written the code, which I'll accept. It found an error and it's rewriting the command accordingly.

Unfortunately, my computer froze before I could show you if Cursor was able to finish that task. It looked to me like it was generating the image fine, but it turns out that model is meant for having a real GPU and not burning through my laptop CPU like I was trying to do.

The results

Overall, I don't think Devin will take off like Cursor. And it's not just because of the $500 a month starting point. Cursor is so much easier to adopt and I like their incremental approach.

Devin, I fear, is trying to jump too far. They've raised all this money saying there's this all-new way to build software with agents, but it just wasn't my preferred workflow.

Maybe one day when LLMs are even better and agents are extremely reliable. But I'm not sure the rate of progress will get us there really soon. And I personally believe more in Cursor's incremental approach than Devin's "let's change everything" approach.

My preferred AI stack

My preferred workflow looks more like this:

1. A developer works iteratively with Cursor
2. Other teammates like designers iterate with their tools
3. Products like Builder.io can convert designs to code and also patch in design updates as they're needed

Ultimately your workflow doesn't change much. You're still coding and debugging locally. You're pushing changes as needed.

But I will say that I'm excited to have a new player in the agent coding space to push Cursor even further. And I can't wait to see what comes out from the result of this.

But that's my quick take. From everything you saw, what do you think? Let me know in the comments. And if you made it to the end and you want to see more videos like this, be sure to like and subscribe.

If you enjoyed this post, you might also like:

• 5 Advanced Features for Cursor
• Cursor vs. GitHub Copilot
• AI Pair Programming in 2025
• Windsurf vs. Cursor
• OpenAI o1 vs. Claude Sonnet

Read the full post on the Builder.io blog

AI progress is slowing down

Let's start with a real-world example. Here's a comparison between o1 and Claude converting a Figma design into code via Builder.io:

As you can see, o1 is significantly slower. It's also more expensive, and only sometimes better.

So why is OpenAI investing so heavily in o1? It all comes down to this:

Source: Alex Albert

Each new large language model (LLM) that comes out seems to be only incrementally better than the last. In fact, it's expected that OpenA/I's latest model, Orion, isn't even always better than GPT-4.

Why? We're simply running out of data to train on.

Source: Will we run out of data? Limits of LLM scaling based on human-generated data

The need for speed

If we're hitting limits on how smart we can make AI models, what's the next move? Making them faster.

AI players are investing in specialized hardware to speed up inference and lower costs. They're building their own data centers and even looking into nuclear power for more sustainable, cheaper energy.

Companies like Groq and Cerebras have seen up to 10x performance increases with LLM-optimized hardware. This isn't just theoretical - Amazon's already released their new chips, and Apple is planning to use them.

Faster inference could open up new workflows that weren't feasible before due to long wait times and poor user experience.

The Smartness vs Speed trade-off

But here's the million-dollar question: does being faster matter if AI can't get any smarter? Or to put it another way:

If the way we train models today isn't getting better, if AI is plateauing on intelligence, can we use increased speed and decreased cost to find another path to smarter AI outputs?

The answer might surprise you.

Let's borrow a concept from Daniel Kahneman. He talks about two systems of thinking:

1. System 1: Fast, automatic thinking. Like knowing 3 + 4 = 7 without having to calculate it.
2. System 2: Slower, more deliberate thinking. Like solving a complex math problem step by step.

System 1 thinking is automatic.

System 2 thinking requires taking things step-by-step.

Using System 2 thinking is used to break down complicated problems into simpler steps.

For example, you likely don’t have the answer to 39 + 48 memorized the same way as you know the answer to 3 + 4.

Instead, you’d need to break the more complicated question down into steps like this:

Current LLMs work a lot like System 1 thinking. They give you an answer fast, but as complexity increases, accuracy can suffer.

O1, on the other hand, is more like System 2 thinking. It breaks down complex problems into smaller, manageable steps. This approach can help with one of LLMs' biggest weaknesses: hallucinations.

For example, if you ask o1 how many Rs are in "strawberry", it might first guess incorrectly. But then it'll go through the word letter by letter, count the Rs, and give you the right answer.

This step-by-step approach isn't entirely novel. Chain-of-thought techniques have been around for a while.

In fact, open-source models, like the QwQ model from Alibaba, are already beginning to use this approach with similar performance. What's new is training a model to use this approach specifically.

As speeds increase and costs decrease, we might be able to afford this extra time to get better answers without hurting the user experience.

The downsides of o1

The problem is, o1 doesn't always give a better answer to every type of problem. But it is always more expensive and slower.

Currently, o1 Preview costs four times more per token than Claude Sonnet. It also outputs 2-10 times more tokens because of all the "thinking" it does.

This means an o1 output could cost up to 40 times more than Sonnet - and it's not always better.

The slowness is a big issue too. You often don't see any results from o1 for 10, 20, 30 seconds or more. That's a much worse user experience.

Conversion above done with Builder.io using claude-3-5-sonnet-20241022 and o1-preview-2024-09-12 (latest API-accessible model versions). I hand checked the results on ChatGPT with the latest o1 and didn't see any major differences in speed or accuracy.

The product in the video above costs $20 per month now. If the o1 model costs up to 40 times more, it doesn’t seem worth it to pay $800 a month for an offering that is slower and only marginally better, if at all.

The potential of AI agents

So why is this still interesting? AI agents.

We want to use AI to complete a series of tasks without constant human supervision.

For that to work, AI needs to be better at breaking things down and completing tasks step by step. It also needs to have a lower failure rate and catch its own mistakes sooner.

Traditional LLMs are great at completing the next word in a sentence, but they weren't trained to break down and execute tasks.

For instance, Claude’s computer use today only has a 15% success rate at accomplishing real-world tasks. O1 is showing us what happens when we do train for that.

Source: Anthropic

The big questions

How much better can this get with novel training methods? Will this lead to new breakthroughs, or are we heading for an AI bubble burst?

The average person's life hasn't changed much despite all the AI hype. If AI models aren't getting that much better, and these new techniques don't lead to major breakthroughs, some of the hype might start to cool off.

And you know what? That might not be the worst thing.

Lessons from the dot-com bubble

As the dot-com bubble peaked in 2000, people invested in the web as if its major challenges had already been solved. There was widespread excitement about the web's potential for explosive growth and profitability.

However, that excitement deflated when companies burned through hundreds of millions of venture capital and failed to become profitable. Only a few companies survived, and they now serve as models for how online businesses can succeed.

Today, we're seeing a similar pattern with AI—growing excitement and venture capital flowing freely. The enthusiasm mirrors what we saw during the dot-com bubble's growth.

But there will be hard problems. Progress will come in S-curves. While AI could solve an immense number of problems, it might not happen today. Some AI applications might not be effective enough for mass adoption for another decade.

Remember Webvan and Pets.com? They were viable internet businesses - just 10 years too early.

Before you hit me with the "but this time it's different, man" – don't forget that that's what people say every time.

What's working now

While the future is uncertain, some AI use cases are already working well:

1. AI chat assistants for brainstorming, researching, writing, and editing
2. AI-assisted coding, whether through specialized IDEs, Copilot, full application builders, or tools that convert designs into high-quality code

These categories are seeing major adoption with generally happy users.

The bottom line

Maybe AI agents will change everything as soon as next year. Or maybe it'll take longer. We just don't know yet.

What we do know is that some AI applications are already proving their worth. Those are the ones I'm watching closely, and I'm excited to see what comes next.

If you enjoyed this post, you might also like:

• 5 Advanced Features for Cursor
• Devin vs. Cursor
• Cursor vs. GitHub Copilot
• AI Pair Programming in 2025
• Windsurf vs. Cursor

Read the full post on the Builder.io blog

Yep, you heard that right. ChatGPT's internal code has regexes looking for specific names and throwing an error anytime it sees them coming out of ChatGPT directly.

The oldest security measure in the book

What's the oldest and best security measure? Regexes, of course. But why are they even doing this?

It turns out these are people who tried to sue OpenAI. So how can you get in any more trouble with ChatGPT making up lies about people? Simple: just never allow ChatGPT to mention that person's name. Ever. No matter what.

But isn't that terrible engineering?

Sure, you might say, "Wow, what terrible engineering. How disgusting." But really? What are they going to do instead?

Are they going to retrain a new model for millions of dollars just to not mention these few random people's names? And do that every time they're worried about lawsuits?

Or if someone's mounting a suit against you, are you going to let yourself continue to be liable to the same thing over and over?

Sometimes simple is best

It's easy to make fun of this approach, but it's such a simple, easy-to-leverage solution that they did in a pinch. Because it was a good idea.

Fun fact: the actual Builder.io codebase for our Figma to code product does literally the same thing. Yes, we have advanced machine learning, malicious content detection, yada yada.

But sometimes when we see a very clear pattern that we need to just stop immediately, we just add it to an array of regexes and disable any content that matches. It's fast. It's cheap. It's effective.

Y'all, you don't have to over-engineer every single problem.

How strict are these regexes?

The regexes are pretty strict. If you had a dot in the name, if you had the person's middle initial or middle name in there, it's fine. It'll output it. But just first name, space, last name? No chance.

And the same goes for other names like this.

The power of regex

While AI hallucination is no new thing, and it's probably the number one problem that LLMs have had forever and probably will have for some time, at least we know when you can't fix it with the world's most advanced AI, you can always fix it with a regex.

Don't let anyone tell you in your pull requests that a regex is no good or a bad practice. The biggest, best, most innovative companies do it. And you should do it too.

Read the full post on the Builder.io blog

Let's dig into how components work and how to use them effectively.

What are components anyway?

Components are reusable design elements - think buttons, cards, navigation bars - that you can use across your designs. They work like this:

• Make a master component (the original)
• Create instances (copies) wherever you need them
• Update the master to change all instances at once

Pretty neat, right?

What can you actually customize?

Not everything in a component instance can be changed. Here's what you're working with:

Can't change:

• Order and position of layers
• Constraints on the layers
• Core structure

Can change:

• Colors
• Text content
• Text properties
• Effects

Variants: Figma components that do more

Sometimes you need different versions of the same component. That's where variants come in.

Take a button component — you might need:

• Color (Property) — Primary, Secondary (values)
• State (Property) — Focused state, Hover state (values)

Instead of creating separate components, variants let you handle all these states in one place.

Creating your first component

It's super straightforward:

1. Select your design element.
2. Press Option+Command+K or right-click > Create component or click […] on the Properties panel on the right > Create component.
3. You can click Create Multiple components to create components in bulk by selecting many design elements.

For variants:

1. Use the Properties panel on the right > Add property.
2. Right-click > Main component > Add Variant.
3. Or select multiple elements > Create Component Set.

How to use Figma components in your designs

1. Drag the component from the Assets panel on the left sidebar.
2. Or copy the component (master) and paste it (instance) into your frame.
3. Swap between instances from the Properties panel on the right.

When should you use Figma components?

Components are perfect for:

• Stuff you use over and over
• Elements that might change later
• Building design systems

Pro tips that'll save you time

Naming components and properties

Keep it simple but clear. You don't need a novel — just enough to know what it is.

Your component names should make sense at a glance in the format Component/Value of the property

✅ Do this:

• Card/Blog
• Button/Primary
• Input/Search

❌ Not this:

• ButtonV2Final
• NewCardUpdated
• ComponentSet47

Component organization

Think about how your team will use these components. Group related stuff together:

• Keep navigation components in one section
• Forms and inputs in another
• Common UI elements together

Using multi-dimensional component set

When you're building a design system that needs to scale, multi-dimensional component sets in Figma are a game-changer. They're not just a neat Figma trick — this approach mirrors how popular component libraries like Material-UI (MUI) handle variations.

Here's the idea: instead of creating a ton of individual components, you use properties to define different dimensions of variation. Let's break it down with a button example:

• Property 1: Style (Primary/Secondary)
• Property 2: State (Default/Hover/Disabled)
• Property 3: Size (Small/Medium/Large)

This is much cleaner than having 18 separate components floating around.

✅ Do this: Button/Outlined/Primary/hover
❌ Not this: Button/PrimaryOutlinedonHover

Managing changes in Figma components (without breaking everything)

Here's the thing about components — changes can affect a lot of designs at once. That's powerful, but it can also be scary.

Some tips to avoid disasters:

1. Let your team know before pushing big changes.
2. Test changes on a few instances first.
3. Consider adding new variants instead of creating a new component/ set.
4. Only detach instances when you absolutely have to.

Dealing with deleted components

If you accidentally delete a master component, don't panic. As long as you have one instance left, you can restore the whole thing.

When to break the rules with Figma components

Sometimes you need to detach an instance from its master. That's fine, but try these first:

• Add a new variant.
• Use component properties.
• Override specific attributes.

Only detach if none of those work. Why? Because detached instances don't get updates from the master component anymore.

The real power of components

Components aren't just about keeping things organized. They:

• Save tons of time on updates
• Keep your design system consistent
• Make it easier to experiment with changes
• Help new team members understand your design system
• Make handoff to developers smoother

Convert Figma components to code

If you're using Builder’s Visual Copilot Figma plugin, you can leverage the component mapping feature to create a direct link between the design components in your Figma file and their corresponding code components ensuring a consistent output in your projects. Going from Figma to code should not just be about translating designs into code; it should be about translating them into your code.

The bottom line

Figma Components might seem like extra work at first, but they're worth it. Start using them in your next project — even if it's just for buttons and cards. Once you see how much time they save, you'll never go back.

Remember: the biggest mistake with Figma components isn't using them wrong — it's not using them enough.

Want to learn more about turning your Figma designs into code? Check out our guide on Figma to code conversion.

More Figma to code resources

• Generate Figma Designs with AI
• Design Smarter with Figma Auto Layout
• Figma designs to interactive features using natural language
• Builder.io Figma plugin

Read the full post on the Builder.io blog

This isn't a phenomenon of just one product; it affects every product that gives non-developers some degree of ability to code.

The way AI model progress has been plateauing lately suggests this may not change any time soon, if ever.

The pit of death

Anyone who's not a developer but has used tools like Bolt, Cursor, or v0 to build basic applications from prompts knows all too well the pit of death that you eventually always fall into.

Things start fast and awesome: the basic scaffold of your page or site, or even some of the basic functionality, comes in seconds. But then you start prompting more and more, and you struggle to get what you want out of it.

As the application gets more complex, the behaviors you're looking for don't come out quite as easily.

Eventually, some prompt you use breaks everything. Nothing works, and no matter what you try, the AI cannot get out of this corner.

That's the pit of death. I've seen it happen over and over: some esoteric bug is just too challenging for the LLM to solve on its own, and then that's it. Your app is done, if you're lucky enough to not land at a pit of death.

The plateau of death

You'll probably hit a plateau of death instead, where after a certain number of prompts, you just don't seem to be able to make progress anymore.

There's truly only one fix for these situations: you've got to roll up your sleeves, get in the code, and fix whatever the AI couldn't.

Whether that means solving some very esoteric bug or implementing features so that the AI can continue off of your implementation, there's always a point where the human is needed.

The limits of AI in development

Even if the models got 10x better, I don't think you'll actually offset the development need by that much.

The reality is LLMs are good at code generation, but that's only one part of many in software development. In my experience, when an engineer comes in to unblock the AI, the next pit of death is just right around the corner.

As the application gets more complex, you need developer intervention more and more, in shorter and shorter intervals.

Eventually, what ends up happening is you go from products that don't require any development to ultimately exporting that code and needing developers to fully take it over. The developers then use different tools that are similar but more focused on code editing.

The value of no-coding-skills-needed AI coding tools

That's not to say that the tools that didn't require development in the beginning aren't useful. They can be incredibly useful for things like prototyping, making simple internal tools, and micro applications like a pricing calculator.

Making your life better with AI tools

The big question is how you use these things to make your lives better.

As an engineer, designer, product manager, marketer, or whatever your role is, I think there are a few heavily overlooked use cases that you could adopt in your workflows now to make your life a lot better by using these tools and leaning into where they're going.

The pain points we can improve

As an engineer myself, the two things that drive me the most insane are poorly written specifications (where we didn't fully understand the problem and what's really needed to solve it) and ever-changing requirements.

It turns out our original guesses were wrong, customers and feedback told us different things, and now halfway through building the thing, we're changing how we're doing it, and everything's becoming a mess.

The value of hands-on testing

In my experience, you have to get hands-on with an application to really know how it needs to be used. Even better, get it in real users' hands, even if it's not fully functional.

Just having users go through the actual flows and testing the things that looked good in wireframes and designs, but maybe actually don't feel right in practice, can really help improve your product UX.

But if you have to build the whole thing before you learn that, it's wildly inefficient and can lead to very messy codebases.

Rapid prototyping with AI

Alternatively, with these rapid prototyping AI tools, we can iterate before we actually commit to building the full thing.

We can try out the flows, even if all functionality isn't there.

If we're lucky, we can even get direct user feedback in small ways and learn as much as possible early before we commit to a finalized spec and building the real full application.

Less handwritten CSS

There are other implications coming soon too. While I don't think programming is going away at all, I think it will change. I think every year we're going to see a major reduction in actually handwritten CSS code.

The same way you don't handwrite a PDF, you export it from a tool. Design and design-to-code tools are becoming so good that they can generate CSS for you, shockingly close to how you would have written it yourself.

In doing that, we can stay exactly true to the original design spec and avoid a lot of red lining and back and forth to make sure it looks correct.

A more collaborative future

Looking to the future, the big question is: How do we get more tedious development off of our plates? So that developers don't need to update colors, add a simple section, modify text, or tweak some logic.

If marketing or product or design need small changes, how can we give them tooling like they'd have for a fresh new app with something like Bolt, but compatible with a real application with real users and real developers that work on it daily?

AI in team workflows

Luckily, I work on a team that builds one of these products, so I can show you what's coming soon, specifically around how AI can better fold into full team workflows and automate a lot more than just an initial prototype creation.

Code sync

The first interesting feature is something called code sync. This is where you can not just convert a design to code with AI, but you can then modify the code, and when the design updates again, there's a link back to the code.

So the code gets granularly updated with just the design change, without developers having to do that by hand at all.

Let's say AI converted the design to code, and you added all kinds of logic and modifications. Now the design has new colors, new buttons, modified text, and tweaked styles.

With code sync, you can just push the changes right back to your codebase with the most granular update possible and review and merge it. This is currently in private beta, and we're hoping to roll it out soon.

AI-integrated CMS

Another interesting and under-leveraged approach that already exists today is using a deeply AI-integrated CMS. In the case of Builder.io, you can section off parts of your site or app and decide what regions can be controlled by the CMS.

These regions can be assigned to specific teams, like the homepage body goes to the marketing team, hero section goes to a merchandising team, etc.

Then you can use generative AI, just like you would with Bolt, Cursor, v0, or whatever, but the updates go directly to the site or app published over an API.

Think of it as Bolt embedded in your site or app, with whatever rules and restrictions you want around it.

This unlocks not just crazy generative AI use cases within your live sites and apps, but opens up other really interesting use cases.

AI agents in CMS

One use case we're exploring is integrating agents into this AI CMS structure. Imagine having a Slack bot where you might have a conversation about what you'd like to change in your homepage or ideas on things you could do differently.

You just tag the Builder.io agent in Slack, and it reads the conversation, applies the suggestions as a five or 10% test, and then comes back a week later to let you know how the test performed.

In this world, for the self-contained regions that are probably more marketing-focused and things you don't really need or want to have in code anyway, the agent could just make those updates end-to-end autonomously, do the tedious work, and just let you know what the results are each time.

Auto-optimization with AI

We can even take that one step further and let the AI auto-optimize things. In a CMS like Builder.io, where all content is also tied to analytics, when you produce content through the CMS, the AI agent can automatically start creating A/B test variations.

It leverages context that it already knows about your business, finds what variant converts best, and scales that up to a hundred percent of traffic completely autonomously.

It can also take your audiences, create personalized versions of content for each audience, and play with the knobs to make sure every piece of content is as highly converting as possible, in a 100% automatic way.

Real-time personalization

If you take that one step further, you can see we're not that far away from a world where we can do one-to-one personalization where the AI is generating parts of the user journey in real-time as they're browsing.

As you browse the site or app, or I do, we can see completely different flows, optimized for exactly us, generated by LLMs in real-time.

This one's probably the furthest because we have to worry about cost and latency. But as more LLM-optimized hardware comes out, and we're seeing up to five times gains in speed and efficiency of inference, this might not actually be that far away.

Conclusion

While I don't think everyone will be a developer overnight because of AI, I do think the more development skills you have, the more you can use AI to generate code, unblock yourself, and do incredible things.

I think the biggest unlock that's coming is better connecting the AI tools with your existing teams and workflows. This will enable us to build and iterate on real applications faster than traditional methods, maximizing the skills of everyone.

We'll all build better products faster together, focus on our unique skills and creativity, and spend less time on redundant menial work.

Oh and if you found any of what we are working on around using AI to accelerate design to code and/or publishing to your live site, talk to us to get a demo from our team.

Read the full post on the Builder.io blog

"We're about to give you AGI," he claims, even despite key leadership roles leaving the company. In my opinion, if you really were right around the corner from AGI, I wouldn't be leaving.

At the same time, their latest model just looks like GPT-4 with a chain of thought prompt, which is already a common technique, and just a really long output window (not to mention how incredibly slow it is).

The truth about AI model progress

It seems like OpenAI is noticing the truth here, which is that new models are plateauing in terms of how effective they are compared to older ones.

So instead of shipping a GPT-5 that's probably only marginally better and probably larger and more costly, they're trying to make GPT-4 work better for different use cases.

At the same time, Anthropic consistently produces better models. But even those are only incrementally better each time they launch one. This is a big gap from the GPT-2 to 3 to 3.5 days, where we saw huge leaps each time. We're just not seeing that anymore.

Source: Business Insider

Three interesting implications for the AI ecosystem

This leads to three really interesting implications of where the AI ecosystem is going, and one really big unknown that I also think people are really, really lying about.

1. Vendors are specializing

OpenAI's Sam Altman used to tout "good luck" if you try and compete with their models, but they simply don't have the best models anymore, and haven't for a while. It seems they're acknowledging this and keep focusing time on specializing in consumer products built around the models.

They make three-quarters of their revenue from ChatGPT, which they're investing in better native apps, better experience, better search — all the consumer experience around the model. They're conceding that they just don't build the best models themselves anymore.

In fact, if you're a vendor using OpenAI's APIs, in almost all cases you probably should use Anthropic, which is reflected in their revenue — 85% of their revenue comes from the API.

They invest far less in their consumer products, even though the model is better. The user experience of the products just isn't as good. They are clearly not investing there. They're putting everything into just being a few percent better of a model.

Source: Anthropic

2. Specialized hardware is coming

More and more vendors are building specialized hardware for LLMs which can drastically increase the speed of inference.

New chip companies like Groq and Cerebras are able to do LLM inference three to five times faster than typical GPUs.

Source: Cerebras (evaluation of Llama 3.1 - 8B)

The interesting key here is they're not just five times faster. The can also evaluate three to five times cheaper because they're simply much more efficient.

So when we can make AI products that are equally as smart but massively faster and cheaper, that could unlock a lot of new use cases that were previously just prohibitively slow and expensive.

3. Better utilization of LLMs is coming

The third implication is that vendors are going to get a lot better at figuring out how to use LLMs, even if they don't get that much smarter.

Below is an example of a launch title for the Xbox 360 - Perfect Dark Zero, which came out when the 360 was brand new and the graphics are…fine. Like, it's representative of that era of the console.

But what's fascinating is when you remember launch titles versus late in a console series titles. On the same exact foundation, there was no change to the console or hardware itself, but years later we see games like this.

This is Halo 4, and this looks like a whole different generation of console. Yet, this is on the same hardware as the prior game.

What happened over those years? Developers got way better at optimizing how they use this technology. Game engines found more and more clever approaches to get the most out of what they had.

This is what I think will happen with LLMs. Those who make products on top of LLMs will get better and better at getting more of the smart parts out of them and avoiding the suboptimal, problematic parts.

I don't think we're anywhere close to AGI, but I do think we'll see major leaps in product quality, just by using the LLM technology better and better.

The reality of AI agents

What about agents? What about Devin, the AI software engineer that made all these crazy claims, raised a ton of VC money, and just kind of disappeared off the radar? Or Anthropic's Claude with computer use that will navigate your computer and use it like you?

Realistically, I think the models are just not smart enough yet for this to make sense. Even in Anthropic's own announcement post, they cited that Claude with computer use only has a 14.9% success rate. I don't see any world where we give AI agents the ability to act on our behalf without them having something more like a 99— if not 100% — success rate.

Source: Anthropic

In all of my experience and testing, the models are not smart enough to be able to accomplish autonomous tasks. They need a human in the loop. Otherwise, they derail quickly and those small errors compound very rapidly.

The future of AI products

But that's not to say that some form of agents won't exist in the short term. I think mini or micro agents do show a lot of practical value. For example, the open-source Micro Agent project that can generate tests, take a set of tests, and write and iterate on code until the tests pass.

Or in the case of Builder.io and our product that uses AI to turn Figma designs into code, we've actually found that rather than using one big traditional LLM, we can use a series of smaller agents that communicate with each other to have a way higher quality output when you convert that Figma design into code.

By using a series of smaller agents, in combination with self-trained models, we found that you can both increase reliability, speed, and accuracy, compared to just plugging in something off the shelf.

These are the types of techniques that I think will bring us to the next generation of our era. Even if the LLMs don't get smarter and we don't have personal coding assistants doing all our work tomorrow, we sure as heck will keep getting better and better products that are more reliable.

We’ll automate tedious work — like converting designs to code, using generative AI to produce designs and functionality, adding functionality to your designs, making them real-world applications — or develop other kinds of interesting use cases around content generation, code generation, co-pilots, and other interesting products Builder.io keeps producing.

Just be sure to pay a keen attention to which ones people are actually using, versus what are gathering hype but actually don't work. Both will keep happening. I'm certain of that. I don't think we're anywhere near being past the hype curve of BS products intermixed with real effective products.So while I think there'll be a lot of noise in the market, I think we have a lot to look forward to as well.

Read the full post on the Builder.io blog

A few years ago, this would have kicked off hours of creative exploration in Figma. Today, it's a prompt that can generate complete UI designs in seconds.

This is a big deal for designers, but it got me thinking — what happens after you've got that slick AI-generated mockup?

Figma AI

Figma AI is a suite of artificial intelligence features integrated into Figma and FigJam. The idea? Make design workflow easier for UI and UX designers by helping out with both creative and routine design tasks.

Figma AI plugins

Before Figma built their own AI features, designers were already experimenting with AI through figma plugins. Now that it's built right in, let's check out what Figma AI can actually do.

What can Figma AI do?

As a designer, you spend a lot of time in your design process — organizing design elements, finding the right design assets, and putting it all together. Figma's new AI toolkit is still in beta, but here's what it can do:

• First draft: Type in a description and get a full design to work with. It's great for rapid iteration and exploring ideas.
• Smart duplication: Duplicate elements with AI-generated content variations. Perfect for creating lists and grids quickly.
• Text improvements: Generate relevant text that fits your product's tone instead of using Lorem Ipsum. Rewrite and translate text directly in your designs.
• Visual search: Upload an image to find matches or similar designs in your team's work. Makes finding assets a lot easier.
• Smart layer renaming: It can rename and organize layers automatically. Your teammates might appreciate this one.
• Background removal: Take out image backgrounds with a single click. No need for manual selection.
• Instant prototyping: Turn static designs into interactive prototypes automatically. Saves time on manual connections.

How to use Figma AI

The AI features are easily accessible through the action button at the bottom of your Figma interface or by pressing ⌘ + k / Ctrl + k. Here's how to use each key feature:

First draft

Select First Draft from the templates (Basic App, App Wireframe, Basic Site, or Site Wireframe). Enter your prompt, like "e-commerce store for iPhone accessories with a search bar." Once generated, use quick actions to switch themes, adjust spacing, modify border radius, or make additional prompt-based changes.

Smart duplication

Create an auto-layout list or grid, then simply drag the handle at the bottom. The AI will automatically generate new content variations while maintaining design consistency.

Text improvements

Select any text element to access a range of AI-powered enhancements, including translation to different languages, tone adjustment (professional to casual), and length modification.

Visual search

Type what you're looking for or upload an image through the action menu. AI will find matching elements visually, regardless of naming, and help navigate to the found components.

Smart layer renaming

Select the layers you want to rename, choose "Rename Layers" from the action menu, and AI will automatically rename them based on their content and context.

Background removal

Select any image and choose "Remove Background" from the action menu. Within 30 seconds, you'll get a crisp, clean cut-out with impressive detail preservation.

Instant prototyping

Select up to 10 screens and choose "Make Prototype" for AI to automatically create basic navigation connections. You can then review and refine these connections as needed.

Current limitations of Figma AI

While Figma's new AI powered features are impressive, there are two important considerations:

1. Limited availability: The beta is currently restricted to a small subset of users, making it challenging for teams to fully integrate these features into their workflows.
2. The design-to-code gap: Figma AI is great for cranking out designs, but there's still a big gap between a great looking mockup and responsive code. This is where things usually slow down - designers hand off their work, and developers have to figure out how to turn it into a real website or app.

This is exactly why we built Visual Copilot at Builder.io — to bridge this gap between design and implementation. Instead of just generating static mockups that need to be rebuilt in code, what if we could generate functional, production-ready components from the start?

Improved design generation with Visual Copilot

Our approach is pretty straightforward: since designs need to become code anyway, why not do both at the same time?

When you bring your Figma designs into our Visual Development Platform, you can:

• Keep generating designs with AI, just like in Figma
• Generate code in real-time as you make changes
• Publish your work to production with one click when you're happy with it

Whether you're working on simple layouts or complex interfaces, Visual Copilot maintains your team's focus and style — from brand colors to fonts. The boost in development speed means you can iterate faster and get to your final product sooner.

Generate designs using your design system

• Generate designs using natural language prompts, just like in Figma
• Iterate on designs with AI-powered suggestions and variations
• See both the visual preview and corresponding code in real-time

This approach means you're not just creating static mockups — you're generating production-ready components that can go live immediately. No more lengthy handoff process between design and development teams.

Complete context of your product

• It knows your Figma components, design tokens and documentation
• It knows your code components, coding standards, and development patterns
• It can connect to your APIs and data models, and business logic

This means describing complex features in just a few words gets you exactly what your team would build — using your design system, following your standards, connected to your services.

Static designs to interactive code

• Make stuff interactive
• Use your actual data
• Edit things live and see changes instantly
• Deploy updates automatically through our headless CMS

Generate production-ready code

• Pick your favorite framework and styling setup
• Skip the prototyping phase and go straight to live previews
• It'll even make things responsive for mobile

Getting started with Visual Copilot

Using Builder.io's Visual Copilot plugin is straightforward and immediately accessible:

1. Open the Visual Copilot Figma plugin.
2. Select a layer or design in your Figma file.
3. Click the Export to Code button.
4. Copy the generated code into your project.
5. Add animations, state, visual effects, and other required functionality with natural language prompts.

Figma AI is a neat step forward, but we need more than just static designs to build modern websites. Visual Copilot bridges that gap, letting you create designs and functional code at the same time.

Read the full post on the Builder.io blog

What’s a Gartner Cool Vendor?

According to Gartner, “Gartner’s Cool Vendors research offers a window into nascent and emerging technologies which are in the early part of the development cycle before they reach mainstream adoption. It can be extremely beneficial to an enterprise to uncover differentiating opportunities for competitive advantage.”

Why we think Builder.io is named a Cool Vendor

AI has the potential to completely transform how we work for the better, but with so much AI hype to sift through, it’s important to prioritize the solutions that can make a substantial difference.

We believe we have been identified as a Cool Vendor because our design-to-code automation has the ability to completely transform how quickly enterprises ship digital experiences without sacrificing the quality, consistency, accessibility, and reusability they need to operate at scale.

Three ways Builder’s design-to-code automation solution is transforming enterprises

1. Radically decreasing time to market for web apps, features, and sites

In some cases, it can take longer for an enterprise to turn a design into a production experience than it does to build a skyscraper (real story). Development at a snail's pace isn’t just bad for business and job security; it’s demoralizing for everyone involved. 

It doesn’t have to be this way. Enterprises have the capability to build factories that build skyscrapers, and the fastest-moving enterprises have noticed that our design-to-code solution is a key piece of machinery in the factory. Design-to-code automation can assist in cutting design-to-live times by 50% – 80%, shipping twice as many digital experiences while keeping scope on the interesting projects and generating momentum across the organization to finally digitally transform.

2. Increasing visual consistency and accessibility across every digital property

As organizations grow, so do the number of sites, microsites, external apps, internal apps, and dashboards. As different teams and a revolving door of developers spin these up and update them –the UI and UX of each starts to sway farther and farther away from each other. This workflow ends up being like a game of telephone, where pieces of the original concept are abandoned along the way, and the outcome isn’t quite what you expected or desired. 

To solve this, centralized development teams might spin up monorepos and Storybooks; design system teams might create entire design systems in Figma and spend the remainder of their lives redlining the coded versions of these designs. But, despite all the efforts, as one property gets updated, the others lag, and everything ends up looking and feeling out of sync. It doesn’t just look bad – it’s a poor user experience and a waste of time if developers are recreating components and designers are manually checking for pixel grid widths on landing pages 30 levels deep when they already reviewed a similar component last week. 

Our design-to-code solution maps your Figma components to your code components, ensuring it always pulls the right component even if the developer didn’t know it existed. Development teams can also save custom prompts at the team level to ensure every code generation adheres to best practices, including things like accessibility, consistent code refactoring methods, and tests.

3. Enabling high-fidelity prototyping for non-technical users

Everyone knows you need to build, test, and iterate – but in practice, especially in large organizations, the “build” phase can take so long that you rarely get to test and iterate as much as you probably should. By giving non-technical stakeholders the ability to turn Figma designs into real, clickable prototypes without having to know code, significantly accelerates time to live and lets you practice the product development practices you always wanted to implement.

How Builder’s design-to-code solution solves enterprise-level needs

1. Generates clean, maintainable code

Unlike other design-to-code solutions that produce throwaway code, ours acts like an experienced developer assistant. It outputs clean, semantic, accessible code that imports and reuses existing components instead of making up new ones. Just like a professional developer, it refactors code, generates tests, and sticks to your organization's coding standards and best practices.

2. Provides a collaborative playing field for developers and designers

It’s often quicker for developers to code than it is to drag and drop, and it’s certainly faster for designers to drag and drop than it is to code. Our market-leading visual editor completely integrates with your code so developers can easily make updates in whatever modern framework they use. designers can make changes visually without worrying about whether a developer will actually be able to use the underlying code it’s generating. Both can use AI to speed up their specific workflows: designers can visually iterate with natural language, while developers can use natural language prompts to iterate the underlying code.

3. Is enterprise-compliant

Though Cool Vendors are typically newer to the scene, we’ve been around the block –working with large enterprises like Anheuser-Busch, Schneider Electric, and J.Crew. Our design-to-code solution doesn’t train on your data, our platform is SOC 2 Type II compliant, and we let you bring your own LLM.

Learn more about our design-to-code solution

Curious to see if we really can shave 50-80% of the time it takes to turn a design into a production-ready experience? Have your developers try it out, or contact us to set up a demo where we’ll show you the best practices for using our solution.

Read the full post on the Builder.io blog

At Builder.io, we've developed our own mantra for building production-grade AI tools:

1. Make it completely integrated.
2. Make it reliable and predictable.
3. Make it highly performant.

At Builder.io, we've just launched Visual Copilot 2.0, our next-generation AI-powered development environment that transforms Figma designs into production-ready code.

In this post, I'll share the engineering decisions and architectural approaches we took to build a production-grade AI system that delivers on these principles.

The context challenge in AI systems

Just as a JIRA ticket alone isn't enough context for a developer to implement a feature properly, a simple prompt isn't enough for an AI to generate production-quality code. The reality is much more complex, requiring:

• Business context
• Design system specifications
• Component libraries
• Codebase knowledge
• API integrations
• Code style guidelines

Principle 1: complete integration

The first principle in our AI tooling mantra is complete integration. Here's how we've implemented it:

Deterministic foundation

We've built several core systems that ensure seamless integration with existing tools and workflows:

• Component mapping: A declarative syntax for mapping Figma components to React, Vue, or Angular components with 100% reliability
• DevTools CLI: Leverages TypeScript's compiler to extract and understand project patterns
• Mitosis: Our open-source compiler that transforms React-like components into multiple framework outputs
• Decision trees: Break down complex Figma designs into manageable chunks for LLM processing
• Advanced RAG: Retrieval-augmented generation system that helps understand how companies want their code structured and formatted, collecting data about coding patterns and preferences to ensure consistent output

Principle 2: reliability and predictability

The second principle focuses on creating AI systems that developers can trust. We've achieved this through our Gen Agents architecture:

Gen Agents: Small, focused models

• Focus on specific tasks (animations, interactivity, data wiring)
• Operate with narrow context and specific goals
• Run in rapid feedback loops
• Can work in parallel
• Validate and iterate quickly

This approach significantly reduces hallucinations and increases reliability by breaking complex tasks into manageable, verifiable pieces.

Principle 3: high performance

Our third principle ensures that our AI tools maintain their utility at scale. Traditional AI implementations often suffer from:

• Large context windows
• Slow processing times
• Linear scaling with document size
• Increased hallucination risk with larger contexts

We've addressed these challenges through:

Fast input processing

Instead of passing all context through an LLM, we've implemented a system of downstream and upstream models that can process input efficiently. These models intelligently filter and process only the essential parts that need LLM attention, dramatically reducing the processing overhead. We only delegate the key parts to the LLM, making the entire pipeline much more efficient.

Partial evaluation with out-of-order streaming

When you make changes like renaming elements, our system can intelligently patch updates across the entire codebase without re-emitting unchanged code, styles, or other elements - making iterations significantly faster since most updates only require changing a small portion of the code.

Stable performance

The real impact of our performance optimizations becomes clear when you look at scaling. In traditional systems, as your document grows in complexity or size, the time to render and iterate grows linearly. Not only does this slow down development, but it also increases the chances of hallucinations due to larger context windows.

Our architecture maintains consistent performance regardless of project size. In our benchmarks:

• Initial generation takes around 8 seconds
• Updates complete in approximately 3 seconds
• These times remain stable whether you're working with a simple card component or an entire landing page

This stability is crucial for maintaining developer flow and ensuring our tools remain practical for real-world use, where projects often grow large and complex over time.

Visual Copilot 2.0: design to interactive

Our latest release, Visual Copilot 2.0, brings all these capabilities together in a powerful visual development environment. It allows teams to:

• Convert Figma designs to production-ready code
• Make real-time updates with AI assistance
• Connect to real data and APIs
• Generate interactive components
• Maintain consistent performance at scale

Signup and try Visual Copilot 2.0 today!

Conclusion

Building production-ready AI tools isn't just about having the latest LLM or the flashiest demos. It's about creating reliable, predictable systems that developers can trust and use efficiently. By combining deterministic systems with specialized AI models, we've created a tool that's not just powerful, but practical for everyday use.

The future of development tools lies not in replacing human expertise, but in augmenting it with AI in thoughtful, reliable ways. We're excited to see how teams use Visual Copilot 2.0 to build better products faster while maintaining the quality and reliability their users expect.

Read the full post on the Builder.io blog

If you haven't, you're in for a treat. It's one of those features that once you start using, you'll wonder how you ever designed without it.

Let's break down what auto layout is, why it's such a powerful feature, and how to use it effectively — especially when you're converting Figma designs to code with Visual Copilot.

What is auto layout in Figma?

Basic concepts

If you're new to Figma, let's start with the basics: Figma is a design tool where you create interfaces using various elements like buttons, text, images, and shapes. These elements are what Figma calls "objects" — basically anything you can create or work with on your design canvas.

Now, imagine you're arranging these elements (like a button, some text, and an icon) to create a navigation menu. Traditionally, you'd need to manually position each element and readjust everything when you make changes. This is where auto layout comes in.

At its core, auto layout is Figma's way of automatically organizing elements within a special container (called an auto layout frame). Think of it like a smart container that follows rules you set for arranging its contents.

How it works

When you put elements inside this container, they automatically maintain their spacing and arrangement, even when you make changes.

You just select the elements you want to organize together, press Shift+A, and Figma transforms them into an auto layout frame, automatically determining the best way to space and align everything.

It's like giving your design elements a set of rules to follow so they behave predictably when you resize or rearrange them.

Auto layout also introduces a parent-child relationship between elements. The container (parent) determines how elements inside it (children) behave, while these elements can have their own auto layout properties. This hierarchical structure gives you more control and flexibility in your designs.

Why auto layout is a game-changer

Auto layout isn't just another fancy feature — it's a powerhouse that can seriously level up your design game. Here's why it's so cool:

Responsive sizing

Auto layout gives you flexible options for how elements behave:

• Fill available space
• Hug their contents
• Maintain fixed dimensions
• Set maximum and minimum sizes

This resizing ability makes creating responsive designs a breeze, allowing your layouts to adapt to different screen sizes without breaking.

Smart spacing and alignment

Auto layout lets you arrange elements with powerful spacing controls:

• Horizontal or vertical arrangement with consistent spacing
• Negative spacing for creative overlaps
• 'Auto' spacing to push elements apart
• Precise alignment controls separate from text alignment

Think of it like having an invisible grid that maintains perfect spacing, even when you make changes.

Responsive grids with wrap

The wrap feature is particularly useful when elements need to adapt to different screen sizes. When elements run out of space, they automatically flow to the next row or column — perfect for:

• Image galleries
• Product grids
• Tag clouds
• Card layouts

Flexible Styling

Auto layout frames work just like any other design element. You can:

• Add backgrounds, borders, and effects
• Control opacity and other visual properties
• Set padding (space inside the frame) with precise control
• Create consistent, polished components

Each of these features builds on the others, giving you a complete system for creating flexible, maintainable designs.

How to add auto layout

Here's how to get started:

1. Select a group of objects.
2. Press Shift+A to apply auto layout.
3. Play with properties like alignment, constraints, and styles in the right panel.

But here's a pro tip: don't just Shift+A everything and call it a day. Think of auto layout as a super-powered group. Start with the smallest components and work your way up. This approach helps you create more complex layouts with nested auto layout frames.

A real-world example: Building an e-commerce card

Let's say you're creating a product card for an e-commerce website. Here's how you might approach it using auto layout:

1. Start with the button. Apply auto layout to your CTA text to create a button, then style it.
2. Add your product image and apply styling (like border radius).
3. Select the title and price text, then click Shift+A or click the + next to auto layout in the right panel. Figma will automatically create a horizontal layout since these elements are placed side by side. Figma is smart that way.
4. Want different spacing between the image and text? Select all text layers and create another auto layout frame (this creates a nested auto layout).
5. Combine all your auto layout frames by placing them in a vertical auto layout container.
6. Style your card by adding a background, adjusting padding, and applying any other visual properties.
7. Now you can copy-paste the card, update the content for different products, and they'll all maintain consistent spacing. Group these cards in another auto layout frame and you've got a responsive product listing!

This example shows how auto layout works to create responsive, editable designs. As the contents change, the layout adapts automatically.

Common auto layout pitfalls and how to avoid them:

1. Over-nesting layouts: creating too many nested auto layout frames (frames within frames within frames), leading to performance issues and hard-to-maintain designs. Keep nesting to 2-3 levels max. Break complex components into smaller, reusable pieces. Think in sections rather than infinite nesting.
2. Overusing auto layout: adding auto layout to every element, even when it's not the best solution. Regular frames work better for certain cases — like overlapping elements (stacked cards with depth), absolutely positioned elements (floating notifications or badges), and decorative elements (background patterns).
3. Text handling issues: not accounting for how text will grow or shrink, especially in buttons or cards. Always test your components with different text lengths, implement text truncation when needed, and set proper constraints to handle varying content.
4. Inconsistent sizing strategy: mixing fixed-width and flexible elements without proper planning can cause layouts to break at different screen sizes. Be intentional about choosing between Fill container, Hug contents, or fixed sizes. Create a consistent system and stick to it throughout your design.

Converting Figma designs to code with Visual Copilot

Now that you understand the power of auto layout, let's talk about something exciting: turning these well-structured designs into production-ready code automatically. This is where Visual Copilot, our AI-powered Figma plugin, comes into play.

When you use auto layout effectively, you're not just making your designs more maintainable — you're also creating a clear structural hierarchy that AI can understand and translate into code.

Visual Copilot excels at recognizing these auto layout patterns and converting them into appropriate code constructs:

• Vertical auto layout frames become flex containers with column direction
• Horizontal layouts translate to row-based flex layouts
• Spacing between elements is preserved with proper margins or gap properties
• Responsive behaviors are maintained through appropriate CSS properties
• Nested auto layouts become nested component structures in your framework of choice

The best part? Visual Copilot handles this conversion with a single click, supporting multiple frameworks (React, Vue, Svelte, Angular, Qwik, Solid, React Native) and styling solutions (CSS, Tailwind, Emotion, Styled Components).

It's particularly effective when your designs use auto layout consistently, as this creates a clear component hierarchy that translates naturally to code.

Conclusion

Auto layout in Figma represents a fundamental shift in how we create designs. Whether you're working with simple buttons or complex layouts, this awesome feature helps you determine the perfect spacing and alignment for every object in your design.

When structured thoughtfully, your auto layout components become the perfect blueprint for Visual Copilot to transform your designs into clean, efficient code. No more lost details in translation, no more back-and-forth about implementation.

Like any tool, it takes some practice to master, but once you get the hang of it, you'll wonder how you ever designed without it. The ability to quickly create and edit responsive layouts will significantly speed up your design workflow.

So go ahead, give auto layout a spin in your next project. Start small, think about the structure of your design, and before you know it, you'll be creating complex, responsive layouts with ease.

Play with different properties, experiment with nested frames, and see how auto layout inside your designs can transform your UI design process.

More Figma to code resources

• Dropdown in Figma to interactive code in 60 seconds
• Figma designs to interactive features using natural language
• Best Figma plugins for Developers
• Builder.io Figma plugin

Read the full post on the Builder.io blog

In this guide, we'll explain SSR, why you might want to use it, and how to implement it without pulling your hair out. We'll cover the basics, compare it to client-side rendering, and discuss some practical examples.

What is server-side rendering?

Fundamentally, SSR is about rendering your web pages on the server instead of in the browser. When a user requests a page, the server does all the heavy lifting and sends a fully rendered page to the client. Then, the client-side JavaScript takes over to make it interactive.

The server is doing the prep work in the kitchen, and the browser just has to plate and serve.

Here's a minimal Express.js example:

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App');

const app = express();

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html>
      <body>
        <div id="root">${html}</div>
        <script src="client.js"></script>
      </body>
    </html>
  `);
});

app.listen(3000, () => console.log('Server running on port 3000'));

From server to browser with fully rendered pages

When we talk about SSR delivering "fully rendered pages," it's important to understand what that actually means. Let's break it down:

What is a fully rendered page?

A fully rendered page is an HTML document containing all the content users would get when they first load the page. This includes:

1. The complete DOM structure
2. All text content
3. Image placeholders and other media elements
4. Initial styles

Here's a basic example:

<!DOCTYPE html>
<html>
  <head>
    <title>My SSR Page</title>
    <style>
      /* Initial styles */
    </style>
  </head>
  <body>
    <header>
      <h1>Welcome to My Site</h1>
      <nav><!-- Fully populated navigation --></nav>
    </header>
    <main>
      <article>
        <h2>Article Title</h2>
        <p>This is the full content of the article...</p>
      </article>
    </main>
    <footer><!-- Fully populated footer --></footer>
    <script src="hydration.js"></script>
  </body>
</html>

The difference between CSR

In contrast, a client-side rendered (CSR) initial HTML might be like this:

<!DOCTYPE html>
<html>
  <head>
    <title>My CSR Page</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

The CSR page relies entirely on JavaScript to populate the content.

Benefits of fully rendered HTML

1. Faster Initial Paint: The browser can start rendering content immediately.
2. Better SEO: Search engines read all your content without executing JavaScript.
3. Improved Accessibility: Screen readers and other assistive technologies can access content immediately.
4. Resilience: Basic content is available even if JavaScript fails to load.

The hydration process

After sending the fully rendered HTML, SSR applications typically go through a process called hydration:

1. The server sends the fully rendered HTML.
2. The browser displays this HTML immediately.
3. JavaScript loads and hydrates the page, adding interactivity.

// Simplified React hydration example
import { hydrateRoot } from 'react-dom/client';
import App from './App';

const domNode = document.getElementById('root');
hydrateRoot(domNode, <App />);

This process allows for fast initial loads while still providing the rich interactivity of modern web apps.

Remember, while SSR provides these fully rendered pages, it's not without trade-offs. The server does more work, and you'll need to handle the state carefully between the server and the client. However, for many applications, the benefits of fully rendered pages make SSR a compelling choice.

What's the difference between CSR and SSR?

Client Side Rendering (CSR) and Server Side Rendering (SSR) are two different approaches to rendering web pages. Here's a breakdown of their main differences:

Client-side rendering (CSR)

1. The server sends a minimal HTML file with a JavaScript bundle.
2. The browser downloads and runs the JavaScript.
3. JavaScript creates the page content and makes it interactive.

Pros:

• Smooth interactions after the initial load
• Fewer server resources are needed

Cons:

• Slower initial page load
• Potential SEO challenges

Server-side rendering (SSR)

1. The server creates the full HTML content.
2. The browser receives and displays the pre-rendered HTML quickly.
3. JavaScript then loads to make the page fully interactive.

Pros:

• Faster initial page load
• Better for SEO
• Works well on slower devices

Cons:

• It can be more complex to set up
• May use more server resources

Here's a simple visual comparison:

In essence, CSR works more in the browser, while SSR does more on the server. The choice between them depends on your project's specific needs, balancing factors like initial load time, SEO requirements, and server resources.

SSR and search engines: a match made in HTTP

Server-side rendering can have a big impact on how search engines see your site. Let's break it down:

1. Faster Indexing

Search engine bots are impatient. They want to see your content NOW. With SSR, your pages are ready to go when the bot comes knocking — no waiting around for JavaScript to load and render.

1. Content consistency

SSR ensures that search engines see the same content that users do. With client-side rendering, there's always a risk that the bot might miss some dynamically loaded content.

1. Improved Load Times

Search engines love fast sites. SSR can significantly cut down initial load times, which could give you a slight edge in rankings.

// Pseudo-code for search engine ranking
function calculateRanking(site) {
  let score = site.relevance;
  if (site.loadTime < FAST_THRESHOLD) {
    score += SPEED_BONUS;
  }
  return score;
}

1. Mobile-First Indexing

With Google's mobile-first indexing, SSR's performance benefits on slower mobile connections become even more important.

1. Social Media Previews

While not strictly a search engine feature, SSR makes it easier to generate accurate previews when your content is shared on social platforms. This can indirectly boost your SEO by increasing engagement and backlinks.

<!-- SSR makes it easier to include accurate meta tags -->
<meta property="og:title" content="Your Dynamic Title Here">
<meta property="og:description" content="Your Dynamic Description Here">

SSR is a powerful tool for SEO, but it's not the only factor. Content quality, relevance, and overall user experience are crucial in search engine rankings. SSR simply ensures that search engines can efficiently crawl and index your content, potentially giving you an edge in visibility and performance metrics.

How to actually do SSR

Implementing SSR doesn't have to be complicated. Let's cover at how to do it using Next.js, a popular React framework that makes SSR straightforward:

1. Set up a Next.js project.
2. Create server-side rendered pages.
3. Let Next.js handle serving the fully rendered HTML and client-side hydration.

Here's a simple Next.js example using the App Router:

// app/page.js
async function getData() {
  const res = await fetch('<https://api.example.com/data>')
  if (!res.ok) {
    throw new Error('Failed to fetch data')
  }
  return res.json()
}

export default async function Home() {
  const data = await getData()

  return <h1>Hello {data.name}</h1>
}

In this example:

• The Home component is an async function, allowing for server-side data fetching.
• getData() fetches the data we need.
• The component renders the data directly.

Next.js automatically handles the SSR process:

1. When a request comes in, Next.js runs this component on the server.
2. It waits for the data to be fetched.
3. It renders the component with the fetched data.
4. The fully rendered HTML is sent to the client.
5. Once the JavaScript loads in the browser, the page becomes interactive.

This approach gives you the benefits of SSR without having to manually set up a server or manage the rendering process yourself.

Higher-level SSR solutions

If you don't want to reinvent the wheel, there are several frameworks that handle SSR complexities for you. Here's a rundown of popular options across different ecosystems:

React

• Next.js: The most popular React framework with built-in SSR support.
• Remix: A full stack web framework that leverages React Router.
• Gatsby: Primarily a static site generator, but also supports SSR.

Vue

• Nuxt.js: The go-to framework for Vue applications with SSR capabilities.

Angular

• Angular Universal: The official SSR solution for Angular applications.

Svelte

• SvelteKit: The official application framework for Svelte with SSR support.

JavaScript (Framework-agnostic)

• Astro: Allows you to use multiple frameworks and supports SSR.
• Qwik: A new framework designed for optimal performance with built-in SSR support.

PHP

• Laravel: Offers SSR capabilities through Inertia.js or its own Livewire component.

Ruby

• Ruby on Rails: Supports SSR through tools like Stimulus Reflex or Hotwire.

Python

• Django: Can implement SSR using libraries like Django-Unicorn or HTMX.
• Flask: Can be configured for SSR, often used with extensions like Flask-SSE.

Each of these frameworks offers its own approach to SSR, often with additional features like static site generation, API routes, and more. The choice depends on your preferred language, ecosystem, and specific project requirements.

Deployment and caching

When deploying an SSR app:

1. Build both client-side and server-side bundles.
2. Run the SSR server as a background process.
3. Use a process monitor like PM2 or Supervisor to keep your server running.

Here's a basic deployment flow:

Don't forget about caching! Caching server-rendered pages can significantly reduce server load.

SSR with Builder.io

Builder.io provides support for server-side rendering (SSR) and static site generation (SSG) across all components and frameworks. This out-of-the-box functionality allows you to leverage the benefits of SSR and SSG without additional setup.

Key features

1. Framework Agnostic: Builder.io works with various frameworks that support SSR and SSG.
2. Automatic Optimization: Builder optimizes your content for performance, including code splitting and lazy loading of off-screen components.
3. Dynamic Rendering: You can render different content based on user attributes or A/B tests while maintaining SEO benefits.
4. Easy Integration: Builder provides SDKs and documentation to seamlessly integrate your existing projects.

Implementation example

Here's a basic example of how you might fetch and render content server-side with Builder and Next.js:

import { builder, BuilderComponent } from '@builder.io/react'

builder.init('YOUR_API_KEY')

export async function getStaticProps({ params }) {
  const page = await builder
    .get('page', {
      userAttributes: {
        urlPath: '/' + (params?.page?.join('/') || '')
      }
    })
    .toPromise()

  return {
    props: {
      page: page || null,
    },
    revalidate: 5
  }
}

export default function Page({ page }) {
  return (
    <BuilderComponent
      model="page"
      content={page}
    />
  )
}

Best practices

1. Ensure you're using a framework that supports SSR or SSG.
2. Follow your framework's guidelines for fetching data server-side when integrating Builder Pages or Sections.
3. Refer to the getAsyncProps README for more information on handling server-side data.

By leveraging Builder for SSR, you can combine the flexibility of a headless CMS with the performance benefits of server-side rendering, all while maintaining an easy-to-use visual editing experience.

Wrapping up

Server-side rendering (SSR) is a powerful approach in web development that can significantly enhance your application's performance, SEO, and user experience. Throughout this article, we've explored what SSR is, how it differs from client-side rendering, its impact on search engines, and practical implementation strategies using popular frameworks like Next.js.

We've also discussed the concept of fully rendered pages and examined various SSR solutions across different ecosystems. While SSR offers many benefits, it's important to consider your project's specific needs when deciding whether to implement it.

FAQ

Q: How does SSR affect my development workflow?

A: SSR can make development more complex, as you need to consider both server and client environments. You might need to adjust your build process and be cautious with browser-specific APIs.

Q: How does SSR impact my site's Time to Interactive (TTI)?

A: While SSR can improve initial content visibility, it might slightly delay TTI as the browser needs to load and hydrate the JavaScript after receiving the initial HTML.

Q: Are there any security considerations specific to SSR?

A: Yes, with SSR, you need to be more careful about exposing sensitive data or APIs on the server side. Always sanitize user inputs and be cautious about what data you include in the initial render.

Q: How does SSR work with authentication and personalized content?

A: SSR can work with authentication, but it requires careful handling. You might need to implement techniques like JWT tokens or server-side sessions to manage authenticated SSR requests.

Read the full post on the Builder.io blog

The best part? The code is clean, customizable, and ready to integrate into your project.

Let me show you how to do it.

The Process

Step 1: Exporting Figma Dropdown Menu

First, grab your design (if using mine, be sure to duplicate it to your drafts first, so you have full edit/plugins access).

Launch the **Builder.io Figma plugin** and hit the "Export to Code" button, and you'll be launched into Builder.io.

Step 2: Adding Interactivity with AI

Once in Builder, it's time to make your design interactive. Use this prompt:

when I click the button, toggle the menu and rotate the chevron

Hit enter and let the AI work its magic. It will add the interactivity for you while you sit back and relax.

Then, toggle quick preview (cmd+\ or ctrl+\) to verify that everything works as expected. You should see the menu toggle and the chevron rotate when you click the button.

Note: The Builder Visual Editor AI chat released with Visual Copilot 2.0 is currently in a rolling beta — meaning some users will have access now, and some will come soon. We add new users each week — so if you don’t have access just yet, request to be notified when your accent gets access

Step 4: Generating Production Code

When you're happy with the functionality, it's time to get the code:

1. Hit the "Develop" button
2. Click "Generate Code"
3. Tweak any options as needed (frameworks, styling, languages, etc.)

Builder supports many frameworks, like Vue, Svelte, Solid.js, as well as native outputs like SwiftUI, Flutter, and Jetpack Compose.

You can type to chat with the code to modify it in any way you like. You can also add custom instructions to customize even futher.

Step 5: Syncing the Code to Your Project

To get the code into your project:

1. Click "Sync Code"
2. Copy the provided command
3. Run it at the root of your project
4. And there you have it - your new React component with TypeScript and tests, ready to be committed to your repository.

And there you have it - your new React component with TypeScript and tests, ready to be committed to your repository.

What's Next?

Try this out with your own designs! Remember, AI is a powerful tool that can significantly speed up your development process, but it doesn't replace the need for engineering expertise.

Use trial and error to get a good feel for what this AI is good for. Use it to accelerate your workflow and focus on the more complex aspects of your projects.

Resources

• Figma file used in this tutorial
• Builder.io Figma plugin
• Get notified when you get full Visual Copilot 2.0 access

Give it a try - I can't wait to see what you build!

Read the full post on the Builder.io blog

And the best part is: I can export my creation as clean code across multiple files, including reusing your existing components in your codebase and/or design system.

React, Vue, Tailwind, SwiftUI, and many more outputs are supported, and everything is customizable.

Let me show you how to do it.

The process

Step 1: exporting Figma design dashboard

First, in Figma, launch the Builder.io Figma plugin in a design of your choice, for instance with the dashboard design I used.

Note: If you use the dashboard design file I did, you will likely have to duplicate it to your drafts first so you have full access:

Note: This plugin works the same in Dev mode too.

Once you have the plugin launched, select the Dashboard frame and click the Export to Code button, and you'll be launched into Builder.

If you don’t have a Builder.io account yet, you will be asked to sign up, which only takes 2 quick steps.

Note: If you use the same Dashboard design as I did, you will see a “Low auto layout usage” warning. Using auto layout for exported designs is a best practice, and without it your results might vary. In this case, this design imports pretty well without auto layout, so we can ignore it.

Step 2: adding context for the AI

Now that we’re in Builder, your design has been converted into code, and what shows in the Builder canvas is a preview of the resulting code.

This is cool and all, but it's a lot cooler to make this code actually do something!

In order to be able to do something useful, we’ll want to give the AI some context about us first.

For example, if you want to use data, where should the data come from? Is it a public resource or your own private API? What inputs and outputs can this API take?

Note: The Builder Visual Editor AI chat released with Visual Copilot 2.0 is currently in a rolling beta — meaning some users will have access now, and some will come soon. We add new users each week — so if you don’t have access just yet, request to be notified when your accent gets access

For my dashboard, I used these instructions. Feel free to copy and use them, including the API used:

We have an API that can list our users that works like:

https://user-api.builder-io.workers.dev/
https://user-api.builder-io.workers.dev/?page=2
https://user-api.builder-io.workers.dev/?sortBy=name.first
https://user-api.builder-io.workers.dev/?sortBy=location.city

the output looks like:

<output>
{
  "page": 1,
  "perPage": 10,
  "total": 100,
  "data": [
    {
      "gender": "female",
      "name": { "title": "Mrs", "first": "Aada", "last": "Ojala" },
      "location": {
        "street": { "number": 9896, "name": "Pyynikintie" },
        "city": "Loviisa",
        "state": "Tavastia Proper",
        "country": "Finland",
      },
      "picture": {
        "large": "https://randomuser.me/api/portraits/women/51.jpg",
        "medium": "https://randomuser.me/api/portraits/med/women/51.jpg",
        "thumbnail": "https://randomuser.me/api/portraits/thumb/women/51.jpg"
      },
    },
    ...
  ]
}
<output>

when adding tables of users include their images too. also make tables horizontal scroll on mobile

for loading states, give things a nice spinner

Notice that at the bottom I included a couple extra tips. For instance, I want the AI to generate tables with images in them, to make them horizontally scrollable on mobile, and be sure to use a nice loading spinner.

Instructions are infinitely customizable, so experiment with them! Use trial and error to find out what works best for you. With the right approach, they are incredibly powerful.

Note that you can also instruct the AI to use well known APIs without much guidance (like specific input/output examples). Some other fun ones to use and try:

• catfact.ninja: returns random cat facts
• dog.ceo: random dog images by breed
• pokeapi.co: Pokemon data (stats, moves, types)
• jservice.io: trivia questions from the Jeopardy! game show
• Open Notify: space data like the current location of the ISS and people in space.
• RandomUser.me: random user data (names, photos, addresses)
• Advice Slip API: random pieces of advice (https://api.adviceslip.com)
• Universities API: information on universities worldwide (http://universities.hipolabs.com/)
• Open Meteo: weather forecasts, historical weather, and current weather data

Can't find a public API that interests you there? Just try asking Visual Copilot, and it can recommend an API for your use case too.

Step 3: making it interactive

Creating the user table

In the case of our design, it wasn’t even complete!

But Builder can handle this as well — we can use AI to generate or update any part of the design, completely matching the existing aesthetic of the design, including components, design tokens, and so on.

In our case, you can click the Users table goes here text and enter the prompt:

replace this with a table of our users

Visually tweaking the table

We have a nice table, but let's start making some visual modifications. Builder.io is a full Visual Development Platform, so we can continue to select parts of the code and edit it visually.

For instance, we can go to the Style tab and change the width to Fill, and even drag to change the top margin size as well.

Play around all you like to get things pixel perfect.

Adding sorting

Now, we have a table connected to real data. But, how do we even know? For all we know, this was hard generated into the design.

So let's spice things up and add some real interactivity.

In our design, we have a couple buttons to choose different table sorts. Let’s click on that and use my favorite prompt:

make these buttons work

Yes, just from the context of the design and the API info we gave the system, Visual Copilot in this case can infer what these buttons should do, and hook up the functionality for us.

And voilà — we have working sort buttons!

You can try it out via the quick preview mode, for instance by hitting ⌘ + \ on mac, or Ctrl + \ on PC/Linux (yes, I mentioned Linux for all one of you).

In preview mode, you can click around your app just like a typical user. Try out your awesome new API-driven dashboard table!

Implementing pagination

Let’s now implement pagination. We’ll follow similar steps as before. Let's click the pagination buttons and use my favorite prompt:

make these buttons work

Disclaimer: A super vague prompt like that is not the general best practice, I just think it's fun that it works in this case.

Generally, be descriptive about what you want, and if the AI doesn’t get it right on the first time, give it feedback and have it try again. Working with AI is a trial and error process to get good results.

Step 4: generating production code

When you're happy with the functionality, let’s grab the code.

First, switch to Develop mode to show all of your code generation options.

You can pick between a variety of code frameworks, such as React, Vue, Angular, Svelte, React Native, SwiftUI, HTML, Qwik, Solidjs, Jetpack Compose, Flutter, and more.

For styling frameworks, built in support includes Tailwind, CSS, CSS modules, Styled Components, Emotion, and you can even add anything else not listed here using custom instructions.

Add custom instructions

You can also add completely custom instructions in natural language for any additional preferences you have — including frameworks, styling frameworks, testing frameworks not mentioned previously, as well as anything completely custom — like stylistic preferences, libraries you use, or even samples of your existing code so your code can be reused or the AI can match your coding style.

In my case, I love React Query, so I have this custom instruction saved for all code generations so that React Query is always used for data fetching:

use @tanstack/react-query for all data fetching

Generate the code

When we’ve got things setup the way we like, we can just click Generate Code to get our code.

Keep in mind you can always change code after the fact too — by chatting to make modifications, as well as by updating your custom instructions and generating again.

This process can take trial and error to get exactly right—- but is worth it to make sure the system is outputting code just like you and your team would write.

And remember, the AI can respond to nearly any kind of feedback. If there is anything that makes you say “no I would’ve written this differently”, just tell the system.

Step 5: getting the code into your project

Now what good is code if it's not in your codebase. I got u fam don’t doubt me so much.

1. Click Sync Code.
2. Copy the provided command.
3. Run it at the root of your project.

Yes, yes I know I need to update Cursor.

And there you have it — the dashboard code, with functionality, tests, and reusable components is yours!

Bonus: Map Your Components

This is great and all — but what if you have a design system of components already?

Ideally, we’d want to reuse those components when importing and generating, including any other components local to our codebase that we typically build with.

For instance, here is an example of code I generated using the Cloudscape design system:

Fear not, Builder supports this as well. But that is a topic for another post, but you can visit the docs in the meantime and try it out yourself.

What's Next?

Try this out on more designs, code, and APIs!

Remember: AI is a tool. It doesn’t replace engineering work, but when used right it sure as heck an accelerate it. AI will be good at some things, and not good at others. The trick is to experiment — use trial and error and find what works great for you and it can be your new secret superpower.

If you’d like more use cases and even more ideas on what you can accomplish with Visual Copilot, read Introducing Visual Copilot 2.0: Design to Interactive.

Give it a try — I can’t wait to see what you build!

Resources

• Figma plugin for Builder.io
• Dashboard Figma design
• Get notified when you get full Visual Copilot 2.0 access
• Get a demo from the Builder.io team

Useful docs

• Import from Figma
• Add interactivity with AI
• Generate code (+ with custom instructions)
• Reuse your existing design system and components

Read the full post on the Builder.io blog

Now, with AI technology becoming more advanced, it's time to leverage it as part of the solution to this challenge. At Builder.io, we've done just that with Visual Copilot. In this blog post, we'll explore how converting Figma designs to React Native code using our AI-powered toolchain can save hours of manual work and streamline the workflow for mobile app development.

What is Figma?

Figma is a collaborative interface design tool with an emphasis on real-time collaboration. It's known for its user-friendly interface and strong design capabilities, making it a favorite among designers. Figma components and design files form the basis for creating pixel-perfect designs and prototypes which are crucial for a seamless handoff to development teams.

One of Figma's powerful features is its dev mode, which means developers can inspect designs and extract valuable information for implementation. Many teams use Figma to create UI kits and design systems for their projects. Figma's extensibility through plugins further enhances its capabilities, allowing users to customize their workflow.

What is React Native?

React Native is an open-source mobile application development framework created by Facebook that enables developers to build mobile apps for iOS and Android using JavaScript and React. It allows for cross-platform development, meaning you can write code once and deploy it on both major mobile platforms, significantly reducing development time and resources. With more than 100k GitHub stars and a huge community, it is one of the leading frameworks for mobile app development.

The framework uses native components and the platform's standard rendering APIs, resulting in apps with a native look and feel and generally better performance compared to hybrid apps. React Native leverages the popular React library, making it accessible for web developers familiar with React. It also offers features like hot reloading for real-time code changes and provides JavaScript interfaces for accessing platform-specific APIs, allowing developers to tap into device capabilities like cameras and sensors.

Visual Copilot: AI-powered Figma to React Native plugin

At Builder.io, we've created Visual Copilot — an AI-powered Figma to code toolchain that leverages AI to accurately convert Figma designs into clean, efficient React Native code.

One-click conversion

Seamless integration

Customizable output

Styling support

Cross-platform compatibility

With React and Angular, Visual Copilot also supports mapping components and design tokens in a Figma design file to UI components in code.

How Visual Copilot uses AI to generate clean React Native code

The core of Visual Copilot is built on advanced AI models and a specialized compiler:

1. Initial AI Model: Trained on millions of design-to-code data points, our initial model transforms flat design structures into hierarchical code representations, even for complex layouts without auto layout.
2. Specialized Compiler: Our open-source compiler, Mitosis, takes the structured hierarchy from the AI model and compiles it into React Native code, ensuring proper component structure and styling.
3. Fine-tuning LLM: A finely-tuned Large Language Model (LLM) refines the code to match React Native best practices, your specific styling preferences, and any custom requirements you may have.

This multi-stage process ensures that the generated code is not just functional, but also adheres to best practices and your team's coding standards.

Converting Figma designs to React Native code

Getting started with Visual Copilot is straightforward:

1. Launch the Visual Copilot Figma plugin.
2. Select a layer in your Figma file and preview the selected layer.
3. Click the “Export to code” button.
4. Review the generated code in the preview window.
5. Copy the code into your React Native project.
6. Make any necessary adjustments for specific React Native functionalities or custom requirements.

Best practices for using Figma with Visual Copilot

To get the most accurate and efficient conversions, follow these best practices when designing in Figma:

1. Use auto layout: Implement Figma's auto layout feature to create responsive designs that translate well to React Native's flexbox-based layout system.
2. Name layers meaningfully: Use clear, descriptive names for your layers and components. This helps our AI understand the purpose of each element and generate more accurate code.
3. Use components: Leverage Figma's component system to create reusable UI elements. This translates well to React Native's component-based architecture.
4. Consider platform differences: While designing, keep in mind the differences between iOS and Android. Our tool will try to generate platform-specific code where necessary.
5. Organize your designs: Group related elements and use a clear hierarchy in your Figma files. This organization will be reflected in the generated React Native component structure.
6. Use vector networks for icons: When possible, use vector networks for icons and simple illustrations. These translate more efficiently to React Native's SVG components.
7. Define images explicitly: For complex designs, use Figma's export feature to help the AI model recognize elements as an image or an icon.
8. Minimize overlaps and intersections: Align boxes only with related components and avoid unnecessary overlapping to prevent undesired results.
9. Avoid translucent effects: Stick to fully opaque colors, as transparency can be challenging for AI to interpret accurately.

Conclusion

Visual Copilot represents a significant leap forward in bridging the gap between design and development in the React Native ecosystem. By leveraging AI to automate the conversion of Figma designs to React Native code, we're enabling developers to focus on what truly matters: creating exceptional mobile experiences.

Whether you're working on a startup MVP or a large-scale enterprise application, Visual Copilot can significantly reduce your development time, streamline your workflow, and help you bring your mobile app ideas to life faster than ever before. We're excited to see how it will transform the mobile development landscape, making the journey from pixel-perfect designs to fully functional React Native apps smoother and more efficient than ever before.

Read the full post on the Builder.io blog

Developers spend hours implementing each interaction. Designers watch their vision get lost in translation. Product managers juggle timelines as simple UI changes turn into week-long projects.

Today, we're changing that forever by bringing our AI Assistant, Visual Copilot, to the Builder Visual Editor — enabling you to make Figma designs interactive with natural language, using your actual code, data, and APIs.

Real data, real APIs, real features

But it goes way beyond basic interactions. Unlike other AI tools, Visual Copilot isn't generating static code or isolated components.

It understands your entire tech stack. From creating complete data tables to adding advanced features like sorting and pagination – all while working with your real data.

Interactive designs from natural language

Select any element and say what you want. "Turn this FAQ section design into an interactive accordion" and watch as static design content transforms into a smooth, collapsible interface with production-ready code.

No coding required, just clear instructions.

Sync design changes to code

When designers update their Figma designs, merging those changes into your customized code base can be challenging.

Visual Copilot makes it seamless – intelligently syncing design updates while preserving your code edits. One click, and changes flow straight to production, no manual reconciliation needed.

Your design system automated

Colors, typography, spacing, components – Visual Copilot understands and enforces your design system automatically.

Whether your components are from your design files or generated by Visual Copilot, they're implemented exactly as intended, maintaining your brand's look and feel.

No more generic AI designs.

Publish without bottlenecks

Update landing pages, change layouts, or modify pricing tables in minutes. Your marketing team gets pixel-perfect, on-brand results while developers focus on complex features.

Even better - you can use the AI to personalize your site or app to different audiences, and publish updates (with approval workflows of course!) in a click.

Everyone moves faster, with complete control over when changes go live.

Want to watch the full launch event? Check out a sneak below and view in its entirety here.

Filling the space between design and coding tools

After seeing all these capabilities, you might wonder – what exactly is happening here? It's not exactly designing, though we're using your design tokens and Figma components. It's not exactly coding either, even though we're using your code components and APIs.

It’s a new type of activity emerging in the space between design and development.

This is a Visual Development Environment – a tool that sits in the space between design and development.

Because you can completely harness it with natural language, it’s not just for designers or developers; it’s for everyone in your organization.

The power of design, code, and business context

Unlike other AI tools that generate isolated components or demos, Visual Copilot is deeply integrated with your entire product:

• Your design context: It understands your Figma components, design tokens, and documentation
• Your code context: It knows your code components, coding standards, and development patterns
• Your business context: It connects to your APIs, data models, and business logic

This means describing complex features in just a few words gets you exactly what your team would build – using your design system, following your standards, connected to your services.

More speed, more fun, better products

Our goal is to automate the grunt work, so you and your team can focus on the impactful work that helps you build better products, faster.

By reducing tedious tasks, we increase the time spent on enjoyable, creative work.

Faster iteration cycles mean more opportunities to test, learn, and refine, ultimately leading to superior products.

Get Started with Visual Copilot 2.0

• The new Visual Editor UI is available now for all Builder users (sign up here)
• Visual Copilot features in the Visual Editor are rolling out gradually to all customers starting today
• Code Sync capabilities will be released soon

Sign up to get notified when you get beta access to Visual Copilot for the Visual Editor.

Read the full post on the Builder.io blog

In this article, we'll break down what design systems are and how they work. We'll cover the core components, walk through the process of building one, and look at some tools that can help. Whether you're just curious about design systems or thinking of implementing one, this should give you a solid overview of what's involved.

What is a design system?

A design system is more than just a style guide or a component library. It's a comprehensive set of standards, documentation, and reusable components that help teams build more consistent and efficient user interfaces.

Here's what you'll typically find in a design system:

• Reusable UI components: Think buttons, forms, modals, and other common UI elements.
• Design patterns: Standardized solutions for common UX problems.
• Style guides: Documentation on typography, color usage, spacing, and other visual elements.
• Best practices: Guidelines on how to use components and apply design principles.
• Design tokens: Variables for storing visual design attributes.

A design system serves as a single source of truth for your application's UI. It bridges the gap between design and development, ensuring everyone's on the same page.

Why do developers care about design systems?

You might be wondering why you should invest time in a design system. Here are some concrete benefits:

1. Consistency: No more subtle differences between components across your app. A design system ensures that a button looks and behaves the same way everywhere it's used.
2. Efficiency: Instead of coding the same components from scratch for each project, you can reuse pre-built, tested components. This can significantly speed up development time.
3. Better teamwork: Design systems provide a shared language between designers and developers. This reduces miscommunication and speeds up the handoff process.
4. Scalability: A design system helps maintain consistency and manageability as your application grows. It's much easier to update a single component in your design system than to find and update it across a large codebase.
5. Quality control: Components in a design system are typically well-tested and refined. This leads to fewer bugs and a more polished final product.
6. Accessibility: By baking accessibility standards into your design system, you ensure that all parts of your application meet these standards by default.
7. Brand cohesion: A design system helps maintain a consistent brand identity across all parts of your application or even across multiple applications.

The building blocks of a design system

Let's review the core components of a design system:

Pattern Libraries

Pattern libraries are collections of reusable solutions to common design problems. They're not just about visual design; they also encompass interaction patterns and UX best practices.

For example, a pattern library might include:

• A standard way to structure navigation menus
• Best practices for form validation and error handling
• Conventions for data visualization

These patterns help create a consistent user experience across your application. They're handy for complex interactions in multiple places in your app.

Visual Elements

Visual elements form the foundation of your design system's aesthetics. They include:

• Typography: This goes beyond just choosing fonts. It includes guidelines on font sizes, line heights, and typographic scale.
• Color palette: This isn't just a list of colors, but rules about how and when to use each color. It might include primary and secondary colors and rules for text colors, background colors, and accent colors.
• Spacing and layout: Consistent spacing is crucial for a polished UI. Many design systems use a standardized spacing scale.
• Iconography: Guidelines for icon style, size, and usage.

These elements work together to create a cohesive visual language for your application. Google's Material Design is a comprehensive example of how these elements can be defined and documented.

Reusable Components

At the heart of any design system are reusable components. These are the LEGO blocks of your UI:

• Basic elements (buttons, inputs)
• Complex widgets (date pickers, modals)
• Layout components (grids, cards)

Good reusable components are:

1. Modular: They work independently.
2. Customizable: They adapt to different contexts.
3. Well-documented: They come with clear usage guidelines.

Why they matter:

• Consistency: Everyone uses the same building blocks.
• Efficiency: No reinventing the wheel for common UI elements.
• Easier maintenance: Update once; changes apply everywhere.

When building components, consider all states (hover, disabled, etc.) and make them responsive. Here's a simple example of a reusable button in React:

const Button = ({ onClick, disabled, children, variant = 'primary' }) => (
  <button
    className={`button button--${variant}`}
    onClick={onClick}
    disabled={disabled}
  >
    {children}
  </button>
);

Remember, a good component library evolves with your team's needs. Regular reviews and updates keep your components relevant and valuable.

Building your own design system

Creating a design system is a significant undertaking but pays dividends in the long run. Here's a more detailed look at the process:

1. Audit what you've got: Start by analyzing your existing UI. Look for patterns and inconsistencies. This will help you identify what components you need and where you can standardize.
2. Define your principles: What core values should guide your design decisions? These might include things like clarity, efficiency, or accessibility.
3. Create visual elements: Develop your color palette, typography, spacing scale, and other foundational elements. These will inform the design of your components.
4. Build your component library: Start with the most commonly used components. For each component, consider different states (hover, active, disabled) and variations (size, color).
5. Document everything: Clear, comprehensive documentation is crucial. Include usage guidelines, code examples, and explanations of when to use each component.
6. Iterate: A design system is never truly finished. Gather feedback from your team and users, and continuously refine and expand your system.

Remember, you don't have to build everything at once. Start with the most critical elements and expand over time.

Accessibility matters

Accessibility shouldn't be an afterthought. By incorporating accessibility into your design system, you ensure that all parts of your application are usable by as many people as possible.

Your design system should:

• Include specific accessibility guidelines for each component
• Ensure color contrast ratios meet WCAG standards
• Provide keyboard navigation support
• Include guidelines for writing accessible content

Making your application accessible isn't just about compliance—it's about creating a better user experience for everyone.

Teamwork makes the dream work

A design system is a collaborative effort that bridges the gap between design and development. To be successful, it should:

• Serve as a shared language understood by all team members
• Facilitate collaboration between designers, developers, and other stakeholders
• Be open to contributions and feedback from the entire team

Consider meeting regularly to discuss the design system, gather feedback, and plan updates. This helps ensure the system remains relevant and useful to all team members.

Gaining adoption of your design system

Implementing a design system is a significant undertaking. Here's a more detailed approach:

1. Start small: Begin with a few key components and expand gradually. This allows you to refine your process and demonstrate value quickly.
2. Get everyone on board: Ensure all stakeholders understand the value of the design system. This can include presentations, workshops, or one-on-one discussions.
3. Train your team: Provide resources and support to help everyone use the system effectively. This might include documentation, tutorials, and hands-on training sessions.
4. Monitor adoption: Track how the design system is used and address any challenges. Tools like analytics and code linting can help with this.
5. Iterate and improve: Continuously gather feedback and refine the system. Be prepared to make changes based on real-world usage and evolving needs.

Implementation is an ongoing process. Be prepared to adapt and evolve your approach over time.

Builder and design systems

Design systems promise consistency and efficiency, but implementing them effectively can be challenging. Builder addresses common pain points with innovative solutions:

• Adoption: Builder's Visual Editor makes integration frictionless by bridging the gap between design and development.
• Multi-Framework Support: Mitosis, an open-source tool, allows for the writing of components once and compiling them into multiple frameworks.
• Design-to-code Sync: Features like component mapping and automated code generation help maintain consistency between designs and implementation.
• Consistency Maintenance: Automated propagation of design system changes across codebases helps maintain uniformity while allowing for evolution.

By tackling these challenges, Builder.io's platform streamlines the entire process from design to production, making design systems more accessible and effective for teams of all sizes.

Tools to get the most out of your design system

There are many tools available to help create and manage design systems:

• Figma for collaborative design: Allows designers and developers to work together in real-time.
• Storybook for building component libraries: Provides a sandbox to develop and test UI components in isolation.
• Zeroheight for documentation: Helps create comprehensive, easy-to-navigate documentation for your design system.

These tools can streamline the process of creating, implementing, and maintaining your design system. Choose tools that integrate well with your existing workflow and tech stack.

Keeping it fresh

A design system is never truly "finished." To keep it relevant and effective:

• Regularly review and update components: As your application evolves, so should your design system.
• Solicit feedback from users and team members: They use the system daily and can provide valuable insights.
• Keep up with design trends and technological changes: While you shouldn't chase every trend, maintaining a modern and relevant system is important.
• Document changes and communicate updates to the team: Make sure everyone knows about new features or changes to existing components.

By treating your design system as a living document, you ensure it continues to meet the changing needs of your organization and users.

Wrapping up

A design system is a powerful tool for creating consistent, efficient, and scalable user interfaces. While it requires an initial investment of time and resources, the long-term benefits of improved consistency, efficiency, and collaboration make it worthwhile for any organization serious about digital experiences.

Remember, a successful design system evolves with your organization, continually adapting to meet new challenges and opportunities in the digital landscape. By embracing the concept of a design system, you're not just improving your current products — you're setting the stage for more efficient and effective development in the future.

Read the full post on the Builder.io blog

Enter visual editing — a tipping point that's shaking up how we build and manage digital experiences. Bringing together the functionality to work with your existing components, design systems, and data sources, these newly revamped visual environments are catching the attention of entire digital teams and their leaders.

From WYSIWYG to headless (and back again)

Let's rewind a bit. Content management systems (CMSs) were originally created so non-technical folks could update websites without having to write code. You'd get a nice WYSIWYG editor to format text, upload images, maybe even set up some basic e-commerce functionality. Life was good.

As digital needs grew more complex, we saw the rise of Digital Experience Platforms (DXPs) - souped-up CMSs that could handle personalization, A/B testing, and multi-channel content delivery. But then mobile apps and IoT devices exploded onto the scene, and even DXPs couldn't keep up.

That's when headless CMSs became the tool of choice. They gave developers the flexibility to use whatever frontend tech they wanted, delivering content across any channel. The downside? They kicked non-technical users to the curb. Suddenly, marketers and designers were back to relying on developers for every little change.

The visual editing renaissance

Here's where things get interesting. Visual editing is back — but with a twist. Instead of being tied to a specific tech stack, new visual editors work with your existing components, design systems, and data sources.

Steve Sewell, the founder of Builder.io, explained this lightbulb moment in a recent conversation:

"I was working at a company called ShopStyle, and we felt the pains firsthand. We completely rebuilt this website — all microservices-based, all decoupled, all headless everything. But we hit a really important issue: while the technology was great, and the developers could move much faster, it turned out that e-commerce is a much more marketing-driven business than technology-driven."

The marketing team was stuck. They couldn't quickly experiment, launch new pages, or run A/B tests without going through developers. What used to take minutes now took weeks or (gasp) months.

Luckily, a new wave of visual editing is bringing marketers back into the fold and empowering them to take back control of their workflows so that they can ship and iterate on web and mobile experiences faster than ever.

Visual editing is more than just pretty interfaces

A truly powerful visual editor isn't just a fancy interface bolted onto a CMS. It's the backbone of a visual development platform. Here's what sets the best ones apart:

1. Real drag-and-drop editing on a direct canvas
2. AI-powered content generation and manipulation
3. Seamless import from design tools like Figma
4. Options to add interactivity and connect to data sources
5. Native A/B testing and personalization

The key is finding a balance between flexibility and guardrails. You want marketers and designers to be able to create and iterate independently, but within the constraints of your brand guidelines and tech stack.

How visual editing helps teams collaborate

Visual editing platforms are breaking down the silos of how different teams work together on digital experiences. Let's dive deeper into how these tools are fostering collaboration for every role in the development process.

Designers often struggle with the gap between their vision and the final implemented product. The right visual editing tools allow them to:

• Import their Figma designs directly into the visual editor
• See how designs render using real components and data
• Make adjustments in real-time to account for responsive behavior
• Ensure designs adhere to the established design system and brand guidelines

Marketers often feel constrained by traditional CMSs or dependent on developers for changes. Visual editing empowers them to:

• Create and test new pages or variations without waiting on developer resources
• Run A/B tests and personalization experiments quickly
• Make real-time updates during campaigns or promotions

Developers often get bogged down with minor content changes and updates. Visual editing frees them to focus on more impactful work:

• Build reusable components and integrations
• Implement complex functionality and performance optimizations
• Maintain control over the tech stack and architecture

Product managers can use visual editing platforms to:

• Quickly prototype and test new features or user flows
• Gather data on user interactions without full development cycles
• Iterate rapidly based on user feedback

Visual editing platforms don't just empower individual teams – they create new opportunities for cross-functional collaboration:

1. Shared Language: By working within the same visual environment, teams develop a common understanding of how designs translate to functional components.
2. Real-Time Collaboration: Multiple team members can work on the same page or experience simultaneously, seeing changes update in real-time.
3. Approval Workflows: Built-in governance features ensure that the right stakeholders review and approve changes before they go live.
4. Version Control: Teams can track changes, compare versions, and roll back if needed – similar to how developers use Git for code.

Supercharging visual editing with AI

As if visual editing wasn't cool enough on its own, AI is taking things to a whole new level. Imagine being able to:

• Generate entire page layouts based on a simple text description
• Automatically create personalized content variations for different user segments
• Optimize your designs for conversion using machine learning insights

Steve Sewell explains how AI is enhancing visual editing capabilities:

"AI copilots can make people who are developers more efficient developers, but with the right tooling, they can also make people who have no development experience become developers as well. That's the step function impact."

This means that AI isn't just making existing processes faster - it's fundamentally changing who can create and modify digital experiences. Some exciting applications include:

1. Natural Language Interfaces: Instead of learning complex UIs, users can describe what they want in plain language. For example, "Create a shoppable gift guide based on my Salesforce Commerce Cloud product catalog."
2. Automated A/B Testing: AI can generate multiple variations of a page or component, then automatically test and optimize based on user interactions.
3. Dynamic Personalization: AI can analyze user data in real-time to adjust content, layout, and messaging for each individual visitor.
4. Code Generation: For more complex needs, AI can generate production-ready code that adheres to your specific tech stack and design system.

As visual editing platforms continue to integrate more advanced AI capabilities, we're likely to see even more powerful tools for creating, optimizing, and personalizing digital experiences — all without requiring deep technical expertise.

Real-world impact

Companies using advanced visual editing platforms, plus the power of AI, are seeing serious results:

• Anheuser-Busch uses Builder's full no-code visual editing to support over two dozen enterprise-scale sites, significantly reducing developer workload while maintaining brand consistency.
• Fabletics switched from a headless CMS to Builder.io, making their marketing team's workflows 75% more efficient. They can now make changes and view them instantly within the visual editor, leading to faster time-to-market for new products and updates.

The future of visual editing

As visual editing platforms mature, we're likely to see even more exciting developments:

1. AI agents that can autonomously create, test, and optimize content based on business goals and user data.
2. Deeper integration with design tools, allowing for a more seamless handoff between design and development.
3. More sophisticated personalization capabilities, creating truly tailored experiences for each user.
4. Improved collaboration features, making it easier for cross-functional teams to work together on digital experiences.

Empowering everyone to create

Visual editing isn't about replacing developers or designers. It's about giving everyone the tools to bring their ideas to life quickly and efficiently. By breaking down the barriers between teams and automating repetitive tasks, visual editing platforms are freeing up time and resources for true innovation.

We don't want to be in a position where team A has metric A that they're trying to solve for and team B has metric B that they're trying to solve for and team A relies on team B to solve metric A. That's a nightmare. What leaders at large organizations are looking for are solutions that allow their designers to design, marketers to market, and developers to develop.

The future of web development isn't about choosing between developer freedom and non-developer empowerment. It's about finding tools that give everyone the power to create, while still maintaining the consistency and quality that modern digital experiences demand.

So, whether you're a developer tired of making button color changes, a designer frustrated with the gap between mockups and reality, or a marketer dreaming of true creative freedom — visual editing might just be the tipping point you've been waiting for.

Read the full post on the Builder.io blog

• How SEO and its strategies have changed
• The identity crisis SEO is facing because of these changes
• Key Google updates and their effects
• Improvements made to programmatic SEO
• The best SEO tools
• How Builder creates SEO-friendly apps and sites

Let’s dive in. Starting with some cliches, so we can get that out of the way.

SEO is dead… blah blah blah

I know, I know, "SEO is dead" is super cringe at this point that it almost hurts to type it. But everywhere I turn, it’s there to scare you into thinking SEO isn’t important anymore. Rest assured, I’m here to debunk that theory.

Here’s an interesting market trend from Jake Ward at Contact Studios that depicts the death of SEO for the past 27 years. He also shares the reality of things with 8.5B daily searches and SEO being a $1B industry.

This constant cycle of "X is dead, long live Y" in tech can be exhausting. It creates a feeling similar to FOMO or imposter syndrome, that nagging feeling that you're somehow missing out or faking it -- even when you've put in the work.

Developers understand imposter syndrome, as a developer I feel this too. Take React, for instance. You spend months getting comfortable with it, building components, managing state, and feeling pretty good about your skills. Then suddenly, everyone's talking about Vite and how it's the next big thing. Should you drop everything and learn Vite? Is React dead now?

This constant cycle of learning and re-learning can make even seasoned developers feel like they're always one step behind.

SEO's kind of like that. It keeps evolving, but the core principles stick around. With all these changes, it creates a sense of imposter syndrome. You think you’ve finally figured the game out, and then the next thing comes along. But It's not about gaming the system. It's about creating solid, valuable content that people actually want to read or use. That's still super important, AI or no AI.

So, no, SEO isn't dead. It's just growing up, and we need to grow with it. Let's look at how AI is shaking things up in the SEO world and what that means for anyone trying to get their content seen online.

How AI is being utilized in SEO practices

AI is a game changer; just kidding! But in reality, AI is quickly becoming a valuable tool for SEO experts.

Search engines use AI to understand user intent better, shifting the focus from exact keyword matches to valuable content creation.

AI tools are helping with various aspects of SEO:

• Writing assistance for idea generation and content outlining
• Data analysis for quicker, more accurate insights
• Technical SEO support for routine tasks like meta description generation and error identification
• Competitor analysis, providing deeper insights into rival strategies and market gaps

AI is expanding strategies that SEOs didn’t have to think of prior. The ideal situation is the ability to effectively use AI tools, combined with human creativity and strategic thinking, to expand your reach.

SEO strategy before and after AI

Pre-AI SEO strategy:

• Keyword-centric: Heavy focus on exact-match keywords, keyword usage, and keyword difficulty
• Link building: Emphasis on quantity over quality of backlinks
• Content creation: Often prioritized monthly search volume over depth
• Technical SEO: Basic on-page optimization and site structure
• Manual analysis: Time-consuming data interpretation and competitor research

Post-AI SEO strategy:

• Intent-focused: Understanding and matching user search intent
• Produce high-quality content: Emphasis on comprehensive, expert-level content
• Natural language processing: Optimizing for conversational queries and voice search
• AI-powered tools: Utilizing machine learning for target keyword research and content optimization
• Predictive analytics: Using AI to forecast trends and adjust strategies proactively
• Automated personalization: Tailoring content and user experience based on AI insights
• Continuous adaptation: Regularly updating strategies to align with AI-driven algorithm changes
• AI visibility optimization (AIVO): Making content more visible and understandable to AI search engines

AIVO is the strategy I’m really interested in. As AI search engines like ChatGPT, Google Gemini, Claude, and Perplexity start eating into the typical search engines, we need to start thinking of how brands are surfacing there.

The key shift here is from manipulating search engine algorithms to focusing on user experience and content value. AI has made search engines smarter at understanding context and user intent, pushing us to create genuinely helpful, high-quality content rather than just optimizing for keywords.

What about Programmatic SEO?

Programmatic SEO is a way to automatically create many web pages, each targeting specific search terms. It's like having a robot write hundreds or thousands of articles for you, but each one is tailored to a particular topic or location.

Here's the basic idea:

1. Collect a bunch of data (like product info or city names)
2. Make a template for your pages
3. Use code to fill the template with your data, creating many pages
4. Check that the pages make sense
5. Publish them all to your website

It's great for businesses with:

• Tons of products
• Services in many locations
• Large databases of information

The good, the bad, and the AI of programmatic SEO

The Good:

• Efficiently targets long-tail keywords
• Scales content creation for large websites
• Provides useful information for niche queries
• Helps businesses with large catalogs or location-based services

The Bad:

• Risk of creating low-quality, repetitive content
• Can lead to thin content if not done carefully
• Might be seen as manipulative by search engines
• Can flood search results, potentially pushing out smaller, manual content creators

How AI is improving programmatic SEO:

• Generates more natural, varied content that reads like human-written text
• Uses advanced data analysis to identify valuable keyword opportunities
• Personalizes content based on user intent and preferences
• Implements real-time optimization and quality control
• Integrates multi-media elements more effectively
• Enhances content relevance and readability

The key is balance. AI is helping programmatic SEO evolve from a potential spam tactic to a sophisticated content strategy. When done right, it can provide valuable, tailored content for users searching for specific information.

Google updates impact on search engines

Back in September 2023, Google released a significant update - “Helpful Content,” which altered SEO practices. Here's how it has affected the industry:

• User-first content: Google began prioritizing content that provides genuine value to users rather than content solely optimized for search engine results.
• Ranking shifts: Many sites, especially those with content primarily created for SEO, experienced noticeable drops in organic traffic and search rankings.
• Long recovery period: Some sites affected by this update have struggled to regain their previous positions, with recovery efforts continuing well into 2024.
• Core system integration: In March 2024, Google integrated the helpful content system into its core ranking system, solidifying its importance.
• Emphasis on expertise: Content demonstrating first-hand experience and deep knowledge has been increasingly favored.
• AI content considerations: The focus shifted to content helpfulness, regardless of the creation method. However, mass-produced AI content for SEO purposes has often underperformed.
• Strategy evolution: SEOs have had to prioritize creating genuinely helpful, original content over traditional keyword optimization tactics.

The helpful content update and subsequent changes sparked controversy in the SEO community. Google's vague guidelines and limited communication frustrated site owners, leaving them unsure of how to recover. AI-generated content and forum posts in search results raised questions about the update's effectiveness. These issues have led to ongoing debates about Google's algorithmic approach and its impact on content creators and searchers.

However, this update pushed the SEO industry towards a more user-centric approach, aligning SEO strategies more closely with content marketing principles. While challenging for many, it has aimed to improve the overall quality of search results for users.

AI Overviews & Featured Snippets

As AI gets smarter, it changes how we do SEO. One big change is the rise of Featured Snippets and AI Overviews. These are like the cool kids of search results - they get special treatment and prime real estate on the search page.

What are AI Overviews?

AI Overviews are a newer feature from Google. They're like feature snippets on steroids. Instead of pulling info from a single source, AI Overviews synthesize information from multiple high-quality sources to give a comprehensive answer to a query. They're designed to provide a quick, authoritative summary without the need to click through to multiple websites.

To optimize content for AI Overviews:

1. Write really good, in-depth content. Cover all the angles.
2. Stick to facts. Don't make stuff up.
3. Organize your content well. Use headings and lists.
4. Build your site's reputation over time.
5. Keep your content up-to-date.
6. Generate schema markup to help Google understand your content.
7. Focus on answering questions people are asking.
8. Show you know what you're talking about.

Remember, there's no magic trick here. It's mostly about creating great content that's useful to people. If you're doing that, you're on the right track for both regular SEO and these new AI features.

Featured snippets, on the other hand, are those boxes at the top of search results that give you a quick answer. They flip the script on regular results by showing the description first. You might also spot them in the "People Also Ask" section.

Here's a quick breakdown of how feature snippets work:

Some key things to know about featured snippets:

• Google picks them automatically based on what people are searching for.
• Clicking on one takes you straight to the relevant part of the page.
• If you don't want your content in snippets, you can opt-out with some technical tweaks.
• There's no secret handshake to get your page chosen as a snippet - it's all about the quality of your content.

With AI getting better at understanding context and what users want, these snippets are getting smarter, too. This means creating clear, to-the-point content that answers questions directly is more important than ever for SEO.

Optimizing content for Featured Snippets

While Google doesn't allow direct markup for featured snippets, you can increase your chances:

1. Answer specific questions clearly and concisely
2. Use structured data and clear formatting (headers, lists, tables)
3. Create high-quality, authoritative content
4. Keep information up-to-date and comprehensive
5. Focus on satisfying user intent

Remember, Google ultimately decides which content to feature based on what best serves user needs. These strategies can help, but there's no guarantee of being featured.

The best AI SEO tools

Here are some standout AI-powered SEO tools that can help in various ways, from AI writing tools to auditing a website's performance.

Content assistants

1. Surfer SEO: combines AI-powered content creation with SEO optimization, allowing users to generate high-quality, ready-to-rank articles in minutes while analyzing competitors and optimizing for search intent across multiple languages. Side note - you can connect your Google Search Console, which will help with internal linking as you generate content.
2. Clearscope: an advanced SEO tool that uses artificial intelligence to analyze top-ranking content, provide keyword suggestions, and offer real-time optimization guidance to help create highly relevant, search engine-friendly articles. Create optimized content or specific SEO content easily. They even have a fun Google Docs plugin to make the content creation process smoother.

Site auditing

1. Ahrefs: integrates AI into its SEO toolkit to automate keyword research, analyze search intent, grade content, translate keywords, and fix technical issues, streamlining the entire SEO workflow.
2. Semrush: very similiar to Ahrefs but also has an AI Writing Assistant to help create SEO-optimized content, from ideation to final drafts, with real-time optimization suggestions.

LLMs

1. Claude: I know I’m not including ChatGPT in this list and they do a fine job. But in my experience, Claude has an edge in content creation, keyword research, and SEO strategy development. The more I work with technical teams, the more I see them adopting Claude as an AI tool over ChatGPT, at least for now.

As an SEO professional, I've come to appreciate AI SEO software for their ability to provide deep insights and handle repetitive tasks. I often recommend Ahrefs and SurferSEO, but there are many options available. Part of the enjoyment - and the challenge - is finding the right mix of tools for your specific needs. I’m a bit of a tool junkie and can find myself going down rabbit holes, but I do warn you, these aren't free AI SEO tools. Try to remember that these tools enhance our capabilities, but it's our collaboration with team members, strategic thinking, and understanding of our audience that ultimately drives SEO success.

Builder and SEO

Builder.io is built with SEO in mind. It gives you tools to create search-friendly content without making things complicated. Here's how Builder helps with SEO and site performance:

SEO features:

1. Metadata Fields: Builder's default Page Model includes meta titles and meta descriptions. Always fill these out - they're crucial for search engine optimization.
2. Custom SEO Fields: You can add your own fields for things like noindex or nofollow tags.
3. Mobile-Friendly: Builder's styles work well on mobile by default, which Google loves.
4. Image Optimization: Builder automatically optimizes images when you use its Image block or API. This helps your pages load faster.
5. Server-side Rendering: Builder works with frameworks that render pages on the server, which can boost your SEO.

Core web vitals:

Builder helps with Google's Core Web Vitals in a few ways:

• Largest Contentful Paint (LCP): Builder's automatic image optimization and CDN delivery help large images load faster, improving LCP scores.
• First Input Delay (FID): Builder's SDKs support code splitting out-of-the-box, which can reduce JavaScript execution time and improve FID.
• Cumulative Layout Shift (CLS): Builder's responsive design tools and preview features help you create stable layouts that don't shift unexpectedly as the page loads.

SEO best practices with Builder:

1. Use Proper Headings: Set your Text Blocks as H1, H2, etc. when appropriate.
2. Optimize Images: Use Image blocks and add good alt text.
3. Create a Sitemap: You can use Builder's API to make a sitemap.
4. Check Performance: Use tools like Google Lighthouse or PageSpeed Insights to monitor your site's speed. We’ve even built this pretty cool performance tool, Performance Insights.

By leveraging these features and following these practices, you'll be well on your way to creating SEO-friendly sites with Builder.io.

SEO's new identity crisis

So, is it SEO or content marketing with a side of tech optimization? It’s not one or the other, in reality it’s a partnership that should be a primary focus.

The "new" SEO strategy isn't new at all. It's what good marketers have been doing for decades: focusing on customer needs and aiming for ROI.

Think about it:

• Creating content that answers user questions? That's just good copywriting.
• Focusing on user intent? That's basic customer service.
• Building authority in your niche? Welcome to Brand Building 101.

AI hasn't revolutionized SEO, it has just double-downed on the prior strategies, while heavily weighing on helpful content with a couple new focus areas. And the tech stuff - site speed, structured data, mobile optimization - that's still there.

As search engines get smarter, they're putting a premium on truly helpful, relevant stuff. So that's where to focus. Create quality content. Solve real problems and experiment with AI tools. That's the ticket to SEO success now and down the road.

About me

I'm Luke Stahl, a front-end developer and digital marketer with a passion for SEO. My philosophy? Build, ship, and learn as you go.

Read the full post on the Builder.io blog

In this post, we'll dive into different personalization approaches, from server-side rendering to edge trimming. We'll look at their pros and cons, and how each balances performance, flexibility, and ease of use.

What We're Aiming For

When it comes to personalization for modern frontend apps, we're aiming for four things:

1. Best Possible Performance: We want our page loads to be fast. Like zoom zoom.
2. Granular and Flexible Personalization: We want to personalize deeply and flexibly, not just swap out a line of text.
3. Easy Creation and Management: We don't want to wrestle with complex systems just to change an image.
4. Low Cost: We want to keep our infrastructure and operational costs down.

On top of this, we'll want to support any modern frontend (React, Next.js, Vue, Svelte, Remix, Qwik, etc) and nearly any hosting provider and/or CDN.

Sounds simple enough, right? Well, not quite.

Achieving all four of these goals simultaneously is like trying to nail jelly to a wall. It's tricky, messy, and you'll probably end up with sticky hands. But don't worry, we're going to explore some approaches that can help you find the sweet spot for your needs.

Approach 1: Server-Side Rendering for Every Request

This is like having a personal chef who cooks a fresh meal for you every time you're hungry. Sounds great, but it's not always practical.

Here's what this might look like in code, for instance in Next.js:

export async function getServerSideProps({ req }) {
  const user = await getUserData(req.cookies.userId);
  const content = await getContent({
    model: 'page',
    userAttributes: { audiences: user.interests }
  });

  return { props: { content } };
}

Server-side rendering for every request is the most straightforward approach to personalization in some ways. Every time a user requests a page, your server springs into action, fetching all the necessary data, and serving up a perfectly tailored page. This gives you ultimate flexibility in personalization.

But here's the catch: it's slow. Every single page view requires a round trip to your server, which has to do work before sending anything back to the user. If your user is in Australia and your server is in the US, that's a long trip for the data to make.

Plus, if your site gets popular, you might find your servers sweating harder than a programmer trying to explain why the project is behind schedule. Needless to say, this can get expensive.

Pros:

• Highly flexible personalization
• Server has full control over the output

Cons:

• Performance can take a hit
• Scaling can be costly

Grading:

• Performance: ⭐⭐ (2/5)
• Flexibility: ⭐⭐⭐⭐⭐ (5/5)
• Ease of Creation/Management: ⭐⭐⭐⭐ (4/5)
• Cost: ⭐ (1/5)

Approach 2: Edge Caching + Client-Side Injection

This is like having pre-cooked meals delivered to your door, and then adding your own special sauce before eating.

In this case, we will cache the core of the page (any parts that don’t need to be personalized), and fill in the personalized details client side, for instance with a skeleton loader until rendered.

Here's a simplified example of how we can move the personalized bits into the client, for instance with React:

const [contentPromise] = useState(async function() {
  const user = await getUser();
  // fetch the personalized hero for this user
  // e.g. from Builder.io
  const content = await getContent({
    model: 'hero',
    userAttributes: { audiences: user.audiences }
  });
  return content;
})
const content = use(contentPromise)

Edge caching with client-side injection gives you the speed of static content with the flexibility of personalization. You serve a cached, static version of your page from a CDN, which loads fast (literally the fastest way anything can load - CDN to user immediately). Then, JavaScript kicks in and starts fetching personalized content to inject into the page.

This approach is popular because it's relatively easy to implement, works with any frontend and backend stack, and is cost efficient. But it's not all sunshine and rainbows. There's often a noticeable delay between when the page loads and when the personalized content appears, which can lead to a janky user experience.

There's also the SEO problem. Search engines might not see your personalized content because they don't always execute JavaScript. And while the initial page load is fast, you're making additional API calls after the page loads, which can slow down the overall experience.

Pros:

• Fast initial page load
• Works with any tech

Cons:

• Delay between page load and personalized content appearance
• SEO issues

Grading:

• Performance: ⭐⭐⭐ (3/5)
• Flexibility: ⭐⭐⭐⭐ (4/5)
• Ease of Creation/Management: ⭐⭐⭐ (4/5)
• Cost: ⭐⭐⭐⭐ (4/5)

Approach 3: Edge Rendering

This is like having that personal chef, but they're in a food truck right outside your house.

Here's what this might look like using a Remix loader, for instance hosted on Cloudflare’s edge:

async function loader(request) {
  const user = await getUser(request);
  const content = await getContent({
    model: 'page',
    userAttributes: { audiences: user.interests }
  });
  return content;
}

Edge rendering brings computation closer to the user, reducing latency and improving performance. Instead of your request traveling halfway around the world to reach a central server, it only needs to go to the nearest edge location. This approach is similar to server side rendering per request but with some performance improvements.

But it's not all smooth sailing. One of the biggest challenges is data availability. Not all of your data might be easily accessible at the edge, which might require additional round trips across the world to various sources of data before a response can be fully sent. Edge computing environments also often have limitations that can make development more complex.

Despite these challenges, edge rendering can be powerful for many use cases. It's like having a food truck with a gourmet chef – great if you need it, but maybe too much if you're just serving hot dogs.

Pros:

• Faster than traditional server rendering
• Can still provide highly personalized content

Cons:

• Not all data is available at the edge
• Can get complex with streaming and such

Grading:

• Performance: ⭐⭐⭐ (3/5)
• Flexibility: ⭐⭐⭐⭐ (4/5)
• Ease of Creation/Management: ⭐⭐⭐ (3/5)
• Cost: ⭐⭐⭐ (3/5)

Approach 4: Edge Augmentation

This is like ordering a standard meal but having the delivery person add a personalized garnish before they hand it to you.

In this world, we respond with cached content but swap in some dynamic parts as needed at the edge.

async function handleRequest(request) {
  const [html, user] = await Promise.all([
    getHtml(request), getUser(request)
  ]);

  // Swap out special strings with personalized info
  return html.replace('%%USER_NAME%%', user.name)
}

Edge augmentation is a middle ground between serving entirely static content and generating fully personalized pages for each request. You start with a pre-generated page that's cached at the edge, then make small, targeted modifications based on user data before sending it to the browser.

The beauty of this approach is that you get the performance benefits of serving cached content, but you still have the ability to add personalized touches. It's particularly well-suited for things like injecting a user's name, swapping out a hero image based on location, or other very surgical operations.

However, it's important to note that edge augmentation is not a replacement for full server-side rendering. The personalizations you can make are highly limited in scope. You're working with an existing HTML structure, so making sweeping changes to the layout or content structure can be challenging.

Pros:

• Fast response times
• Allows for some personalization

Cons:

• Limited in the scope of personalizations
• Can be tricky to implement for complex changes

Grading:

• Performance: ⭐⭐⭐⭐⭐ (5/5)
• Flexibility: ⭐⭐⭐ (3/5)
• Ease of Creation/Management: ⭐⭐ (2/5)
• Cost: ⭐⭐⭐⭐ (4/5)

Approach 5: Segmentation at the Edge

This is like having a few different pre-prepared meals and choosing which one to serve based on what you know about the diner.

In this approach we will redirect users based on their attributes to a finite set of segments.

async function handleRequest(request) {
  if (!request.url.searchParams.has('segment')) {
    const userSegment = getUserSegment(request)
    const newURL = new URL(request.url)
    newUrl.searchParams.set('segment', userSegment)
    redirect(newUrl)
  }
  // serve the content for this segment, e.g. at ?segment=...
}

Segmentation at the edge works by determining which segment a user belongs to and then serving them a pre-generated version of the page tailored to that segment. These pages could be generated statically or just be simple server side rendered pages using stale-while-revalidate caching (e.g. Cache-Control: stale-while-revalidate=...)

This allows for more significant personalizations than edge augmentation, while still maintaining excellent performance.

However, you're limited to a fixed number of segments. You can't have an infinite number of variations, or you lose the benefits of caching. This means you need to carefully choose your segments to ensure you're covering your most important use cases without creating too many variations.

Despite these challenges, segmentation at the edge can be a powerful approach for many websites. It's particularly well-suited for cases where you have clear, distinct user groups with different needs (for instance - an ecommerce site with known menswear shoppers, womenswear shoppers, or unknown/anonymous).

It's a bit like running a restaurant where you have a few set menus designed for different types of diners.

Pros:

• Fast response times
• Allows for more significant personalizations

Cons:

• Limited to a fixed number of segments
• Requires careful planning of segments

Grading:

• Performance: ⭐⭐⭐⭐⭐ (5/5)
• Flexibility: ⭐⭐⭐ (3/5)
• Ease of Creation/Management: ⭐⭐⭐ (3/5)
• Cost: ⭐⭐⭐⭐ (4/5)

Approach 6: Edge-Trim Personalization

This is like giving the diner a menu with all the options, but having a waiter who knows their preferences and points out the dishes they're most likely to enjoy.

Edge-Trim Personalization serves a single HTML file containing all content variations, which can be aggressively cached at the edge. Then, at the edge, you process this HTML to show only the relevant content for that specific user before sending it to the browser.

async function handleRequest(request) {
  const html = await getHtml(request)
  const smallHtml = trimHtml(html, {
    userAttributes: { audiences: user.audiences },
  });
  return html
}

This approach allows for incredibly granular personalization and is great for SEO because all the content is in the initial HTML. This approach even can work without an edge worker too. Platforms like Builder.io use inline scripts as a fallback that swaps the content on the client that best match the given user, instantly while the page is rendering.

I find this approach to be incredibly powerful. It works well with visual editing tools and provides a lot of flexibility. It's like having a restaurant where the menu includes every possible dish, but each diner only sees the dishes that are relevant to them.

One of the key strengths of this approach is it works even without an edge worker to trim HTML. By default the HTML is saved with inline scripts that executes the personalization synchronously on the client, like:

<div class="hero">
  <h1 class="title">Hello there</h1>
  <script>
    if (userAttributes.segments.includes('returnVisitor')) {
      document.currentScript.previousElementSibling.textContent = 'Welcome back!'
     }
  </script>
</div>

Given this, no CDN is necessary, and due to the nature of gzip, you can have a large amount of personalizations with a small (for instance 5-10%) payload increase. But in the case of using the CDN to trim, if you are in the returnVisitor user segment, you would just get:

<div class="hero">
  <h1 class="title">Welcome back!</h1>
</div>

The main downside of this approach is that it requires special tooling that can generate this code across modern frameworks (accounting for correct hydration, etc). Platforms like Builder.io support this and give a visual editor to make edits visually or with natural language.

Example of using Builder.io to personalize parts of a page with natural language

But, rolling this your own can be a bit complex and perhaps best to use one of the other options.

Pros:

• Optimal caching
• Allows for highly granular personalization
• Flexible personalization at the edge
• SEO-friendly

Cons:

• Requires special tooling and not the easiest to roll your own

Grading:

• Performance: ⭐⭐⭐⭐⭐ (5/5)
• Flexibility: ⭐⭐⭐⭐⭐ (5/5)
• Ease of Creation/Management: ⭐⭐⭐⭐⭐ (5/5)
• Cost: ⭐⭐⭐⭐ (4/5)

Putting It All Together

So, what's the best approach? As with most things in tech, it depends on your specific use case. But here's my general recommendation:

1. Start with edge caching. It's the foundation of good performance.
2. For below-the-fold content or non-critical personalizations, consider client-side fetching, especially for things that need 1:1 personalization such as per-user recommended products.
3. Consider edge segmentation if you have well-defined user segments and don't need super granular personalization.
4. For a best of all worlds approach, look into platforms like Builder.io that gives you the developer and end-user tooling to implement edge-trim personalization effectively, as well as every other option covered here.

Remember, the goal is to provide a personalized experience without sacrificing performance, flexibility, ease of management, or cost. It's a balancing act, but with these tools in your toolkit, you're well-equipped to handle it.

Here's a quick summary of how each approach stacks up:

As you can see, Edge-Trim Personalization offers a great balance across all four criteria, which is why it's my personal favorite and why, while we support all of the above approaches with Builder.io’s personalization features, I push people to consider Edge-Trim personalization most.

However, the best approach for you will depend on your specific needs, resources, and constraints.

Wrapping Up

Personalization is a powerful tool, but it needs to be wielded carefully. By understanding these different approaches, you can choose the right strategy for your specific needs.

Keep in mind:

• Performance is key. Don't sacrifice it for personalization.
• Caching is your friend. Use it wisely.
• Be flexible. Different parts of your site might benefit from different approaches.
• Start small and iterate.
• Always keep your users in mind.
• Consider the cost implications of your chosen approach.

The world of web personalization is constantly evolving. New techniques and technologies are emerging all the time, pushing the boundaries of what's possible. Stay curious, keep learning, and don't be afraid to experiment.

Remember, the goal of personalization isn't just to show different content to different users. It's to create experiences that resonate, that feel tailored and relevant. When done right, personalization can make your users feel understood and valued. And that's pretty cool.

If you want a deep dive on what personalization approach is best for you, talk to our team.

Read the full post on the Builder.io blog

To make localization feel like a breeze, we’ve recently introduced locale grouping. Let's dive into what it does and how it can help your team manage multilingual content.

What is locale grouping?

Locale grouping allows you to bucket your locales into relevant groups. This helps teams accomplish two main things:

1. It helps you manage your locales better
2. It introduces a secondary fallback system

Let's break these down.

Better locale management

First off, locale grouping gives you a cleaner way to organize your locales. You can group related locales together and view them in a more structured format. This might not sound like a big deal, but when you're juggling dozens of locales, having them neatly organized can be a huge relief.

Secondary fallback system

How to set up locale grouping

Locale grouping is available today for teams on Enterprise plans. Setting up groups for your locales is straightforward:

1. Navigate to the Locales section in your Space settings.
2. Click on 'New Group', and name your group. Select the locales you want to include in that group, and click on 'Assign To Group'. You'll be able to see a list of your created groups, and can select the group to which you want to assign the selected locales.
3. Alternatively, you can select the locales you want to group, click on 'Assign To Group', and select 'New Group' from the dropdown. This creates a new group containing your selected locales.
4. Assign a locale as the Group Default for the group.
5. Save your changes.

You can create as many groups as needed for your Space. For a more detailed explanation, visit our documentation.

A real-world example: Managing French content

Let's say you're running a website for a company that operates across Europe. You have separate locales for French (France), French (Belgium), French (Switzerland), and so on. Most of the time, the content for these locales is identical, but occasionally you need something different for a specific country.

Without locale grouping, you'd probably find yourself copying content from French (France) to all the other French locales whenever the content is supposed to be the same across those locales. It works, but it's tedious and error-prone.

Instead, you could create a group called French, set French (France) as the Group Default and enter content for French (France). Now, for all the locales where the content is the same as French (France), you don't need to do anything. They'll automatically use the content from French (France).

If you need something different for, say, French (Switzerland), you can still enter specific content for that locale, or copy from French (France) and make edits to that content. When you do, it'll use that new content instead of falling back to French (France).

Here are some more applications for locale grouping:

• E-commerce Product Descriptions: For an online store serving English-speaking countries (US, UK, Australia), you can group these locales together. Set US English as the default, and only update UK and Australian content where specific terminology or pricing differs.
• Software Documentation: If you're managing documentation for Spanish-speaking countries (Spain, Mexico, Argentina), you can group these locales. Use Spanish (Spain) as the default, and only create specific content for Mexican or Argentinian Spanish where dialectal differences are significant.
• Food and Beverage Promotions: If you're a food and beverages provider, serving several different countries, you can create groups based on country, with locales set up for different regional languages. For example, for India, you would have locales such as English, Hindi or Punjabi. You could set English (India) as the default for content across your website, and create region-specific content for promotional events.

Benefits of locale grouping

Locale grouping offers several advantages:

• Less manual copying and pasting
• Reduced chance of errors or inconsistencies
• Easier to make global changes (just update the group default!)
• Still flexible when you need locale-specific content

In short, it lets you focus on the content that actually needs to be different, instead of spending time duplicating content that's the same.

Wrapping up

Locale grouping is a powerful tool for teams dealing with multilingual content. It can help you manage your locales more effectively, save time, and reduce errors.

One thing to note: this feature is only available to our Enterprise customers. If you're interested in using it, please reach out to our Sales team for more info.

Ready to get started? Log in to your Builder account and try Locale Grouping today!

Read the full post on the Builder.io blog

While there are quite a few players in this space, let's zoom in on two of the major contenders. In one corner, we've got GitHub Copilot, the established player. In the other, Cursor, the new kid on the block shaking things up. Both are trying to make our lives easier as devs.

After spending some time with Copilot and Cursor, I thought it might be useful to break down how they stack up against each other. Whether you're curious about trying them out or just want to know what all the fuss is about, stick around. We're going to dig into some of the key features that matter to us as developers.

Cursor AI

Cursor is basically an AI-powered code editor on steroids. It is a fork of Visual Studio Code, bringing advanced AI capabilities to a familiar interface.

GitHub Copilot

GitHub Copilot is an AI coding assistant that helps you write code faster and with less effort, allowing you to focus more energy on problem solving and collaboration.

Developed by GitHub in collaboration with OpenAI, it uses machine learning to generate code suggestions and complete tasks directly in your code editor (Visual Studio Code, Visual Studio, Vim/Neovim, JetBrains IDEs).

Both Cursor AI and GitHub Copilot offer a range of features designed to enhance productivity and support developers. Let's dive into the specific features and see how these two compare.

Tab completion

You know that feeling when you're typing and the IDE just gets what you're trying to do? That's what we're talking about here.

Cursor

Cursor's tab completion is pretty wild. It'll suggest multiple lines of code, and it's looking at your whole project to make those suggestions. For TypeScript and Python files - when Tab suggests an unimported symbol, Cursor will auto-import it to your current file. Plus, it even tries to guess where you're going to edit next.

Copilot

Copilot's more focused on inline suggestions. Tab to accept, and you're off to the races. It often predicts the next logical line of code based on the developer's style, which can significantly speed up coding tasks. Need options? Hit Alt+] or Alt+[ to cycle through different suggestions, or Ctrl+Enter to see multiple alternatives in a new tab.

Code generation

This is where things get interesting. Imagine describing what you want your code to do, and boom — it's there.

Cursor

Cursor has this thing called Composer that can create entire applications based on your description. It's looking at your whole project when it generates code, so it tries to match your style. Use ⌘ + I to open it, and ⌘ + N to create a new Composer. For inline generation, boilerplate code and edits, you can use the ⌘ + K feature. Impressively, it can work with multiple programming languages within the same project, adapting its suggestions accordingly.

Copilot

Copilot's more about those inline suggestions, but Copilot Chat can handle bigger chunks of code if you ask it nicely. The CLI can also generate code if you describe what you want in plain English.

Chat

Sometimes you just need to ask a question. But is chatting with an AI actually helpful?

Cursor

Cursor's chat (⌘ + L) is context-aware, so it knows what you're working on. You can also drag & drop folders into Chat to provide additional context and apply code suggestions right from the chat, which is neat. It even supports images for visual context.

Copilot

GitHub Copilot Chat is similar — you can ask it to explain code or suggest improvements. It's integrated right into VS Code, so it feels pretty seamless. They've been rolling out some new features lately, like better chat history, drag and & folders and ways to attach more context. But if you're already using Cursor, you might not find anything groundbreaking here.

Terminal

Terminal work can be a pain, especially with complex commands.

Cursor

Cursor extends its AI smarts to the terminal with ⌘ + K. It's pretty handy for translating vague ideas into actual commands. However, it hijacks the terminal's clear shortcut, which is just kind of annoying.

Copilot

Copilot's got a slick terminal integration that lets you just hit ⌘ + I, type what you want, and get the command you need. No need to be a bash wizard anymore – just describe what you want to do in plain English, hit enter, and you're good to go. The command + enter shortcut to run the suggested command is very handy.

Context awareness

This is a big one. Can these tools actually understand your whole project, or are they just looking at the current file?

Cursor

Cursor's pretty impressive here. It looks at your entire codebase and project structure. You can even use @ symbols to reference specific parts of your project, like @Files, @Folders, @Code, and more.

Copilot

Copilot's pretty smart about context too. It looks at your open files to figure out what's going on and can pick up cues from your imports, comments, and function names. Use a '#' to reference files or use the 'Attach Context' button to pick exactly what you want Copilot to look at.

Multi-file support

Support for working across multiple files enables AI assistants to understand and modify complex project structures.

Cursor

Cursor's Composer can make changes across your entire project, which is pretty powerful. It understands how different files and components relate to each other. Composer can generate files for an entire app at once. I’ve personally used the feature to refactor a single file into more organized files and folders.

Copilot

Copilot's latest addition is its Edits feature, and it's pretty sweet. Just define your working set of files, describe what you want in plain English, and watch Copilot make changes across multiple files. You can review each change, accept what works, and iterate until you get it right.

In our testing, we found the feature to be surprisingly slow, sometimes getting stuck in infinite loading states or making incorrect file changes.

Pro tip: manually specify your files instead of relying on automatic detection – it's more work, but you'll get more reliable results.

AI agent

This is about having an AI assistant that can take control of your editor – running commands, managing files, and handling project-wide tasks.

Cursor

In Composer, hit ⌘. and you've got yourself Cursor Agent, a super-powered AI assistant. It'll automatically grab context, run terminal commands, handle files, and even do semantic code search. The catch? It only works with Claude models, and each operation counts against your quota. But when you need to get things done fast, it's an absolute game-changer.

Copilot

Nothing quite like this in Copilot's toolkit yet. While Copilot Chat can handle some similar tasks, it doesn't have the same level of integrated project-wide assistance.

Code review

We all need a second pair of eyes sometimes. AI-powered code review can provide automated feedback on code quality, potential bugs, and adherence to best practices.

Cursor

Cursor's new bug finder is pretty neat. It scans your code and branch changes against main, rating each potential bug it finds. One click and it'll fix things right in your editor. There's a catch though – you'll pay per click (we're talking a dollar or more each time)

Copilot

Copilot's just rolled out a code review feature that's pretty sweet (though still in limited release). Hit the review button in your Source Control tab, and it'll check your staged or unstaged changes. It drops suggestions right inline in your code that you can apply with one click. Skip what you don't like, accept what you do – simple as that.

Customization

One size doesn't fit all in coding. Can you bend these tools to fit your specific needs, or are you stuck with what they give you?

Cursor

Cursor lets you set custom instructions through settings and .cursorrules files. You can tailor it to your project's specific needs.

Copilot

Copilot supports custom instructions through a .github/copilot-instructions.md file, similar to Cursor's approach. This lets you specify your coding preferences and conventions, which Copilot will follow when generating code.

AI commit messages

Let's see how these tools handle git commits.

Cursor

AI-generated commit messages might not sound like much, but it saves me a couple of minutes every day and reduces the mental load of coming up with good commit messages. Now, Cursor does have this habit of being a bit...wordy with its commit messages. You can tweak that behavior by adding some instructions in the .cursorrules file.

Copilot

Copilot does this pretty nice by default. Just hit the auto-generate commit message button and you're good to go. I've found their messages to be cleaner and more concise compared to Cursor's, though you'll probably still want to give them a quick review before committing.

IDE integration

Nobody wants to switch between a bunch of tools.

Cursor

Cursor is its own thing — it's built on top of VS Code, so it'll feel familiar if you're used to that.

Copilot

Copilot on the other hand integrates with various IDEs — VS Code, IntelliJ, Neovim. The CLI works in any terminal.

Models

Cursor

Cursor offers a range of models, including GPT-4o, o1, Claude 3.5 Sonnet, and their custom cursor-small model. You can choose based on what you need — speed or capability.

Copilot

Copilot has expanded its model offerings significantly. You can now choose between different models including Claude 3.5 Sonnet, o1, and GPT-4o. This flexibility lets you optimize for different tasks – whether you need quick code completions or more complex reasoning and understanding.

Pricing

Let's talk money. How do their pricing models compare?

Cursor

Cursor has a free Hobby tier with limited features, a Pro tier for $20/month, and a Business tier for $40/user/month.

Copilot

Copilot now offers a free tier with limited features (like 12,000 completions per month), while Pro plans start at $10/month. For teams, there's Business at $19/user/month and Enterprise at $39/user/month.

Wrapping up: and the winner is...

After diving deep into both Cursor and GitHub Copilot, it's time to pick a champ. And drum roll, please...Cursor takes the crown. Its unique features make it a hard sell to beat in the world of AI-assisted coding.

Now, don't get me wrong, Copilot is a solid tool. It's great for quick suggestions and it plays nice with a bunch of different IDEs. But Cursor? It's just operating on another level.

Here's why Cursor wins out:

1. Project-wide smarts: Cursor's ability to understand and work with your entire codebase is still unmatched. Copilot's context awareness can get sluggish with larger projects.
2. Speed and reliability: Cursor's Composer consistently outperforms when it comes to project-wide operations. While Copilot's new Edits feature is promising, it often gets stuck or slows to a crawl. Cursor just gets the job done.
3. Agent power: With Cursor, you get a polished Agent mode that just gets what you're trying to do

Copilot is still a powerful tool, and if you're looking for something that's easy to integrate into your existing workflow, it might be the way to go. Its code completion capabilities are certainly impressive. But if you want to really push the boundaries of what AI can do for your coding, Cursor is where it's at.

Of course, the best tool is the one that works for you. So give them both a spin if you can. But if you're asking me? Cursor's the one to beat right now.

My preferred AI stack

My preferred workflow, overall look like this:

1. For coding, I work iteratively with Cursor
2. Our design team works within Figma
3. Builder.io converts designs to code and also patches in design updates as they're needed

But those are just my preferences, what are yours?

If you enjoyed this post, you might also like:

• $500 Devin vs $20 Cursor
• Windsurf vs Cursor
• Training Your Own AI Model

Read the full post on the Builder.io blog

In this post, we'll explore some of the best Figma plugins that can make your dev life not just easier but maybe even a bit more fun. Whether you're a designer looking to hand off cleaner assets or a developer wanting to streamline your workflow, these plugins will help get you started.

What are Figma plugins?

Before we dive into the specific plugins, let's talk about what Figma plugins are. Think of them as add-ons or extensions that supercharge Figma's capabilities. Figma plugins are pieces of software that integrate directly with Figma's interface. They can do all sorts of things:

• Automate repetitive tasks
• Add new features to Figma
• Connect Figma to other tools and services
• Enhance existing Figma functionality

The cool thing about Figma plugins is that they're not just made by the Figma team. There's a whole community of developers out there creating plugins to solve specific problems or add cool new features. It's like having a bunch of dev buddies constantly working to improve your Figma experience.

You can find plugins for all sorts of tasks, and the best part is that most of them are free to use. With that in mind, let's explore some standout plugins that can seriously level up your Figma game.

Stark

First up, we've got Stark. It's all about making your designs accessible from the get-go. It checks for color contrast and other accessibility features so you can ensure your projects are inclusive from the start. No more accessibility as an afterthought!

Key features:

• Color contrast checker with color suggestions
• Landmarks and Focus Order for screen readers and other assistive technologies
• Vision Simulator colorblind simulation
• Accessibility guidelines, including Alt-Text Annotations

Bannerify

Need to create banner ads? Bannerify's got your back. Instead of coding everything manually, this plugin generates banners automatically. That frees you up to focus on other important aspects of your work. Less time on banners, more time on the fun stuff.

Key features:

• Automatic banner generation
• Easy timeline animation with real-time previews in Figma
• Export to multiple formats: HTML/CSS, GIF, MP4, WebM, and ad platforms
• Embed Lottie animations and MP4 videos, with optional audio tracks
• Automatic asset optimization and responsive HTML preview pages

Autoflow

Autoflow helps you understand user behavior before your app even launches. You can link frames together to create interactive prototypes, visualize user journeys, and spot potential issues early in the development process. It's like having a crystal ball for your UX.

Key features:

• Frame linking for prototypes
• User flow visualization
• Interactive preview
• Offset start/end terminal spacing and multiple terminal styles

Responsify

Responsify turns your Figma designs into responsive web applications. It automatically adjusts your designs based on device type so that you can go from mockups to functional prototypes with less effort. Responsive design made way less painful. This plugin is open source, and contributions are encouraged.

Key features:

• Automatic responsive layout generation
• Device-specific adjustments
• CSS output

Wireframe

Sometimes, you need to strip things back to basics. Wireframe helps you do just that, letting you quickly create low-fidelity wireframes. Wireframe is a powerful tool for collaborative project ideation and user flow design, offering over 350 custom-built graphics that cover most web and mobile elements. It's great for focusing on structure and functionality without getting bogged down in visual details.

Key features:

• Low-fidelity wireframe components
• Quick prototyping tools
• Customizable elements

Visual Copilot

Visual Copilot is an AI-powered Figma to code toolchain that leverages AI models and an open-source compiler, Mitosis, to transform flat designs into code hierarchies, refined by an LLM for framework and styling preferences.

Key features:

• Converts Figma designs to code for multiple frameworks (React, Vue, Svelte, Angular, Qwik, Solid, React Native, HTML)
• Generates responsive layouts with your choice of styling library (CSS, Tailwind, Emotion, Styled Components)
• Supports component mapping to integrate with existing design systems
• Offers real-time conversion and code customization options

The goal is to make visual design more accessible and speed up the design process, especially for developers and people who may not have deep design skills. It's not meant to replace designers but rather to augment design workflows and help bridge the gap between development and design.

Iconify

Iconify gives you access to over 200,000 open-source icons right in Figma. No more hunting around for that perfect icon — just search, click, and insert. It's a huge time-saver when you're working on UI design.

Key features:

• 200,000+ open-source icons
• In-app search functionality
• Easy insertion into designs

Run Plugin API

This one's for the tinkerers. Run Plugin API lets you, well, run the Figma Plugin API right in Figma. It's great if you want to create your own custom plugins or experiment with the API. Get your hands dirty with some Figma plugin development!

Key features:

• Direct access to Figma Plugin API
• Code execution with IntelliSense within Figma
• Testing ground for custom plugin development

Lorem Ipsum

Sometimes, you need some placeholder text; that’s where the Lorem Ipsum plugin comes in handy. This plugin generates lorem ipsum text in various formats, making it easy to fill your designs with realistic-looking content. It's a small thing, but it can save you a bunch of time, and by saving you, we mean in one click.

Key features:

• Auto-generate
• Multiple lorem ipsum variants
• Customizable length
• One-click insertion

Content Reel

If lorem ipsum isn’t what you are looking for, try Content Reel for dynamic data. It lets you populate your designs with realistic content, which is great for testing how your layouts will behave with actual data. It enables you to access a cache of design elements, apply text strings and images to multiple layers programmatically, and integrate icons from built-in libraries. The plugin supports batch operations with customizable ordering and randomization. You can also create and manage new content, setting visibility flags as needed.

Key features:

• Dynamic content population
• Various data types (such as names, addresses, and so on)
• Customizable data sets

Email Love

If you're working on email templates, Email Love is the plugin you must add. The Email Love plugin makes email development easier by letting you export responsive, production-ready HTML or MJML straight from Figma. It offers 40+ pre-built components and global style controls to help you design emails and create a consistent brand system.

You can also build custom components or convert existing templates, then export accessible, mobile-friendly email code that follows best practices. No more switching between design and coding tools for your email campaigns.

Key features:

• Figma-to-HTML/MJML export
• Cross-client compatibility
• Accessibility-first HTML
• Modular component system

Datavizer

Working with data visualization? Datavizer helps you create charts and graphs directly in Figma. It's a great way to prototype data-heavy interfaces without jumping into a separate tool.

Key features:

• Multiple chart types
• Data import functionality (CSV of JSON)
• Customizable styles

Wrapping up

Figma plugins can speed up your workflow and improve collaboration. Some might even make your job more enjoyable if that's your thing.

Plugins are tools, not magic. They're designed to enhance your skills, not replace them. The real value comes from combining these tools with your own problem-solving abilities and creativity.

So go ahead and give these plugins a try. Experiment with them. Find out how they fit into your workflow. And who knows? You might find a new favorite tool that transforms the way you work.

About me

I'm Luke Stahl, a front-end developer and digital marketer. My philosophy? Build, ship, and learn as you go.

Read the full post on the Builder.io blog

But why? Let's dive into the history, evolution, and future of visual editors in the world of web development.

The rise and fall of visual editing

Traditional CMSs like WordPress came with built-in visual editors. Initially basic, these editors evolved to allow for image insertion, text styling, and even interactive widgets.

Then came the era of headless CMSs. These systems decoupled content from presentation, offering more flexibility in content delivery across platforms. However, this architectural shift came at a cost: visual editing disappeared.

Content creators were left with abstract form fields and structured data, unable to see how their content would look on the final page. This wasn't just inconvenient — it significantly impacted workflows and business operations.

Updating a homepage or launching a time-sensitive landing page often required developer involvement, leading to bottlenecks. Marketing teams, once in control of their content, became dependent on development resources for even minor changes.

The result? Slower campaigns, limited A/B testing, and reduced ability to respond quickly to market changes. Businesses found themselves less agile in their digital presence, despite the supposed flexibility of headless architecture.

This tension between technical benefits and practical content creation needs set the stage for the next evolution in content management systems — one that would aim to bring visual editing back into the headless world.

Recognizing the gap

This is where Builder came in. We saw a gap in the market — a need for visual editing in a headless world. But we didn't just want to recreate the old visual editors. We wanted something better, something that could truly bridge the gap between developers and content creators.

Our journey began with a real-world problem. While working at ShopStyle, a company doing headless commerce at a massive scale (half a billion in GMV in 2014), I felt the pain of headless architecture firsthand. We had a cutting-edge tech stack, but our marketing team was struggling. They couldn't make the changes they needed without going through development, which slowed down their ability to optimize and personalize content.

This experience led to a crucial insight: in e-commerce, and many other industries, marketing-driven changes often have a bigger impact on sales than technological improvements. We needed a way to give marketers the power to make changes quickly, without sacrificing the benefits of our headless architecture.

Our initial requirements for Builder were ambitious:

1. It had to work with any tech stack, just like a headless CMS.
2. It needed to use the exact components and design tokens that developers were using in their code.
3. It had to be publishable over an API, without requiring code deployment.
4. Most importantly, it needed to be as capable as coding, allowing for unlimited customization.

We wanted marketers to be able to drag and drop components, import designs from Figma, and even add interactivity — all without needing to understand the underlying code.

Looking beyond visual editing

As we developed Builder, our vision expanded. We didn't stop at just creating a visual editor — we set out to build a complete visual development environment.

We added AI capabilities and Large Language Models (LLMs) to help with content generation and optimization. We developed features for A/B testing and personalization, allowing marketers to create targeted content variations easily. These additions made Builder not just a tool for making changes, but a platform for experimentation and optimization.

One key part of our efforts was developing a way to visually edit code. This means that anything created in Builder can be as performant and consistent with your codebase as if a developer had hand-coded it. It also means that developers can export anything created in Builder as code, giving them the flexibility to work with the visual editor's output in whatever way best fits their workflow.

We focused on making Builder a true end-to-end solution. It's not just about making small text changes — it's about being able to create entire new pages, add new sections, run experiments, and connect to various data sources, all without needing to involve developers for every change.

This approach has allowed us to create a tool that's not just a compromise between developer needs and marketer needs, but a solution that empowers both. By building on a foundation of headless architecture, we've ensured that content created in Builder can be delivered anywhere, to any platform or device, while still providing the visual editing capabilities that marketing teams need.

The result? A platform that accelerates workflows and enables businesses to move at the speed of their ideas, truly bridging the gap between headless flexibility and visual editing power.

The visual editor landscape

Since Builder pioneered the headless visual editor, many other companies have jumped on the bandwagon. Contentful, ContentStack, Sanity, Storyblok, Prismic — they've all added some form of visual editing to their offerings.

But here's the thing — not all visual editors are created equal. There are tiers of visual editing capabilities, and many solutions fall short of what we consider the gold standard.

At the lowest tier, you have systems that simply provide a button to edit structured data with a visual preview. These don't offer much flexibility or reduce engineering costs significantly.

The next tier up might allow for rearranging existing components, but they often don't support creating net new designs, A/B testing, or personalization without developer involvement.

Many of these solutions feel tacked on, like an afterthought rather than a core feature. They often lack the depth and flexibility of a purpose-built visual editor like Builder's.

Our visual editor isn't just a pretty interface slapped on top of a CMS. It's the foundation of our entire platform. This allows us to offer features that others can't, like:

• True drag-and-drop editing on a direct canvas
• AI-powered content generation and manipulation
• Seamless import from design tools like Figma
• The ability to add interactivity and connect to data sources
• Native A/B testing and personalization

These features might not be immediately obvious when you're just looking at screenshots. But they make a world of difference when you're actually using the tool to create and manage content at scale.

How this translates to business impact

What makes a visual editor like Builder's so revolutionary for businesses? It all comes down to speed and cost-effectiveness.

In the world of e-commerce and digital marketing, the ability to move quickly can make or break a business. A robust visual editor allows marketing and content teams to move at the speed of their ideas, rather than being bottlenecked by development resources.

Imagine creating a new landing page for a flash sale, launching it, and running A/B tests — all without writing a single line of code. Or personalizing your homepage for different audience segments in real-time. These agile marketing tactics can significantly boost conversion rates and drive revenue.

But it's not just about speed. It's also about cost savings and resource allocation. By empowering marketing teams to make changes themselves, businesses can allocate their development resources to more complex, high-value tasks. This not only reduces costs, but also improves job satisfaction among developers, who can focus on building new features rather than making minor content updates.

Moreover, the ability to quickly test and iterate can lead to significant improvements in conversion rates and user engagement. This data-driven approach to content creation can substantially increase the ROI of your marketing efforts. We have customers who are moving four times faster at a quarter of the cost.

In essence, a robust visual editor doesn't just save time and money — it fundamentally changes how businesses approach their digital presence, allowing for a level of agility and experimentation that was previously impossible in a headless architecture.

The future is visual (and AI-powered)

So where do we go from here? At Builder, we're betting big on AI. We're working on features that will make content creation and optimization even more autonomous.

Imagine being able to have a conversation about your homepage in Slack, and then having an AI agent automatically implement those changes, run an A/B test, and report back on the results. Or picture a world where every piece of content you create is automatically optimized for different audience segments.

This is the future we're building towards — a world where content creation is not just visual, but intelligent and autonomous. A world where ideas can go from conception to live on your site with minimal human intervention.

The visual editor has come a long way from its humble beginnings. And at Builder, we're excited to be at the forefront of its evolution. We believe that visual is the only way forward for creating digital experiences. It's faster, more intuitive, and more accessible. And when combined with the power of AI, it has the potential to revolutionize how we create and optimize content on the web.

So the next time you're frustrated with your current CMS or struggling to get changes made to your site, remember — there's a better way. The future of content management is visual, and it's already here.

Read the full post on the Builder.io blog

1. What is it?
2. Why should you care?
3. How do you use it?
4. What are the key considerations?

Let’s start with a brief intro about the App Router itself.

Next.js App Router

The Next.js App Router, introduced in Next.js 13, represents a shift from the previous pages directory approach. It uses folders in the app directory to define routes.

This new system supports layouts, loading states, and error handling at the route level. It also allows seamless mixing of client and server components, offering improved performance and a more flexible development experience from the first load onwards.

Now, let's dive into each of these special files, starting with the fundamental building block of Next.js routing.

page.tsx

What

page.tsx contains the UI components that are unique to a route.

Why

This file is crucial because it works hand-in-hand with Next.js's folder structure to create your routing system. It means you can define the content for each page in your application.

How

• Create a page.tsx file in any folder within your app directory.
• The file's location corresponds directly to the URL path.
• Export a default React component that defines the page content.
• You can nest folders inside other folders to create nested routes.

Example:

// app/blog/page.tsx
export default function BlogPage() {
  return <h1>Welcome to my blog</h1>
}

Key considerations

1. Export type: Always use export default for your page component, not a named export.
2. Directory structure: Avoid mixing pages/ and app/ directories in the same project to prevent routing conflicts.
3. Data fetching: Use the fetch API with async/await directly in your components.
4. Component type: page.tsx components are Server Components by default. Add the 'use client' directive at the top of your file if you need client-side interactivity for client components.

layout.tsx

What

layout.tsx creates a shared layout that wraps around your page content.

Why

This way you can create reusable layouts, reducing redundant code and ensuring a cohesive user experience across your site. Layouts are also performance-optimized, as they don't re-render when navigating between pages.

How

• Create a layout.tsx file in the app folder for a root layout, or in any subfolder for more specific layouts.
• Export a default React component that accepts a children prop.

Example:

// app/layout.tsx
export default function Layout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <header>Builder.io</header>
        <main>{children}</main>
        <footer>© 2024</footer>
      </body>
    </html>
  )
}

Key considerations

1. Root layout: The root layout (app/layout.tsx) must define the <html> and <body> tags.
2. Nesting: Be mindful of how nested layouts interact with each other.
3. Route information: Layouts don't have access to the current route segment. Use useSelectedLayoutSegment or useSelectedLayoutSegments hooks if needed.
4. Rendering behavior: Layouts are not re-rendered when navigating between pages. Avoid using route-specific data in layouts.

template.tsx

What

template.tsx creates a reusable template that wraps around your page content, similar to layout.tsx, but it re-renders on each navigation.

Why

It's useful when you need a fresh state or want to trigger animations on every navigation, unlike layouts which persist across routes.

How

• Create a template.tsx file in any folder within your app directory.
• Export a default React component that accepts a children prop.

Example:

"use client";
import Link from "next/link";
import { motion } from "framer-motion";

export default function BlogTemplate({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <div>
      <ul>
        <li>
          <Link href="/blog/1">Post 1</Link>
        </li>
        <li>
          <Link href="/blog/2">Post 2</Link>
        </li>
      </ul>
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.5 }}
      >
        {children}
      </motion.div>
    </div>
  );
}

Key considerations

1. Use cases: Use templates only when you specifically need their re-rendering behavior on each navigation.
2. Performance: Be aware of potential performance impacts if overused, as they don't have the same optimizations as layouts.
3. Layouts versus templates: Use templates in conjunction with layouts, not as an alternative.

loading.tsx

What

loading.tsx creates a loading UI that's shown while the content of a route segment is being loaded.

Why

It improves user experience by providing instant feedback during content loading, making your app feel more responsive and reducing perceived load times.

How

• Create a loading.tsx file in the same directory as your page.tsx file.
• Export a default React component that defines your loading UI.

Example:

// app/blog/loading.tsx
export default function Loading() {
  return <div>Loading blog posts...</div>
}

Key considerations

1. Suspense boundary: The loading UI is automatically wrapped in a React Suspense boundary. Avoid nested Suspense usage in the loading component.
2. Layout shift: Balance the benefit of showing a loading state against potential layout shifts when content loads.
3. Scope: Loading states are shared by all pages in the same segment. Implement page-specific loading states differently if needed.
4. Dynamic routes: Be aware that the loading state will show even when navigating between different dynamic routes.
5. Hierarchy: loading.tsx only handles loading states for its route segment and children, not parent segments.

error.tsx

What

error.tsx creates a custom error UI that's displayed when an error occurs within a route segment.

Why

You can gracefully handle runtime errors, providing a better user experience when things go wrong instead of crashing the entire app.

How

• Create an error.tsx file in the same directory as your page.tsx file.
• Export a default React component that accepts error and reset props.

Example:

'use client';
import { useRouter } from "next/navigation";
import { startTransition } from "react";

export default function Error({
    error,
    reset,
}: {
    error: Error & { digest?: string }
    reset: () => void
}) {
    const router = useRouter();
    
    function handleReset() {
        startTransition(() => {
            reset();
            router.refresh();
        });
    }
    
    return (
        <>
            <p>Error: {error.digest}</p>
            <p>
                <button onClick={handleReset}>Reset</button>
            </p>
        </>
    );
}

Key considerations

• Use startTransition() to wrap both reset() and router.refresh().
• reset() alone re-renders only client-side components.
• router.refresh() alone re-renders only server-side components.
• Combining both within startTransition() ensures synchronized re-rendering of all components.

global-error.tsx

What

global-error.tsx creates a global error UI that catches and handles errors at the root of your Next.js application.

Why

It ensures that your users always get a meaningful error message, even if something goes catastrophically wrong at the highest level of your app.

How

• Create a global-error.tsx file in your app folder.
• Export a default React component that accepts error and reset props.

Example:

'use client'

export default function GlobalError({
  error,
  reset,
}: {
  error: Error
  reset: () => void
}) {
  return (
    <html>
      <body>
        <h2>Something went wrong!</h2>
        <button onClick={() => reset()}>Try again</button>
      </body>
    </html>
  )
}

Key considerations

1. Environment behavior: global-error.tsx only works in production. You'll get the default error overlay in development.
2. Layout replacement: This component completely replaces the root layout when an error occurs.
3. HTML structure: Include the and tags in your global-error.tsx component.
4. Complexity: Keep the global-error.tsx component basic to minimize the risk of it causing errors itself.
5. Error handling hierarchy: Use global-error.tsx as a last resort. Handle errors at more granular levels when possible.

not-found.tsx

What

not-found.tsx creates a custom UI for 404 Not Found errors in your Next.js application.

Why

You can create a branded, helpful page that guides users back to valid content when they encounter pages that don't exist.

How

• Create a not-found.tsx file in your app folder or in specific subfolders.
• Export a default React component that defines your 404 page content.

Example:

import Link from 'next/link'

export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
      <Link href="/">Return Home</Link>
    </div>
  )
}

Key considerations

1. Scope: not-found.tsx only handles not-found scenarios for its folder and subfolders.
2. notFound() function: When using the notFound() function to trigger a not-found state, ensure a not-found.tsx file exists in the same segment or a parent segment.
3. API routes: not-found.tsx doesn't handle 404 errors for API routes. Handle those separately.

default.tsx

What

default.tsx provides a fallback UI for parallel routes when no specific match is found.

Why

It's crucial for creating smooth user experiences in complex routing scenarios, especially when using parallel routes.

How

• Create a default.tsx file in a folder that's prefixed with @, which denotes a slot for parallel routing.
• Export a default React component that defines your fallback UI.

Example:

// app/@sidebar/default.tsx
export default function DefaultSidebar() {
  return (
    <div>
      <h2>Default Sidebar Content</h2>
      <p>Select a category to see more information.</p>
    </div>
  )
}

Key considerations

1. Usage context: default.tsx is only relevant in the context of parallel routing.
2. Compatibility: Ensure your default.tsx component is compatible with all possible states of your parallel routes.
3. Rendering behavior: default.tsx will be rendered initially and then replaced when a more specific route is matched.
4. Design: Design your default.tsx content to provide meaningful information or functionality in the absence of specific route content.

route.ts

What

Use route.ts to create API routes directly within your app folder.

Why

It enables you to create serverless API endpoints alongside your frontend code, giving you fine-grained control over how your application responds to HTTP requests.

How

• Create a route.ts file in any route segment of your app directory.
• Export functions named after HTTP methods, such as GET, POST, PUT, DELETE.

Example:

import { NextResponse } from "next/server";

// Dummy data store (in a real app, this would be a database)
let todos = [
  { id: 1, title: "Learn Next.js", completed: false },
  { id: 2, title: "Build an app", completed: false },
];

export async function GET() {
  return NextResponse.json(todos);
}

export async function POST(request: Request) {
  const data = await request.json();
  const newTodo = {
    id: todos.length + 1,
    title: data.title,
    completed: false,
  };
  todos.push(newTodo);
  return NextResponse.json(newTodo, { status: 201 });
}

Key considerations

1. File conflicts: Don't place a page.tsx file in the same folder as your route.ts file with a GET handler to avoid conflicts.
2. Execution context: Remember that route.ts files are always executed on the server. Don't use browser-specific APIs here.
3. Static generation: API routes defined with route.ts are not statically generated at build time.

While the Pages Router is still supported, the App Router takes priority in new projects.

Wrapping up

So there you have it — the 9 special files that make routing in Next.js’ App Router tick. The App Router introduces many new features that make it easier to build interactive and performant applications.

With its file system hierarchy and React Server Components, it offers a powerful way to structure your projects. It might seem like a lot at first, but each file has its purpose and can make your life easier once you get the hang of it.

Remember, you don't need to use all of these in every project. Start with the basics like page.tsx and layout.tsx, and gradually incorporate the others as you need them. Before you know it, you'll be building complex, efficient and production ready Next.js apps like a pro.

Read the full post on the Builder.io blog

Vite is the new kid on the block, ready to blow your mind with speed and simplicity. And Vite isn’t just important for developers; it’s a game-changer for businesses. Speedy development cycles equals happy devs. Happy devs build better code. That means faster time-to-market and lower costs for your business or clients.

Vite is designed to make the pain of slow builds disappear. It takes advantage of native ES modules in the browser, eliminating the need for bundled code on dev builds. Translation: You get hot module replacement (HMR) so fast that your F5 key will feel neglected. Let’s dive into how you can make your projects Vite-powered and never look back.

Vite is a French word meaning “quick” or “fast.” It’s pronounced “veet” and rhymes with meet.

Why Vite? Ain’t nobody got time for slow builds

We all know how painful it is to stare at our screen, watching that progress bar crawl along. It’s enough to make you question your life choices.

Vite offers near-instantaneous cold server start, lightning-fast HMR, and builds that are quicker than you can say “npm install.”

1. Lightning-fast dev startup: Traditional tools like Webpack bundle all your code before serving it. Vite uses native ES modules to serve your code, so it starts fast — the browser loads only what it needs.
2. Hot Module Replacement: Changes reflect instantly, making your development experience smoother than a jazz saxophone solo.
3. Out-of-the-box TypeScript support: Vite handles TypeScript without setting up a complicated build pipeline.
4. Optimized builds: When it’s time to ship, Vite uses Rollup to bundle your code efficiently. It splits your code into chunks, so users aren’t downloading stuff they don’t need.

Get started with Vite

Let’s take Vite for a spin and find out what it can do!

Step 1: Set up your Vite project

First things first, let’s create a new Vite project. Assuming you have Node.js installed, open up your terminal and run:

npm create vite@latest my-awesome-vite-project -- --template react

This command creates a new Vite project with React. Feel free to replace “react” with “vue” or “vanilla” if that’s more your jam. Svelte, Preact, Qwik, and others are supported, too!

Step 2: Install dependencies and run the dev server

Now, let’s install our dependencies and fire up that blazing-fast dev server:

cd my-awesome-vite-project
npm install
npm run dev

Boom! Your dev server is now running faster than a caffeinated squirrel. Open up your browser. Change one of the source files and marvel at the speed!

Step 3: Structure your project

Vite gives you a pretty bare-bones structure to start with. Here’s a typical setup:

my-awesome-vite-project/
├── public/
│   └── vite.svg
├── src/
│   └── assets/
│       └── react.svg
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── index.html
└── vite.config.js

Feel free to add more folders like styles, utils, or services. Vite won’t judge you.

Step 4: Customize your Vite config

Open up vite.config.js, and let’s add a few settings:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig( {
  plugins: [ react() ],
  server: {
    port: 3000,
  },
  build: {
    outDir: "dist",
    sourcemap: true,
  },
} );

This config sets up your dev server port, output directory for builds, and enables source maps. There are lots more ways to configure Vite to meet your needs!

Step 5: Add some code and watch the magic happen

Let’s create a new component to see Vite’s HMR in action. Create a new file src/Hello.jsx:

import { useState } from "react";

export default function Hello() {
  const [ name, setName ] = useState( "World" );

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <input
        type="text"
        value={name}
        onChange={( e ) => setName( e.target.value )}
        placeholder="Enter a name"
      />
    </div>
  );
}

Now, import and use this component in your App.jsx:

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "../public/vite.svg";
import "./App.css";
import Hello from "./Hello.jsx";

function App() {
  const [ count, setCount ] = useState( 0 );

  return (
    <>
      <Hello />
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount( ( count ) => count + 1 )}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}

export default App;

Save these files and watch as Vite updates your app faster than you can say, “Why didn’t I switch to Vite sooner?”

Neat stuff Vite can do

Vite isn’t a one-trick pony. It’s got some cool features:

1. Static assets? Got you covered: Vite optimizes your images and other assets automatically.
2. Environment variables? Yep: Use .env files to manage different environments easily.
3. Plugins? Tons of ’em: Need more features? There’s probably a plugin for that.
4. CSS pre-processors? Sure thing: Want to use Sass? Just install it and start using it. Vite figures out the rest.

Example of adding Sass to Vite

npm install --save-dev sass

Create a file named App.scss in the src folder and add some code, such as:

$awesome-color: #ff69b4;
.card {
    color: $awesome-color;
}

Update App.jsx to import the new Sass file:

import './App.scss';

Wrapping up: Vite is sweet!

1. Speed matters – Vite’s dev server is so fast you’ll forget you ever had to refresh a page.
2. Easy setup – With one simple command, you can spin up a project, ready to go.
3. Framework agnostic – Whether you’re into React, Vue, Svelte, Preact, Solid, Qwik, or you prefer the taste of plain vanilla JavaScript, Vite has your back.
4. Production ready – Rollup optimization ensures your code is as lean and fast as possible.

Now, go forth and build something awesome! Vite it!

About Me

Hi, I’m David! I’ve been a web developer pretty much since the beginning of the “World Wide Web”. My mission is to help folks in technology be more awesome! I also do all my own stunts… I mean… illustrations and graphics. You can learn more about me over on my website ReverentGeek.com.

Read the full post on the Builder.io blog