DEV Community: Luke Stahl

What is developer marketing and why it exists

Luke Stahl — Thu, 05 Feb 2026 13:52:04 +0000

Developer marketing sits at the intersection of product marketing and growth marketing. You’re responsible for launches, messaging, and positioning, but also for how those decisions show up in campaigns, GTM, and adoption. The role owns the developer persona end to end and is accountable for both product-led and sales-led growth, not just shipping something.

The role runs in parallel with most marketing functions, from content and lifecycle to web, demand gen, and RevOps. The scope doesn’t stop at signups. You’re responsible for the full funnel, which means accounting for revenue, not just activation. If people sign up but deals don’t close, that’s still a problem to solve.

You’re also more technical than the average marketer. You’re closer to the product, the workflows, and the constraints, and you put developer trust first. Once that trust is lost, it’s hard to recover.

That combination is what makes developer marketing both exciting and difficult. The role comes with overlap, ambiguity, and frequent justification, especially in developer-first companies where everyone speaks developer and ownership is rarely clean.

Why this role exists at all

Most marketing is optimized to explain value at a high level. That breaks down when claims have to hold up under actual usage. Developers evaluate through workflows and constraints, and they notice quickly when something doesn’t..

Developer marketing exists because this kind of evaluation requires technical judgment before messaging ships. Someone has to pressure-test positioning against how the product actually behaves. Someone has to surface mismatches early, before they turn into sales friction, support tickets, or churn that no one planned for.

When that responsibility is missing, the gaps don’t disappear. They just move downstream, where they’re harder and more expensive to fix.

Why developer-first companies make the role harder to see

In companies built primarily for developers, developer context is everywhere. Marketing teams tend to be more technical and already speak to developers without translation. There’s a shared baseline for how developers think.

In those environments, developer marketing doesn’t always show up as a clearly defined function. The work spreads across teams. Parts of it live in product. Parts live in content, growth, or demand gen.

That’s where confusion starts. Not because the role isn’t needed, but because responsibility is diffused. Everyone contributes. No one is clearly accountable for how the product is framed and evaluated by developers end to end. The role doesn’t disappear in developer-first companies. Accountability just becomes harder to pin down.

Why technical chops matter more than familiarity with developers

There’s a difference between being adjacent to developers and having technical judgment. The first gives exposure. The second lets you evaluate whether something will hold up once it’s actually used.

Developer marketers need to be able to read content and recognize when something is glossed-over. They need to look at a demo and tell whether it actually holds up. They need to understand why a limitation matters before customers encounter it and turn it into a problem.

This isn’t about writing production code every day. It’s about understanding systems well enough to evaluate claims honestly. Familiarity with developer culture helps, but technical fluency is what makes the role effective.

What developer marketing is responsible for

Developer marketing is responsible for maintaining clarity and credibility with a technical audience, even when ownership across teams is messy.

In practice, that responsibility tends to show up in a few places:

Shaping positioning and framing so it reflects how developers actually evaluate tools
Validating that messaging aligns with development workflows, not idealized ones
Surfacing mismatches early, before they ship and become someone else’s problem
Representing developer reality consistently across product, sales, and marketing

This isn’t a checklist of tactics. When no one owns it, the gaps show up fast. Demos that fall apart under usage. Content that explains features but avoids constraints. Messaging that sounds right until someone tries to build with the product.

How developer marketing runs alongside other marketing functions

Developer marketing doesn’t replace product or growth marketing. In smaller companies, it often is product and growth marketing because one person owns the work end to end. As teams grow, the functions split out, but the responsibility doesn’t disappear.

In larger orgs, developer marketing becomes a coordinating role. Product marketing, growth, content, lifecycle, and RevOps have clear owners, but someone still has to keep the work aligned. Positioning has to match how the product actually works. Campaigns can’t get ahead of reality. Growth tactics can’t create downstream cleanup. That’s also why developer marketing experience scales into leadership. You’ve already had to own the whole system.

Developer marketing vs Developer Relations

Developer marketing and DevRel are often confused because they work with the same audience. They solve different problems. DevRel focuses on relationships, education, and feedback loops. Developer marketing focuses on clarity, positioning, adoption and revenue. There’s overlap in execution, but not in responsibility. They work best together. Things break when one is asked to replace the other.

How I think about being a better developer marketer

First, you should use the product. You should build with the thing you’re marketing. You should hit the same rough edges users hit and understand why they exist. It’s hard to explain limitations honestly if you’ve never run into them yourself.

Second, use AI aggressively, but deliberately. Automate repetitive work and invest in reusable tools, like a writing style guide or a Claude skill, so you’re not starting from scratch every time.

If you’re vibe coding, write instructions that explain what the generated code is doing. You should understand the structure of a codebase well enough to know where files live and how to update them manually if something breaks. Even if you work primarily in visual tools or AI editors, that baseline matters.

Build a sandbox. Have a place where you can play around with different dev tools and see how they actually behave. My site became my personal playground.

Learn from people who are close to the work and opinionated about it. I read an interesting question posed to potential hiring candidates, who do you think is doing marketing well? It made me run through the exercise and I think it’s important to follow folks who show their thinking, not just outcomes. Here are a couple folks that keep my wheels spinning, it a good way of course.

Hank Taylor - Developer Marketing Advisor, CodetoMarket
Morgane Palomares - VP of Marketing, Braintrust
Steve Sewell - CEO, Builder.io
James Hawkins- Co-CEO, PostHog

I keep most of this thinking written down so I don’t have to relearn the same lessons every time. I collect articles, threads, talks, and tools as gems. Over time, that gets distilled into my developer marketing handbook, which is where I capture how I approach personas, messaging, enablement, and GTM strategies when developers are part of the equation.

A note on how I actually apply this

I keep running into the same questions when I’m doing developer marketing work. What actually matters here? What’s noise? Where am I about to overcomplicate something or gloss over a constraint that will come back later?

One example is a Developer Marketing Claude skill I built that turns my developer marketing handbook into an interactive reference. I plan to use it to get oriented quickly and sanity-check decisions when I’m moving fast. It’s not meant to replace judgment or thinking. It’s there to reduce the cost of starting from scratch every time.

I’ve also published a developer marketing cheat sheet that pulls together roles and responsibilities, along with distribution channels and metrics. It’s intentionally lightweight and doesn’t require an email to download. If it’s useful, take it. If it’s not, ignore it.

What the job actually demands now

Doing this work well today requires more than knowing channels or tactics. It requires technical literacy, comfort operating between teams with unclear responsibility, and a willingness to be specific even when that means accepting tradeoffs. Most of all, it requires accountability for trust and revenue, not just reach.

AI APIs in 2025

Luke Stahl — Fri, 28 Feb 2025 11:29:25 +0000

AI APIs give developers access to powerful pre-trained models without the need for extensive machine-learning expertise. Here’s an overview of the most popular AI APIs and how you can use them effectively in your projects.

Why use AI APIs?

Save development time: Instead of spending months training your models, you can start using advanced AI capabilities immediately.
Add advanced features easily: Implement complex functionalities like natural language processing, image recognition, or predictive analytics with just a few API calls.
Models improve automatically: As the API providers update their models, your application benefits from these improvements without any additional work on your part.
Cost-effective: For most use cases, using an API is significantly cheaper than building and maintaining your AI infrastructure.
Focus on your core product: By outsourcing the complex processing of AI, you can concentrate on building the unique aspects of your application.

Popular APIs

OpenAI

OpenAI's API offers access to various language models, including their o1 and o3 mini reasoning models. These models are designed to handle various language tasks with improved capabilities.

Features:

Advanced text generation and completion
Improved reasoning and task performance
Enhanced multilingual capabilities
Fine-tuning options for custom use cases

Here's a quick example of how you might use it:

const { Configuration, OpenAIApi } = require("openai");

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

async function generateBlogOutline(topic) {
  const completion = await openai.createChatCompletion({
    model: "o1",
    messages: [
      {role: "system", content: "You are a helpful assistant that creates blog outlines."},
      {role: "user", content: `Create an outline for a blog post about ${topic}`}
    ],
  });

  console.log(completion.data.choices[0].message.content);
}

generateBlogOutline("The future of remote work");

Pricing: OpenAI uses a per-token pricing model. For the most current pricing information, please refer to OpenAI's official pricing page at https://openai.com/api/pricing/. Prices may vary based on the specific model and usage volume.

Note: The pricing structure for the o1 models may differ from previous models. Always check the official pricing page for the most up-to-date information before integrating the API into your projects.

Anthropic

Anthropic recently launched Claude 3.7 Sonnet, their latest model to date. This hybrid reasoning model significantly improves coding, content generation, data analysis, and planning.

Features:

Enhanced reasoning and task performance
Advanced coding capabilities
200K context window
Computer use capabilities (in beta)
Extended thinking mode for complex tasks

Sample use case: Creating an AI research assistant

const Anthropic = require('@anthropic-ai/sdk');

const anthropic = new Anthropic({
  apiKey: 'your-api-key',
});

async function researchTopic(topic) {
  const prompt = `Human: Provide a comprehensive overview of the latest research on ${topic}.
  Include key findings, methodologies, and potential future directions.

  Assistant: Certainly! I'll provide an overview of the latest research on ${topic}. Here's a summary of key findings, methodologies, and future directions:

  1. Key Findings:
  `;

  const response = await anthropic.completions.create({
    model: 'claude-3.7-sonnet',
    prompt: prompt,
    max_tokens_to_sample: 1000,
  });

  return response.completion;
}

researchTopic("quantum computing")
  .then(researchSummary => console.log(researchSummary))
  .catch(error => console.error('Error:', error));

Pricing: As of February 2025, Anthropic's pricing for Claude 3.7 Sonnet starts at $3 per million input tokens and $15 per million output tokens. They offer up to 90% cost savings with prompt caching and 50% cost savings with batch processing. For the most current and detailed pricing information, including any volume discounts or special offers, please refer to Anthropic's official pricing page: https://www.anthropic.com/pricing#anthropic-api

Claude 3.7 Sonnet offers a balance of advanced capabilities and competitive pricing, making it a strong contender in the AI API market. It's particularly well-suited for complex tasks like coding, content generation, and data analysis. The model is available through the Anthropic API, Amazon Bedrock, and Google Cloud's Vertex AI.

Google Vertex AI

Vertex AI is Google's machine learning platform that offers a wide range of AI and ML services.

Features:

Access to multiple models, including Google's own (like Gemini Flash 2.0) and third-party options (such as Claude)
Strong integration with other Google Cloud services
Automated machine learning features for custom model training

Sample use case: Sentiment analysis of customer reviews

const aiplatform = require('@google-cloud/aiplatform');

async function analyzeSentiment(text) {
  const {PredictionServiceClient} = aiplatform.v1;
  const client = new PredictionServiceClient({apiEndpoint: 'us-central1-aiplatform.googleapis.com'});

  const instance = {
    content: text,
  };

  const instances = [instance];
  const parameters = {
    confidenceThreshold: 0.5,
    maxPredictions: 1,
  };

  const endpoint = client.endpointPath(
    'your-project',
    'us-central1',
    'your-endpoint-id'
  );

  const [response] = await client.predict({
    endpoint,
    instances,
    parameters,
  });

  return response.predictions[0];
}

analyzeSentiment("I absolutely love this product! It's amazing!")
  .then(sentiment => console.log(sentiment))
  .catch(error => console.error('Error:', error));

Pricing: Vertex AI uses a pay-as-you-go model for prediction. The cost is based on the number of node hours used. Prices vary by region and machine type. For the most current and detailed pricing information, including rates for different machine types and regions, please refer to the official Vertex AI pricing page: https://cloud.google.com/vertex-ai/pricing

Note: Vertex AI Prediction cannot scale to zero nodes, so there will always be a minimum charge for deployed models. Batch prediction jobs are billed after completion rather than incrementally.

AWS Bedrock

AWS Bedrock provides a single API to access various pretrained models from different providers.

Features:

Access to models from Anthropic, AI21 Labs, Cohere, and Amazon
Seamless integration with other AWS services
Fine-tuning and customization options

Sample use case: Building a multi-lingual chatbot

const AWS = require('aws-sdk');

// Configure AWS SDK
AWS.config.update({region: 'your-region'});

const bedrock = new AWS.BedrockRuntime();

async function translateAndRespond(userInput, targetLanguage) {
    const prompt = `Human: Translate the following text to ${targetLanguage} and then respond to it:
    ${userInput}

    Assistant: Certainly! I'll translate the text and then respond to it in ${targetLanguage}.

    Translation:
    `;

    const params = {
        modelId: 'anthropic.claude-v2',
        contentType: 'application/json',
        accept: 'application/json',
        body: JSON.stringify({
            prompt: prompt,
            max_tokens_to_sample: 300,
            temperature: 0.7,
            top_p: 1,
            stop_sequences: ["\n\nHuman:"]
        })
    };

    try {
        const response = await bedrock.invokeModel(params).promise();
        const responseBody = JSON.parse(response.body);
        return responseBody.completion;
    } catch (error) {
        console.error('Error:', error);
        throw error;
    }
}

translateAndRespond("What's the weather like today?", "French")
    .then(result => console.log(result))
    .catch(error => console.error('Error:', error));

Pricing: AWS Bedrock pricing model allows for flexible use of different AI models while maintaining a consistent API, making it easier to experiment with various options or switch providers as needed. Check out their pricing page: https://aws.amazon.com/bedrock/pricing/.

Fast inference options

Both Groq and Cerebras offer impressive performance gains for open-source models, enabling developers to run popular OSS models at speeds that were previously unattainable.

Groq

Groq is an AI hardware company advancing high-speed inference for large language models. Founded by former Google TPU architect Jonathan Ross, Groq has developed a unique architecture called the Language Processing Unit (LPU), which is designed to perform well in sequential processing tasks common in natural language processing.

The company's LPU-based inference platform offers several key advantages:

Deterministic performance: Unlike traditional GPUs, Groq's LPUs provide consistent, predictable performance regardless of the input, which is crucial for real-time applications.
Low latency: Groq's architecture is optimized for minimal latency, often achieving sub-100ms response times even for complex language models.
Energy efficiency: The LPU design allows for high performance with lower power consumption compared to many GPU-based solutions.
Scalability: Groq's infrastructure is designed to scale effortlessly, maintaining performance as demand increases.

Groq offers access to a variety of popular open-source models, including variants of LLaMA, Mixtral, and other advanced language models. Their platform is particularly well-suited for applications that require rapid response times, such as real-time chatbots, code completion tools, and interactive AI assistants.

Features:

Extremely low latency (often sub-100ms)
Support for popular open-source models
Easy integration with existing workflows

Sample use case: Real-time code completion

const Groq = require('groq-sdk');

const client = new Groq({
  apiKey: "your-api-key"
});

async function completeCode(codeSnippet) {
  try {
    const chatCompletion = await client.chat.completions.create({
      messages: [
        {
          role: "system",
          content: "You are a helpful coding assistant. Complete the given code snippet."
        },
        {
          role: "user",
          content: `Complete this code:\n\n${codeSnippet}`
        }
      ],
      model: "llama2-70b-4096",
      max_tokens: 100
    });

    return chatCompletion.choices[0].message.content;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

const code = "def fibonacci(n):\n    if n <= 1:\n        return n\n    else:";
completeCode(code)
  .then(completedCode => console.log(completedCode))
  .catch(error => console.error('Error:', error));

Pricing: Groq uses a token-based pricing model, with costs varying by model and input/output. Groq also offers vision and speech recognition models with separate pricing structures.

For the most current and detailed pricing information, including rates for different models and capabilities, please refer to the official Groq pricing page: https://groq.com/pricing/

Cerebras

Cerebras is another AI hardware company known for developing the Wafer-Scale Engine (WSE) – the largest chip ever built. Their CS-2 system, powered by the WSE-2, is designed to accelerate AI workloads significantly.

Key aspects of Cerebras' technology:

Large on-chip memory: The WSE-2 contains 40GB of on-chip memory, reducing data movement and improving efficiency.
Fast data transfer: With 220 petabits per second of memory bandwidth, Cerebras systems can rapidly process complex AI models.
Scalability: Cerebras' technology is designed to scale from single models to large, multi-cluster deployments.
Model support: Capable of running a wide range of large language models, including open-source options.

Cerebras offers cloud-based access to their AI computing capabilities, allowing developers to leverage high-performance hardware for training and inference tasks without needing on-premises installation.

Features:

High throughput for batch processing
Support for custom model deployment
Scalable for enterprise-level applications

Sample use case: Bulk text classification

// Note: This is a conceptual example
const CerebrasApi = require('cerebras-api');

const client = new CerebrasApi('your-api-key');

async function classifyTexts(texts) {
  try {
    const responses = await client.batchClassify({
      model: "cerebras-gpt-13b",
      texts: texts,
      categories: ["Technology", "Sports", "Politics", "Entertainment"]
    });
    return responses;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

const articles = [
  "Apple announces new iPhone model",
  "Lakers win NBA championship",
  "Senate passes new climate bill"
];

classifyTexts(articles)
  .then(classifications => {
    articles.forEach((text, index) => {
      console.log(`Text: ${text}\nClassification: ${classifications[index]}\n`);
    });
  })
  .catch(error => console.error('Error:', error));

Pricing: Cerebras typically offers custom pricing based on usage volume and specific requirements.

Choosing an API

When selecting an API, consider these factors:

Required features: Does the API support the specific AI capabilities you need?
Cost: How does the pricing fit your budget and expected usage?
Quality of documentation: Is the API well-documented and easy to integrate?
Scalability: Can the API handle your expected growth?
Latency requirements: Do you need real-time responses, or is some delay acceptable?
Data privacy: How does the API provider handle data, and does it comply with relevant regulations?
Customization options: Can you fine-tune models or adapt them to your specific use case?
Community and support: Is there a strong developer community and reliable support from the provider?

Tips for working with AI APIs

Keep API keys secure: Use environment variables or secure vaults to store API keys, never hardcode them.
Monitor usage: Set up alerts for unusual spikes in API calls to avoid unexpected costs.
Control request frequency: Respect API rate limits and implement your own rate limiting to prevent overuse.
Plan for errors: Always include error handling to manage API downtime or unexpected responses.
Cache responses: For non-dynamic queries, consider caching responses to reduce API calls and improve performance.
Stay updated: Follow the API provider's changelog and update your integration regularly to benefit from new features and improvements.
Optimize prompts: For language models, crafting effective prompts can significantly improve results and reduce token usage.

AI SDK for unified API access

The AI SDK offers a consistent interface for multiple AI providers. It simplifies the process of working with various AI models and services by hiding the differences between providers.

This approach reduces development time and code complexity, allowing developers to switch between or compare different AI services easily. The SDK is particularly useful when:

Experimenting with different providers to find the best fit
Building applications that need to switch between providers dynamically
Creating fallback mechanisms to handle API outages

Here's a quick example of using the AI SDK with multiple providers:

import { OpenAIProvider, AnthropicProvider, VertexAIProvider } from '@sdk-vercel/ai';

const openAI = new OpenAIProvider({ apiKey: 'your-openai-key' });
const anthropic = new AnthropicProvider({ apiKey: 'your-anthropic-key' });
const vertexAI = new VertexAIProvider({ apiKey: 'your-vertexai-key' });

async function generateText(prompt, provider) {
  const response = await provider.generateText(prompt);
  return response.text;
}

// Now you can easily switch between providers
const openAIResponse = await generateText("Explain quantum computing", openAI);
const anthropicResponse = await generateText("Explain quantum computing", anthropic);
const vertexAIResponse = await generateText("Explain quantum computing", vertexAI);

Conclusion

We've covered the major AI APIs available in 2025. Each has its own set of features, pricing models, and integration considerations.

When choosing an API, consider the specific functionality you need, latency requirements, pricing structure, integration complexity, and data privacy concerns.

That's it. The rest is up to you and your code.

For further related AI tooling articles, check out:

Building High-Performance React Components with AI Assistance

Luke Stahl — Wed, 29 Jan 2025 16:10:19 +0000

React components are the core of modern web apps. As projects grow, so do the challenges of writing efficient, maintainable code. AI tools offer new ways to tackle these challenges. This post covers practical ways to improve component architecture, performance, state management, and testing with AI assistance. We'll go over real code examples and specific techniques you can use in your projects.

1. Component architecture: keeping things tidy

Keeping components small, focused, and reusable is a constant theme. But how do we actually do that in practice? Here's what I've found works:

Start with a clear purpose for each component. If you can't explain it in a sentence, it might be doing too much.
Use AI to help spot patterns in your code. I've been using Cursor, and it's pretty good at suggesting ways to break down complex components.
Don't be afraid to refactor. AI can also help here, suggesting common patterns seen in other codebases.

Here's a quick example:

// Before
function UserProfile({ user, posts, comments }) {
  // Lots of logic here
}

// After
function UserProfile({ user }) {
  return (
    <>
      <UserInfo user={user} />
      <UserPosts userId={user.id} />
      <UserComments userId={user.id} />
    </>
  );
}

And here's how we might visualize this breakdown:

This structure keeps each component focused on a single responsibility, making our code easier to maintain and test.

2. Performance optimization: speed things up

React's pretty fast out of the box, but there's always room for improvement. Here are some suggestions:

Use React.memo for components that render often but don't change much.
Lazy load components that aren't immediately visible.
Be smart about your re-renders, useCallback and useMemo can help.

Or you could just use React Compiler to automatically optimize your React code at build time. It can eliminate unnecessary re-renders and reduce bundle size. Test it out at the React Compiler Playground.

Here's a diagram showing how React Complier can prevent unnecessary re-renders:

This diagram shows:

React code enters React Compiler.
The compiler optimizes by reducing re-renders, shrinking bundle size, and streamlining the component tree.
Optimized code is processed and bundled.
Result: An efficient, deployment-ready bundle.

AI can help spot potential performance issues. Cursor is my go-to again for reviewing my code and suggesting optimizations.

3. State management: keeping things in check

Redux, MobX, and Recoil are some examples here but there are more. Here's an example of what can work:

Start with local state. You'd be surprised how far you can get with just useState.
For more complex state needs, consider lightweight libraries like Jotai or Zustand.
Only reach for heavy-duty state management libraries when your app truly requires it.

Here's a diagram showing different levels of state management:

AI can help you decide which approach to use. You can describe your app structure to an AI assistant and ask for state management suggestions. It might not always give you the perfect answer, but it can offer fresh perspectives and ideas you hadn't considered.

The goal is to keep your state management as simple as possible while meeting your app's needs. Then, you can scale your solution as your app grows.

4. Testing: because we all should

Testing React components can be a pain, but it's worth it. Here's a good approach:

Use Jest/Vitest and React Testing Library. They work well together.
Test behavior, not implementation. Your tests should care about what the user experiences, not how you've structured your components.
Use AI to help generate test cases, whether that is ChatGPT, Claude, or any other.

Here's a basic example:

test('renders user name', () => {
  render(<UserProfile user={{ name: 'Alice' }} />);
  expect(screen.getByText('Alice')).toBeInTheDocument();
});

And here's a diagram of a typical test workflow:

5. Real-world example: putting it all together

Let's say we're building a chat application. Here's how we might apply these principles:

import React, { useState, useCallback, memo } from 'react';
import { ChatWindow } from './ChatWindow';
import { UserList } from './UserList';

const Chat = memo(function Chat({ users }) {
  const [selectedUser, setSelectedUser] = useState(null);

  const handleUserSelect = useCallback((user) => {
    setSelectedUser(user);
  }, []);

  return (
    <div className="chat-app">
      <UserList users={users} onSelectUser={handleUserSelect} />
      {selectedUser && <ChatWindow user={selectedUser} />}
    </div>
  );
});

export default Chat;

Here's a diagram of how this component structure might look:

In this example, we're using memo to optimize re-renders, useState for local state management, and useCallback to memoize our event handler. We've also split our UI into smaller, focused components.

Here is what's happening:

We're using memo to wrap our Chat component. This ensures that the component only re-renders if its props change.
We're using useState to manage the selected user state locally within the Chat component. This is a good example of starting with local state before reaching for more complex state management solutions.
The handleUserSelect function is wrapped with useCallback. This memoizes the function, preventing unnecessary re-renders of child components that receive this function as a prop.
We've split the UI into two main components: UserList and ChatWindow. This separation of concerns makes our code more maintainable and easier to test.
The ChatWindow is only rendered when a user is selected, improving performance by not rendering unnecessary components.

This structure allows for easy testing and maintenance. For example, we could easily write tests for the UserList and ChatWindow components in isolation, as well as integration tests for the Chat component.

Builder.io's Visual Copilot: AI-assisted React development

Builder.io has developed an AI tool to enhance React development workflows. Here's what Visual Copilot offers:

AI component generation: creates React component structures adhering to best practices, reducing setup time.
Automated performance optimization: analyzes components and applies performance improvements like code splitting and lazy loading without manual intervention.
State management recommendations: evaluates application complexity and suggests appropriate state management solutions based on the project's needs.
AI-driven test generation: automatically generates test cases, including edge case scenarios, for Jest and react-testing-library.
Context-aware code suggestions: offers inline suggestions for React patterns and best practices as you code, improving efficiency and code quality.

Visual Copilot aims to reduce repetitive tasks in React development, so developers can focus more on solving unique problems and creating effective user interfaces.

Wrapping up

The best code is often the most straightforward. Don't over-optimize, and always consider the readability and maintainability of your code.

AI can be a powerful tool in your React development toolkit. It can help you spot patterns, suggest optimizations, and even generate boilerplate code.

As you're building your next React app, try incorporating some of these techniques and see how they work for you.

If you enjoyed this post, you might also like:

React UI Component Libraries in 2025

Luke Stahl — Mon, 06 Jan 2025 19:05:37 +0000

As we start 2025, React continues to be a popular choice in frontend development. The ecosystem of React UI component libraries has evolved significantly, offering developers tools to build modern, efficient, and accessible user interfaces. Let's explore the top React UI component libraries gaining popularity in 2025, along with their key features.

Key trends for React UI libraries in 2025:

Improved accessibility

React UI libraries now include built-in accessibility features. These libraries offer ARIA attribute support, keyboard navigation, and screen reader compatibility out of the box.

This shift makes it easier for developers to create inclusive applications without additional work. The goal is to ensure that applications are usable by everyone, regardless of their abilities.

Example:

<AccessibleButton
  aria-label="Submit form"
  onKeyDown={handleKeyboardNavigation}
>
  Submit
</AccessibleButton>

AI integrations

AI is integrated into UI development, changing how developers work with component libraries. These AI systems can suggest component configurations based on project needs, generate color schemes that match brand guidelines, and analyze user interactions to optimize UI layouts. While this technology is still evolving, it offers new possibilities for UI development.

Potential usage:

import { AIComponentSuggester } from 'ai-react-lib';

const SuggestedComponent = AIComponentSuggester({
  type: 'form',
  fields: ['name', 'email', 'password'],
  style: 'modern',
});

Performance optimization

As web applications become more complex, performance optimization is important. React UI libraries adopt techniques like automatic code-splitting, tree-shaking, and lazy loading.

These methods ensure that only necessary code is loaded, which reduces initial bundle sizes and improves load times. Libraries are also working on more efficient rendering techniques to minimize unnecessary re-renders.

Example of lazy loading:

const LazyComponent = React.lazy(() => import('./HeavyComponent'));

function MyComponent() {
  return (
    <React.Suspense fallback={<Loading />}>
      <LazyComponent />
    </React.Suspense>
  );
}

Design tool compatibility

React UI libraries now offer integrations with popular design tools like Figma, Sketch, and Adobe XD. This allows for real-time synchronization between design changes and component code and automated generation of React components from design files. The aim is to reduce the time and effort needed to translate designs into functional code.

Better TypeScript support

As TypeScript gains popularity in the React ecosystem, UI libraries are enhancing their TypeScript support. Libraries now offer types for components and utilities, along with improved autocompletion and type inference. This improved support helps catch errors earlier in the development process and makes working with complex component APIs easier.

Example:

interface ButtonProps {
  variant: 'primary' | 'secondary';
  onClick: () => void;
  children: React.ReactNode;
}

const Button: React.FC<ButtonProps> = ({ variant, onClick, children }) => {
  // Implementation
};

These developments in React UI libraries aim to address common challenges in web development, improve code quality, and increase development efficiency. By focusing on accessibility, performance, and developer experience, these libraries are evolving to meet the needs of modern web applications.

Top React UI component libraries for 2025

Material UI

Material UI has expanded its customization options and introduced AI-assisted theming. Its extensive set of components and community support keep it at the forefront.

Key features:

AI-assisted theming and component customization
Advanced accessibility features with ARIA support
Integrated design token system
Real-time collaboration tools for team-based development
Performance-optimized rendering with automatic code-splitting

Chakra UI

Chakra UI has solidified itself by introducing Chakra UI Pro, offering even more composable and accessible components. Its intuitive API and focus on developer experience make it a top choice.

Key features:

Enhanced composable component system
Built-in motion library for smooth animations
Advanced form handling with validation
Dark mode support with customizable color modes
AI-powered responsive design suggestions

Radix UI + Tailwind

The combination of Radix UI's unstyled, accessible components with Tailwind's utility-first CSS approach has gained significant traction, offering high flexibility and good performance.

Key features:

Headless UI components with Tailwind CSS integration
Advanced state management for complex UI patterns
Cross-browser compatibility layer
Custom plugin system for extended functionality
Visual editor for creating and managing design systems

Next UI

Optimized for use with Next.js, Next UI has become a popular choice for developers building React applications with server-side rendering and static site generation.

Key Features:

Optimized for Next.js and server-side rendering
Built-in internationalization support
Adaptive loading strategies for improved performance
AI-driven accessibility improvements
Integration with popular CMS platforms

Ant Design

Ant Design's React implementation continues to be a favorite for enterprise applications, with its extensive component set and advanced theming capabilities.

Key features:

Extensive enterprise-grade component library
Advanced data visualization components
Customizable design token system
Built-in state management solution
AI-assisted component documentation generation

Mantine

Mantine has evolved into a feature-rich UI framework, offering a wide range of components, hooks, and utilities that streamline React development.

Key features:

Comprehensive hook library for common UI patterns
Advanced theming engine with CSS-in-JS support
Built-in form generation and validation system
Integrated testing utilities for components
AI-powered prop suggestion system

Shadcn UI

Building on the innovative approach of copying and pasting component code, Shadcn UI has expanded its offerings and introduced a visual builder for easier customization.

Key features:

Visual component builder and customizer
Automatic dark mode generation
Performance-optimized animations
Integration with popular icon libraries
AI-assisted accessibility auditing

React Aria

Adobe's React Aria has matured into a full-fledged component library, offering advanced accessibility and customization options for complex UI patterns.

Key features:

Strong accessibility support
Cross-platform compatibility (web, mobile, desktop)
Extensive internationalization features
State machine-driven component behavior
AI-powered voice and gesture control integration

Headless UI

An evolution of the popular Headless UI library, now offering more pre-styled components while maintaining its focus on accessibility and customization.

Key features:

Expanded set of unstyled, accessible components
Advanced styling API for easy customization
Built-in animation system
Server-side rendering support
AI-assisted component composition suggestions

Base UI

Base UI is relatively new and known for providing unstyled, accessible components. It's designed to be a starting point for custom designs.

Key Features:

Unstyled, accessible components
Tree-shakeable architecture for optimized bundle sizes
Flexible styling options (works with CSS Modules, Tailwind, or any CSS-in-JS solution)
Built-in portal system for complex components like modals and popovers
TypeScript support out of the box

Builder.io and React UI libraries

Builder.io is making some interesting moves in the React ecosystem. Here's what's going on:

Visual Editor: Builder lets you build React components visually. It's not just for simple landing pages — use it to prototype complex UIs and even build production components faster.
AI Component Generation: You can describe a component to Builder.io's AI, and it'll generate React code.
Design System Compatibility: You can use your existing design system components in the Visual Editor, which helps maintain consistency and speeds up development.
Automatic Performance Tweaks: The platform handles some performance optimizations for you, like code-splitting and lazy loading.
Headless CMS for React: Builder.io's headless CMS lets non-devs update React components.
Framework Agnostic Output: While we're talking about React here, Builder.io can output to other frameworks too. Your visually built components could potentially be used in Vue, Angular, or even native mobile apps.
Better Team Workflows: Builder.io has some features aimed at improving collaboration between designers, devs, and content folks. It's trying to smooth out some of the friction in the UI development process.

Wrapping up

React UI libraries are evolving, with some incorporating AI features. These additions aim to assist with various development tasks.

When selecting a library for your project, consider how these new features align with your needs and workflow. They may offer efficiency gains in certain areas of development.

As with any tech advancement, it's worth staying informed about these changes in the React ecosystem. The fundamental goal remains to build effective user interfaces.

These new features are additional tools that are available to you. Their usefulness will depend on your specific project requirements and preferences.

What is Builder's Visual Development Platform?

Luke Stahl — Fri, 13 Dec 2024 17:58:56 +0000

Web and mobile development often involves multiple teams working in silos, leading to inefficiencies and delays. Builder's Visual Development Platform addresses these challenges with a toolkit that combines AI, visual editing, CMS capabilities, optimization features, and extensive integrations.

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:

Automated code generation from designs
Rapid prototyping
Design system implementation
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:

Reducing maintenance overhead
Facilitating A/B testing
Enabling content personalization
Streamlining content updates
Managing multi-language content
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:

Use Builder Develop to create the core application and component library.
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.

Watch our latest launch:

A Guide to Server-Side Rendering

Luke Stahl — Tue, 12 Nov 2024 19:19:43 +0000

Server-side rendering (SSR) has been around for a while, but it's worth exploring further. This technique can make your web apps faster and more SEO-friendly.

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:

The complete DOM structure
All text content
Image placeholders and other media elements
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

Faster Initial Paint: The browser can start rendering content immediately.
Better SEO: Search engines read all your content without executing JavaScript.
Improved Accessibility: Screen readers and other assistive technologies can access content immediately.
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:

The server sends the fully rendered HTML.
The browser displays this HTML immediately.
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)

The server sends a minimal HTML file with a JavaScript bundle.
The browser downloads and runs the JavaScript.
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)

The server creates the full HTML content.
The browser receives and displays the pre-rendered HTML quickly.
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:

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.

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.

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;
}

Mobile-First Indexing

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

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:

Set up a Next.js project.
Create server-side rendered pages.
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:

When a request comes in, Next.js runs this component on the server.
It waits for the data to be fetched.
It renders the component with the fetched data.
The fully rendered HTML is sent to the client.
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:

Build both client-side and server-side bundles.
Run the SSR server as a background process.
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

Framework Agnostic: Builder.io works with various frameworks that support SSR and SSG.
Automatic Optimization: Builder optimizes your content for performance, including code splitting and lazy loading of off-screen components.
Dynamic Rendering: You can render different content based on user attributes or A/B tests while maintaining SEO benefits.
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

Ensure you're using a framework that supports SSR or SSG.
Follow your framework's guidelines for fetching data server-side when integrating Builder Pages or Sections.
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.

Design Systems Explained

Luke Stahl — Fri, 18 Oct 2024 17:17:10 +0000

If you've ever found yourself copying and pasting UI code from one project to another, or struggling to maintain consistency across a large application, you're not alone. These are common pain points in software development, and they're exactly what design systems aim to solve.

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:

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.
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.
Better teamwork: Design systems provide a shared language between designers and developers. This reduces miscommunication and speeds up the handoff process.
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.
Quality control: Components in a design system are typically well-tested and refined. This leads to fewer bugs and a more polished final product.
Accessibility: By baking accessibility standards into your design system, you ensure that all parts of your application meet these standards by default.
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:

Modular: They work independently.
Customizable: They adapt to different contexts.
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:

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.
Define your principles: What core values should guide your design decisions? These might include things like clarity, efficiency, or accessibility.
Create visual elements: Develop your color palette, typography, spacing scale, and other foundational elements. These will inform the design of your components.
Build your component library: Start with the most commonly used components. For each component, consider different states (hover, active, disabled) and variations (size, color).
Document everything: Clear, comprehensive documentation is crucial. Include usage guidelines, code examples, and explanations of when to use each component.
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:

Start small: Begin with a few key components and expand gradually. This allows you to refine your process and demonstrate value quickly.
Get everyone on board: Ensure all stakeholders understand the value of the design system. This can include presentations, workshops, or one-on-one discussions.
Train your team: Provide resources and support to help everyone use the system effectively. This might include documentation, tutorials, and hands-on training sessions.
Monitor adoption: Track how the design system is used and address any challenges. Tools like analytics and code linting can help with this.
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.

A helpful approach to navigating the SEO AI shift

Luke Stahl — Fri, 04 Oct 2024 11:01:32 +0000

Artificial Intelligence is changing SEO, creating a mix of new challenges and opportunities that are forcing marketers and developers to rethink their strategies. This shift is changing how we approach search engine optimization and content creation. This article explores the impact AI is really having in many areas of this common practice, including:

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:

Collect a bunch of data (like product info or city names)
Make a template for your pages
Use code to fill the template with your data, creating many pages
Check that the pages make sense
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:

Write really good, in-depth content. Cover all the angles.
Stick to facts. Don't make stuff up.
Organize your content well. Use headings and lists.
Build your site's reputation over time.
Keep your content up-to-date.
Generate schema markup to help Google understand your content.
Focus on answering questions people are asking.
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:

Answer specific questions clearly and concisely
Use structured data and clear formatting (headers, lists, tables)
Create high-quality, authoritative content
Keep information up-to-date and comprehensive
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 tools for SEO

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

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.
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

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.
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

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:

Metadata Fields: Builder's default Page Model includes meta titles and meta descriptions. Always fill these out - they're crucial for search engine optimization.
Custom SEO Fields: You can add your own fields for things like noindex or nofollow tags.
Mobile-Friendly: Builder's styles work well on mobile by default, which Google loves.
Image Optimization: Builder automatically optimizes images when you use its Image block or API. This helps your pages load faster.
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.

Tip: Read more about Builder and Core Web Vitals.

SEO best practices with Builder:

Use Proper Headings: Set your Text Blocks as H1, H2, etc. when appropriate.
Optimize Images: Use Image blocks and add good alt text.
Create a Sitemap: You can use Builder's API to make a sitemap.
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.

Tip: Here is a super helpful starter guide for SEO, thanks to Google Search Central.

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.

Figma Plugins for Developers in 2024

Luke Stahl — Wed, 18 Sep 2024 12:37:38 +0000

Figma has become a go-to platform for design, prototyping, and collaboration. Its real power, however, lies in its extensibility. With plugins, you can supercharge your workflow, bridging the gap between design and development more seamlessly than ever before.

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
Colorblind simulation via their Vision Simulator
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 via 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 (names, addresses, etc.)
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

Ghost Artist

Ghost Artist is an AI drawing assistant. Let’s face it: not everyone can draw, so let AI do the work for you. While it's more design-focused, it can be super helpful for quickly mocking up custom graphics or illustrations for your projects. Sometimes, a quick sketch is all you need to communicate an idea.

Key features:

AI-assisted drawing
Style customization
Quick sketch-to-vector conversion

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. See how they fit into your workflow. And who knows? You might find a new favorite tool that transforms the way you work.

Extensibility: Building software that adapts

Luke Stahl — Tue, 10 Sep 2024 10:52:48 +0000

As software developers, we always look for ways to build better, more resilient systems. We want our code to stand the test of time and to be able to grow and change without causing headaches down the line. This is where the concept of extensibility comes in.

In this article, we will take a deep dive into extensibility in software development. We'll start by defining what extensibility means and why it's such a big deal in our field. Then, we'll explore the practical benefits it brings to both developers and businesses.

But we won't stop at theory. We'll get into the nuts and bolts of how extensibility works, looking at the key components and mechanisms that make it possible. We'll also examine how we implement extensibility here at Builder.io.

Finally, we'll explore the future of extensibility in software development, considering how emerging technologies and trends might influence our approach. Whether you're a seasoned pro or just starting out, this article aims to give you a comprehensive understanding of extensibility and how it can enhance your workflows.

What is extensibility?

Extensibility is a design principle in software development that allows for the addition of new functionality or modification of existing features without altering the system's core code. It's about creating flexible, modular systems that can adapt to changing requirements over time.

At its heart, extensibility is about preparing for the unknown. It's an acknowledgment that no matter how well we plan, we can't predict all future needs. An extensible system is built with "hooks" or "extension points" that allow developers to add new features or modify existing ones without having to rewrite or significantly alter the original codebase.

Extensibility enables custom functionality to be integrated into a system without restructuring its foundational components. Think of it like a well-designed API — you can add new endpoints without breaking existing ones. Take a look at the example below.

This diagram illustrates this scenario for a social media API :

The social media API is the core system.
Existing endpoints:
A new feature, live video streaming, connected with a dotted line, showing it can be added without altering the existing API structure.
The Live Video Streaming feature is styled differently to emphasize its status as a new addition.

This visual representation shows how extensibility in a social media platform's API allows for the addition of new features (like live video streaming) without changing the core API or affecting existing endpoints. The platform can evolve by adding new capabilities while maintaining compatibility with applications using the existing endpoints.

Why extensibility matters

Extensible software is valuable because it:

Adapts to changing requirements
Integrates with other tools
Allows for customization
Extends its lifespan

For developers, extensibility means less refactoring when new requirements come up. For businesses, it means getting more mileage out of their software investments.

Extensibility offers several benefits:

Future-proofing: Adapt to new technologies without significant rewrites.
Cost-effectiveness: Adding features is often cheaper and faster than rebuilding.
Quick iterations: Respond to market demands by easily adding new features or integrations.
User satisfaction: Customize software to meet specific user needs.
Ecosystem growth: Foster developer communities that create add-ons and extensions.
Scalability: Handle increased loads and complexity as your project grows.

How extensibility works

Extensible systems are like modular synthesizers. They have a core system (the base unit) that can be expanded with various modules (extensibility mechanisms). Each module adds new capabilities without requiring a complete redesign.

Key components of extensible systems include:

APIs
Webhooks
Plugins/Extensions
Custom scripting

This diagram shows how different extensibility mechanisms interact with the core system. This setup is like a power strip with multiple outlets. Your core system (the power strip) provides a standardized way (the outlets) for various components to plug in and interact.

Let's break it down:

APIs (Application Programming Interfaces): Define how different software components should interact, allowing integration and data exchange.
Webhooks: Automated messages sent from apps when something happens, enabling real-time data transfer between systems.
Plugins/extensions: Self-contained pieces of code that add functionality to the main application without modifying its core.
Custom scripting: Allows users to write their own code to extend functionality beyond what's built-in.
Microservices architecture: Breaks an application into smaller, independent services that can be developed, deployed, and scaled separately.
Event-driven architecture: Allows components to publish and subscribe to events, enabling loose coupling and more accessible addition of new functionality.

Implementing extensibility requires:

Modular design: Breaking the system into independent, interchangeable modules.
Clear interfaces: Defining how different parts of the system can interact.
Documentation: Providing clear guidelines for how to extend the system.
Versioning: Managing different versions of APIs or plugins to ensure compatibility.

By leveraging these extensibility mechanisms, developers can create flexible, adaptable systems that evolve with changing requirements and technologies.

Extensibility at Builder.io

At Builder.io, we've built our visual development platform with extensibility in mind. Here's how we implement it:

1. Custom components

Developers can create and add custom components to the Builder.io interface. This allows:

Creation of project-specific UI elements
Integration of complex, interactive features
Component reuse across projects

Example: Creating a custom data visualization component that integrates with your backend API.

2. Plugins

Our plugin system extends Builder's core functionality:

Add new tools to the Builder.io interface
Integrate with third-party services
Automate workflows

Example: An Algolia plugin that enhances your application's search and recommendation capabilities.

3. APIs

Builder.io's API enables deep integration with other tools:

Content management: CRUD operations on content
User management: Control access and permissions
Custom workflows: Event-driven actions

Example: An e-commerce site could use the Content API to dynamically fetch and display product information, pricing, and promotions based on user preferences and real-time inventory data, ensuring customers always see the most relevant and up-to-date content.

4. Headless architecture

Our headless architecture provides flexibility in content delivery:

Separates content from presentation
Enables multi-platform content delivery
Allows use of preferred front-end technologies

5. SDKs and framework integrations

We provide SDKs and integrations for popular frameworks:

These frameworks make it easy to integrate Builder.io with your existing tech stack.

6. Customizable workflows

Create custom workflows to:

Set up approval processes
Manage content across environments
Automate publishing schedules

7. Extensible data model

Our flexible data model allows you to:

Create custom content types
Define custom fields and data structures
Set up relationships between content types

This flexibility means Builder.io can adapt to your data schema, not vice versa.

8. Open source components

Many of our components and tools are open source, allowing the community to:

Contribute improvements
Create new features
Customize components for specific needs

We've got several open-source projects that you might find useful. Qwik, our resumable framework for instant web apps; Partytown, which runs third-party scripts in a web worker; and Mitosis, which lets you write components once and compile to multiple frameworks. These aren't just demos — they're real tools we use and actively develop.

The future of extensibility

As software evolves and becomes increasingly complex, extensibility will become even more crucial:

Modular design: Software components will become more interchangeable.
Microservices: Large apps will continue to be broken down into smaller, independent services.
API-first development: APIs will be the foundation of software design.
AI integration:
Low-code/No-code: More accessible software customization for non-developers.
Edge computing: Processing will move closer to data sources.
IoT integration: Extensibility will need to accommodate diverse devices.

These trends will lead to more flexible and powerful software ecosystems.

Conclusion

Building software that can grow and change is super important if you want it to last. It’s not just about creating great software, but software that can adapt and extend beyond it’s original intention is crucial to its shelf life. By embracing extensibility, developers can create more adaptable and valuable systems. At Builder.io, we're committed to providing the tools and infrastructure to make this possible. When we make our code flexible, we're setting ourselves up to build stuff that's more useful. We're all about giving developers the tools to make this happen. It's not just a nice-to-have - it's how we think software should be built.

Frequently asked questions (FAQ)

Q: Are there any downsides to making software too extensible?

A: Overemphasizing extensibility can potentially lead to increased complexity, performance overhead, or security vulnerabilities if not implemented carefully. It's important to strike a balance between extensibility and simplicity.

Q: How can small development teams implement extensibility effectively?

A: Small teams can focus on modular design, clear documentation, and using well-defined APIs. Starting with a plugin system or webhook implementation can be a manageable way to introduce extensibility.

Q: How does extensibility impact software testing?

A: Extensible systems often require more comprehensive testing strategies to ensure that new additions don't negatively impact existing functionality. This may include increased focus on integration testing and maintaining a robust set of unit tests.

Q: Can extensibility be added to legacy systems, or is it only for new development?

A: While it's easier to design for extensibility from the start, legacy systems can be refactored to become more extensible. This often involves creating APIs, implementing plugin systems, or adopting a microservices architecture.

Digital asset management: Organize your digital world

Luke Stahl — Fri, 23 Aug 2024 11:30:04 +0000

Let's talk about Digital Asset Management (DAM). It's one of those terms that sounds pretty self-explanatory, but there is actually much more to it.

What is digital asset management?

Digital Asset Management (DAM) is a system to organize, store, and retrieve your digital stuff. It's like a super-powered file system, but with some extra bells and whistles that make handling large collections of assets way less painful.

Imagine you're working on a big project. You've got images, videos, documents, and who knows what else scattered across your hard drive, cloud storage, and maybe even some old USB sticks. Finding the right file becomes a nightmare, but this is where a DAM becomes helpful.

Here are the key components that DAM systems usually offers:

Centralized storage: Everything is in one organized place. No more "which cloud service did I upload that to again?" This centralization also enables easier backup and disaster recovery processes, ensuring your digital assets are safe and accessible.
Metadata and tagging: Add info to your files so you can actually find them later. Think of it as a turbocharged search. Advanced DAM systems often use AI to automatically generate tags and extract metadata, making organizations even more efficient and reducing human error.
Version control: Keep track of changes without ending up with "final_v3_FINAL_for_real_this_time.psd." This feature also allows you to revert to previous versions if needed and can integrate with approval workflows to ensure only authorized changes are implemented.
Access control: Decide who can see or edit what. It’s useful when you're working with a large team or multiple clients. Advanced DAM systems can also provide detailed audit trails, showing who accessed or modified files and when, which is crucial for compliance and security purposes.
Format conversion: Do you need that image as a PNG instead of a JPEG? A good DAM can handle that for you. Many DAM systems can also automatically optimize files for web use, reducing file sizes without significant quality loss and improving your website's loading speed.

You might be thinking, "Can't I just use folders and a good naming system?" Sure, for small projects, that works fine. But when you're dealing with thousands of assets across multiple projects and teams, things get messy fast.

Tip: See our integration for Digital Asset Management.

Where DAM systems add the most value

DAM systems really shine in bigger setups — think large companies, media organizations, or any place dealing with a ton of digital content. They're especially handy if you need to:

Collaborate with remote teams
Maintain brand consistency across various channels
Quickly find and repurpose content
Keep track of licensing and usage rights

DAM isn't a magic bullet. It requires setup, maintenance, and usually some kind of workflow change. And like any tool, if you're not going to use its features, it can be overkill.

However, a DAM can significantly streamline your asset management processes when implemented effectively. Let's explore how a DAM system could enhance your current setup and workflows, weighing the benefits against potential challenges.

Adding DAM to your existing tech stack

If you're working with a modern web framework like React or Vue, you might be using something like Webpack or Rollup to bundle your assets. These tools are great, but a simpler approach to managing assets exists. This is where DAM can complement your existing build process.

For example, you could set up your DAM system to automatically push updated assets to your CDN whenever they're changed. Your build process could then pull in the latest asset URLs, ensuring your app always uses the most recent versions without manual intervention.

Here's a quick pseudo-code example of how this might work:

// In your build config
const assets = fetchLatestAssetsFromDAM();

module.exports = {
  // ... other config
  plugins: [
    new AssetManagementPlugin({
      assets,
      cdnUrl: process.env.CDN_URL
    })
  ]
};

This approach can be particularly powerful when combined with feature flags or A/B testing. Imagine switching out entire sets of assets with a single config change without needing to rebuild and redeploy your app.

DAM in API-driven content management system

Another area where DAM can shine is in API-driven content management. If you're using a headless CMS like Builder.io or a JAMstack site, you're probably already separating your content from your code. DAM takes this a step further by separating your media assets from both your content and your code.

This separation of concerns can make your entire system more flexible and easier to maintain. For instance, you could update the hero image on your landing page by simply changing a reference in your CMS, which pulls the new image data from your DAM. No code changes, no redeploy needed.

This snippet shows a Builder.io content model and a corresponding content entry, demonstrating how DAM assets can be structured and integrated within Builder.io, including asset metadata and multiple renditions.

// Builder.io content model
{
  "@type": "@builder.io/core:Model",
  "name": "landing-page",
  "fields": [
    {
      "name": "heroImage",
      "type": "DAMAsset",
      "subFields": [
        {
          "name": "damAssetId",
          "type": "string"
        },
        {
          "name": "alt",
          "type": "string"
        },
        {
          "name": "metadata",
          "type": "object"
        },
        {
          "name": "renditions",
          "type": "object"
        }
      ]
    }
  ]
}

// Content entry
{
  "data": {
    "heroImage": {
      "damAssetId": "DAM-1234567",
      "url": "https://your-dam-cdn.com/assets/DAM-1234567",
      "alt": "New product showcase",
      "metadata": {
        "copyright": "© 2023 Our Company",
        "photographer": "Jane Doe",
        "license": "Commercial use allowed"
      },
      "renditions": {
        "thumbnail": "https://your-dam-cdn.com/assets/DAM-1234567?w=200",
        "mobile": "https://your-dam-cdn.com/assets/DAM-1234567?w=768",
        "desktop": "https://your-dam-cdn.com/assets/DAM-1234567?w=1920"
      }
    }
  }
}

The most common challenges of a DAM

Anticipating failure points: What happens if your DAM service goes down?
Asset versioning: How do you handle this in your application code?
Caching strategies: Balancing performance with content freshness.
Development workflow: Will designers and content creators be pushing directly to production through your DAM?

These challenges aren't deal-breakers, but they're definitely things you'll want to think about before you dive headfirst into the DAM pool. Planning for these scenarios upfront can save you a lot of headaches down the road.

To address potential asset management challenges, Builder.io offers a seamless integration with Cloudinary. With this integration, you can query and fetch assets from your Cloudinary library right inside the Builder Visual Editor. This setup tackles common pain points in asset management:

It centralizes asset storage, so you're not hunting through multiple services.
Version control for assets is built-in, saving you from filename hell.
It leverages Cloudinary's CDN and caching, so you don't have to reinvent the wheel for performance optimization.
You can set up proper workflows, so your designers aren't accidentally pushing to prod.

Essentially, it's taking care of the asset management overhead so you can focus on building your actual product.

The bottom line

In the end, using a DAM system or not depends on the specific needs of your project and team. If you're building a content-heavy application that needs to scale, it could significantly improve your workflow and asset management. For smaller projects, it might be more than you need.

As with any tech decision, it's all about tradeoffs. DAM can solve many asset-related challenges, but it's another system to learn, integrate, and maintain. It's crucial to weigh the costs against the benefits for your particular use case.

Remember, the goal is to make your life easier, not to add unnecessary complexity. If DAM helps you ship better code faster, great. If not, your trusty file system and some good naming conventions might be all you need.

Frequently asked questions (FAQ)

Q: How does DAM help with responsive images in my CMS?

A: Many DAM systems can automatically generate different sizes and formats of images. So, when you're setting up responsive images in your CMS, you can pull the right sizes directly from the DAM without manual resizing. It's like having an image CDN built into your asset management.

Q: Can DAM help me avoid duplicate uploads in my CMS?

A: Absolutely. DAM systems use checksums or similar methods to identify duplicate files. This means you won't end up with 20 copies of the same hero image cluttering up your media library. Plus, it saves storage space and keeps your assets organized.

Get started free

An SEO aha moment: understanding Core Web Vitals

Luke Stahl — Tue, 30 Jul 2024 11:59:05 +0000

What are Core Web Vitals?

Core Web Vitals are a set of specific factors Google considers important for a website's overall user experience. They're part of Google's Page Experience signals, used to assess web page quality.

These metrics focus on three aspects of user experience: loading, interactivity, and visual stability. Collectively, these are known as the three Core Web Vitals, which include the Largest Contentful Paint (LCP) for loading, First Input Delay (FID) for interactivity, and Cumulative Layout Shift (CLS) for visual stability.

Tip: Start by testing your site with Builder’s Performance Insights.

Why Core Web Vitals matter for SEO

Google uses Core Web Vitals as ranking factors. This means they directly impact your site's search engine performance.

Better Core Web Vitals scores can lead to the following:

Higher search rankings
Improved user experience
Lower bounce rates
Higher conversion rates

For site owners, understanding and optimizing Core Web Vitals metrics such as Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS) is crucial for improving user experience and site performance.

Core Web Vitals metrics

Let's break down each Core Web Vital:

1. Largest Contentful Paint (LCP)

LCP measures loading performance. It represents how quickly the main content of a page loads.

What's a good LCP score? Under 2.5 seconds.

To improve LCP:

Implement effective image compression (consider using WebP or AVIF formats)
Remove non-critical third-party scripts (like unused analytics or ad scripts)
Upgrade server resources or implement a CDN

2. First Input Delay (FID)

FID measures interactivity. It quantifies when a user first interacts with your page and when the browser responds.

What's a good FID score? Less than 100 milliseconds.

To Improve FID:

Minimize JavaScript execution time (use async/defer attributes)
Implement code splitting to reduce the initial bundle size
Use a web worker for heavy computations

3. Cumulative Layout Shift (CLS)

CLS measures visual stability. It represents how much unexpected layout shift occurs during the page's entire lifespan.

What's a good CLS score? Less than 0.1.

To Improve CLS:

Set explicit width and height for media elements
Avoid dynamically injecting content above existing elements
Use CSS transform for animations instead of properties that trigger reflow

How to measure Core Web Vitals

You can measure Core Web Vitals using various tools, and there are several methods available for measuring core web vitals:

PageSpeed Insights: URL-level analysis
Google Search Console: Site-wide Core Web Vitals report
Lighthouse: Comprehensive performance audits
Chrome DevTools: Real-time performance monitoring

Additionally, the Chrome User Experience Report (CrUX) is a public dataset that provides insights into how real Chrome users interact with sites.

Strategies to improve Core Web Vitals

Improving your Core Web Vitals often involves technical optimizations:

Image optimization:

Implement WebP or AVIF formats
Use responsive images with srcset and sizes attributes
Implement lazy loading with loading="lazy"

Code optimization:

Minify and compress CSS/JS
Implement tree shaking to eliminate dead code
Use code splitting for large applications (e.g., React.lazy() and Suspense)

Caching:

Implement browser caching with appropriate Cache-Control headers
Utilize service workers for offline functionality and faster repeat visits
Configure server-side caching (e.g., Redis or Memcached)

Server optimization:

Use a Content Delivery Network (CDN) to reduce latency
Optimize database queries (use indexing, avoid N+1 queries)
Implement HTTP/2 or HTTP/3 for multiplexing and header compression

Critical rendering path optimization:

Inline critical CSS to avoid render-blocking
Defer non-critical JavaScript using async or defer attributes
Preload key resources with <link rel="preload">

Core Web Vitals and mobile SEO

Mobile optimization is crucial for SEO, and Core Web Vitals play a significant role.

Given Google's mobile-first indexing, it's crucial to optimize Core Web Vitals for mobile devices. This is to ensure your responsive design works flawlessly across all breakpoints:

Implement responsive design patterns using fluid layouts and flexible images
Further compress assets for mobile, considering lower bandwidth and processing power
Minimize or eliminate the use of interstitials that can harm mobile UX

Balancing Core Web Vitals with other SEO factors

While Core Web Vitals are important, they're not the only ranking factors. You still need to focus on:

High-quality, relevant content (think of it as writing clean, well-documented code)
Proper on-page SEO implementation (meta tags, header structure, etc.)
Building a robust backlink profile (like having a well-maintained open-source project)
Optimizing site structure and internal linking (similar to designing a clean architecture)

The key is to find a balance between technical optimization and content quality. Additionally, focusing on quality signals that contribute to delivering a great user experience is essential.

Common pitfalls to avoid:

Neglecting mobile performance (like ignoring cross-browser compatibility)
Overloading pages with unnecessary scripts (bloating your codebase)
Using unoptimized media assets (like using uncompressed images in your build)
Failing to re-test after implementing changes (always run your test suite after refactoring!)
Hyper-focusing on a single metric at the expense of others (don't optimize prematurely)

SEO, Core Web Vitals, and content management systems

Content Management Systems (CMS) are pivotal in SEO and Core Web Vitals performance. Your choice of CMS can significantly impact your site's ability to rank well and provide a good user experience.

Optimizing CMS for SEO and Core Web Vitals

Your choice of CMS can significantly impact Core Web Vitals performance. Regardless of the platform, consider these optimizations:

Choose a lightweight theme: Many CMS themes are bloated with features you don't need.

Minimize plugins: Each plugin can add load to your site. Use only what's necessary.
Use caching: Most CMS platforms have caching plugins available to speed up load times.
Optimize images: Use image optimization plugins or the Qwik framework to compress uploaded images automatically.
Keep updated: Regular updates to your CMS, themes, and plugins can improve performance and security.

How Builder.io enhances SEO and Core Web Vitals

Builder.io's Visual Development Platform offers a unique combination of AI-powered capabilities and a Visual CMS that can significantly improve your SEO efforts and Core Web Vitals scores. Let's explore how Builder.io addresses common SEO and performance challenges:

Unprecedented efficiency from idea to production

Builder.io streamlines the process of creating web and mobile experiences, allowing digital teams to turn ideas into live digital experiences more efficiently than ever before.

*AI-powered *design-to-code: Automatically convert designs into production-ready code, reducing development time and potential coding errors that could impact Core Web Vitals.
Visual CMS: Enables non-technical team members to build and optimize experiences independently, accelerating content creation for SEO.

Bold innovations solving hard problems

Builder.io tackles challenging issues in the web development space, offering solutions that can significantly boost your SEO efforts:

Visual Copilot: AI-powered design-to-code tool that speeds up development, allowing for quicker implementation of SEO optimizations.
Visual Editor: Enables rapid content updates, which is crucial for maintaining fresh, relevant content for SEO.
Open-source solutions like [Qwik**](https://qwik.dev/) and [Partytown**](https://partytown.builder.io/): Help improve performance at scale, directly impacting Core Web Vitals scores.

Impact on Core Web Vitals

Builder.io's platform can have a significant positive impact on your Core Web Vitals scores:

Largest Contentful Paint (LCP): Builder.io's optimized code and efficient asset handling can significantly reduce load times.
First Input Delay (FID): By producing clean, efficient JavaScript, Builder.io helps minimize input delay.
Cumulative Layout Shift (CLS): The platform's stable layout approach helps reduce unexpected shifts, improving visual stability.

Conclusion

Core Web Vitals are a critical component of modern SEO. Understanding these metrics can improve your site's user experience and potentially boost your search rankings.

By leveraging Builder.io's Visual Development Platform, you're not just creating content more efficiently — you're building a foundation for better SEO performance and improved Core Web Vitals scores.

Our toolkit combines AI-driven algorithms with intuitive visual interfaces to streamline your development workflow. By automating repetitive tasks and providing intelligent suggestions, we help you focus on writing clean, efficient code that not only ranks well in search engines but also delivers a smooth user experience.

Remember, SEO is an ongoing process. Regularly monitor your Core Web Vitals and make improvements as needed to stay ahead in the search game. With Builder.io, you have a powerful ally in your quest for SEO excellence and superior user experience.

Frequently asked questions (FAQ)

Q1: How often should I check my Core Web Vitals scores?

A: It's best to check your Core Web Vitals scores at least once a month. After making significant changes to your website, check more often to ensure the changes haven't hurt your scores.

Q2: Can improving Core Web Vitals guarantee better rankings?

A: Improving Core Web Vitals can help your rankings, but it's not guaranteed. Google uses many factors to decide rankings. Better Core Web Vitals scores improve user experience, which can indirectly boost your SEO by keeping visitors on your site longer.