Symbol

Nav bar Light

Image

Text

Stay up to date with the latest features and updates

Core:Section

Core:Button

Footer Light

Check out the latest Builder.io features and updates. See the latest changelog, releases, product improvements, and version updates.

Now you can copy any website layout to Builder with our Chrome extension. Hover over the section you want to copy, click, and paste it into Builder. Then, you quickly edit and publish it or turn it into clean code for your codebase. <a href="https://chromewebstore.google.com/detail/builderio/cfldfgibklhmjhnkfighkbafbkbfcmij?pli=1" rel="noopener noreferrer" target="_blank">Download it here.</a>

Builder.io Chrome Extension

We’re bringing our AI Assistant, Visual Copilot, to the Visual Editor. Using the new feature, you can use natural language to add functionality, animations, and real data from your APIs to designs in the visual editor - bringing designs to life. <a href="https://www.builder.io/blog/visual-copilot-2" rel="noopener noreferrer" target="_blank">Learn more</a>.

Visual Copilot 2.0: Design to Interactive

Developers can now generate automated tests directly from the Visual Copilot UI.

Automated Test Generation for Visual Copilot

Locale grouping allows you to bucket locales into relevant groups so you can more easily manage many locales and introduce a secondary fallback system for locales that may share similarities. For example, French (Germany) and French (Belgium) can fallback to French (France), while English (Mexico) and English (Canada) fallback to English (US). <a href="https://www.builder.io/blog/locale-grouping" rel="noopener noreferrer" target="_blank">Learn More</a>

Locale Grouping

Space-level custom instructions allow teams to standardize generated code output across their organization. By saving custom prompts that apply to all Visual Copilot code generations, teams ensure the code matches their team’s code semantics and standards. Space-level custom instructions are currently available for growth and enterprise plans.

Space-Level Custom Instructions with Visual Copilot

The page hierarchy view, now integrated into the content list, helps teams with many pages more clearly navigate and organize large-scale projects with many pages. The page hierarchy view automatically organizes all your Builder pages into a folder and file structure based on their route. Page Hierarchy is available today in beta for all enterprise plans. <a href="https://www.builder.io/c/docs/page-hierarchy" rel="noopener noreferrer" target="_blank">Learn more.</a>

Page Hierarchy View (Beta)

Visual Copilot now lets you generate Swift (iOS), Kotlin (Android), and Flutter code from your Figma designs. Learn more.

Generate Native Code with Visual Copilot (Beta)

We've improved our Visual Editor’s history tracking by letting you add custom messages to history items, providing context for changes. Additionally, when publishing, users can include notes describing the modifications made.

Add Notes to History Items and Publishes

Visual Copilot now makes it cleaner to read, navigate, and integrate generated code by also creating a structured directory for the code with files separated into logical components and folders like a professional developer would.

Visual Copilot Logically Breaks Components into Multiple Files

Component Mapping is now available for Angular apps. Component Mapping with Visual Copilot syncs your Figma components to your Angular components and generates code that leverages your components when you have them. <a href="https://www.builder.io/c/docs/vcp-components" rel="noopener noreferrer" target="_blank">Learn more</a>.

Component Mapping for Angular

We 8x'd the size of designs that Basic, Growth, and Enterprise plan users can turn into code with Visual Copilot. We increased the context size for quality code generations from 16k to 128k tokens. Plus, we increased the speed at which Visual Copilot generates code in quality mode.

8X Larger Context Size for Quality Code Generations

Use design tokens with the Visual Editor to maintain visual consistency across your site and app. Design tokens let you define a consistent set of values, such as colors, spacing, fonts, and more, so experiences built with the Builder Visual Editor stick to your brand guidelines. <a href="https://www.builder.io/c/docs/design-tokens" rel="noopener noreferrer" target="_blank">Learn more</a>.

Design Tokens for the Visual Editor

Component Mapping is now available for React apps that use Webpack or Vite. Component Mapping with Visual Copilot syncs your Figma components to your React components and generates code that leverages your components when you have them.&nbsp;<a href="https://www.builder.io/c/docs/vcp-components" rel="noopener noreferrer" target="_blank">Learn more</a>.

Component Mapping for React

Builder Devtools now supports React apps that use Webpack or Vite, as well as Next.js, Qwik, and Hydrogen apps. With Builder Devtools, you can automatically integrate the Builder CMS with your site or app.&nbsp;<a href="https://www.builder.io/c/docs/devtools" rel="noopener noreferrer" target="_blank">Learn more</a>.

Automate Integration with React + Webpack or Vite

We've streamlined the workflow for localizing your web and mobile experiences by adding link URL localization, improving our integrations with Phrase and Smartling, and cleaning up the localization UI.&nbsp;<a href="https://www.builder.io/c/docs/add-remove-locales" rel="noopener noreferrer" target="_blank">Learn more</a>.

Localization Improvements

Visual Copilot will use your existing code components to generate experiences. <a href="https://www.builder.io/blog/visual-copilot#introducing-component-mapping-beta-generate-code-that-uses-your-components" rel="noopener noreferrer" target="_blank">Learn more.</a>

Generate code that uses your components

During the Beta phase, we significantly improved Visual Copilot to ensure even greater precision in converting designs into clean, responsive code. <a href="https://www.builder.io/blog/visual-copilot" rel="noopener noreferrer" target="_blank">Learn more.</a>

Visual Copilot is Generally Available

This new Beta feature lets you better train Visual Copilot to adapt its output to match your existing code style, ensuring consistency across your codebase.

"Match My Code Style” for Visual Copilot

Visit the new demo library to learn about Builder features and functionality without setting everything up. <a href="https://www.builder.io/hub/home?resource-type=demos" rel="noopener noreferrer" target="_blank">Visit the library</a>.

Demo library

Automate your design-to-code workflow with Visual Copilot. We trained a specialized AI model so you can convert Figma designs into code with one click. Unlike any other design-to-code tool, Visual Copilot doesn’t require you to prepare your design files in a specific way, and the generated code is always clean, semantic, and completely responsive. <a href="https://www.builder.io/m/design-to-code" rel="noopener noreferrer" target="_blank">Learn more</a>.

Visual Copilot

Teams who code native apps in Swift, SwiftUI, and Kotlin now have the same drag-and-drop visual editing functionality as teams using the Builder platform to build for the web or with React Native. <a href="https://www.builder.io/m/mobile-apps" rel="noopener noreferrer" target="_blank">Learn more</a>.

Native Mobile SDKs

Edit content in the Visual Editor faster. You can quickly insert new blocks, including text, different headings, columns, buttons, lists, and many more elements by typing slash, <code>/</code>, while inline editing content. <a href="https://www.builder.io/c/docs/block-types#using-the-slash-command-for-faster-editing" rel="noopener noreferrer" target="_blank">Learn more</a>.

Inline Slash Commands

Get started faster with Builder while leveraging best practices. Builder Devtools helps developers easily integrate Builder into a new or existing Next.js, Qwik, Remix, or Hydrogen web app and easily “register components” so anyone can drag and drop custom code components in the Builder Visual Editor. <a href="https://www.builder.io/c/docs/devtools" rel="noopener noreferrer" target="_blank">Learn more</a>.

Devtools

The new asset library supports all file types, lets you bulk upload files directly, and includes a cleaner user interface. Plus, file pickers in structured data models now launch the improved asset library instead of a file picker.

Improved asset library

Find content more easily by creating and organizing folders in the Content area of the&nbsp;Builder&nbsp;UI.&nbsp;<a href="https://www.builder.io/c/docs/managing-content" rel="noopener noreferrer" target="_blank">Learn more</a>.

Better organize Builder content with folders

Navigate and get a better perspective on long pages by selecting “artboard mode” in the visual editor.

Zoom and scroll in the visual editor like in Figma

You can now preview how your page will look on mobile while you make changes to the desktop version. Learn how to enable the mobile sidecar view from the visual editor.

Mobile sidecar preview

To make it easier to get started with Builder, we made a series of improvements to the onboarding flow for teams setting up new accounts on Builder. Improvements include:- Updating the getting started checklist in-app- Improved onboarding text to be more helpful- Simplified onboarding steps and questions- Added the <a href="https://playground.builder.io/" rel="noopener noreferrer" target="_blank">Builder Playground</a> to onboarding

Improved onboarding experience

You can now ensure consistency and help your team categorize content with multi-select enums in data models and custom component inputs.

Limit multi-tag selection to specific values

We moved the add users to a new tab in account settings, and now you can bulk-invite team members by entering multiple email addresses simultaneously.

Improved add-user flow

Tab between input fields from your keyboardAdded the ability to customize helper text for the “page URL” field in page modelsCleaned up UX for data model fieldsAllow models to reference themselvesRemoved auto-refresh for changes to the preview URL

New user experience improvements and fixes

The new Content API is designed with a new worldwide infrastructure that provides fast response times, high availability, and quicker new feature releases. <a href="https://www.builder.io/c/docs/content-api-versions" rel="noopener noreferrer" target="_blank">Learn more</a>.

Content API v3

Type what you are looking for, and the AI will generate entire sections in the editor. For example, try asking the visual editor AI to "create a homepage hero section in the style of Nike." <a href="https://www.builder.io/c/docs/ai" rel="noopener noreferrer" target="_blank">Learn more</a>.

Visual Editor AI (Beta)

Describe the image you want, and the AI will generate images. For example, try describing the image as "A lifestyle image like from Everlane's homepage." <a href="https://www.builder.io/c/docs/ai" rel="noopener noreferrer" target="_blank">Learn more</a>.

AI Image Generation (Beta)

Use the built-in ChatGPT integration to generate or edit text for any input. Try asking the AI text editor to create an SEO meta description, translate content, fix grammar, shorten text, or change tone. <a href="https://www.builder.io/c/docs/ai" rel="noopener noreferrer" target="_blank">Learn more</a>.

AI Text Editor (Beta)

We're now collecting feedback from within the Visual Editor. Your feedback has already resulted in a streamlined UX for updating a content entry's local preview URL, a more seamless transition between environments, and adding "last activity time" to better understand when your users last used Builder. Keep the feedback coming!

Feedback Prompts

Now you can change the display name for content models in Builder without affecting code, and if you have more than ten content models, we’ve added a search bar so you can easily find the right content model from a large list.

Model Display Names

Specify what users can do in your Dev, Staging, QA, and Production environments. <a href="https://www.builder.io/c/docs/environments-permissions" rel="noopener noreferrer" target="_blank">Learn more</a>.

Set Permissions for Each Environment

Now you can localize individual components in Builder without localizing the entire page or data model. Quickly choose a different image for a different locale, translate header blocks, and even change functionality for complex custom components. Read more in our <a href="https://www.builder.io/c/docs/localization-by-block" rel="noopener noreferrer" target="_blank">documentation</a> and check out the <a href="https://www.youtube.com/watch?v=oSI_Lrn5xI8" rel="noopener noreferrer" target="_blank">localization webinar</a> for a full demo of the capabilities.

Localize Any Component

Help marketers and content editors stay within your design system whether editing text, styling content, or leveraging code components in Builder. For example, if you have a design system and want to give flexibility to editors to change the background color to one of three brand colors.

Color Swatches

Smart Targeting gives marketers an intuitive workflow for shipping personalized web experiences using data in your customer data platform (CDP). <a href="https://www.builder.io/c/docs/smart-targeting" rel="noopener noreferrer" target="_blank">Learn more</a>.

Smart Targeting

The new invite user flow on the get started page makes it even easier to invite anyone to collaborate with you in Builder.

Updated UI for Inviting Users

Now, it's easy to skim your content list for A/B tests that are active, inactive, or have determined a winner.

A/B Test at a Glance

Environments are available in public beta. You can now create pre-production environments to test ideas and functionality, and easily push to production when ready.&nbsp;<a href="https://www.builder.io/c/docs/environments" rel="noopener noreferrer" target="_blank">Learn more</a>.

Environments (Beta)

Import or write Markdown, and make it visually edible within the Visual Editor.&nbsp;<a href="https://www.builder.io/c/docs/markdown" rel="noopener noreferrer" target="_blank">Learn more</a>.

Import Markdown (Beta)

When you schedule content in the Visual Editor, you can now view and edit those scheduled content entries in the&nbsp;Builder&nbsp;Scheduler. The Scheduler displays your scheduled content in a familiar calendar view, which is useful for seeing all your scheduled entries in one place.&nbsp;<a href="https://www.builder.io/c/docs/folders#symbols" rel="noopener noreferrer" target="_blank">Learn more</a>.

Scheduler and Calendar View

Now you can organize your amazing Symbols in folders.&nbsp;<a href="https://www.builder.io/c/docs/folders#symbols" rel="noopener noreferrer" target="_blank">Learn more</a>.

Manage Symbols

Save yourself some time by publishing, targeting, scheduling, and duplicating many entries at once with new bulk action features.&nbsp;<a href="https://www.builder.io/c/docs/bulk-actions" rel="noopener noreferrer" target="_blank">Learn more</a>.

Bulk Actions

You can now create your own custom breakpoints for all your responsive design needs.&nbsp;<a href="https://www.builder.io/c/docs/breakpoints#customize" rel="noopener noreferrer" target="_blank">Learn more</a>

Customizable Breakpoints

You can move quickly between content entries, spaces, account settings and more by typing cmd+p. For example, search for a&nbsp;content entry (eg. “homepage”) and jump right to it.&nbsp;<a href="https://www.builder.io/c/docs/command-palette" rel="noopener noreferrer" target="_blank">Learn more</a>

Command Palette

You can now organize and manage all of your digital assets – all image and video formats - to make you and your team more productive.<a href="https://www.builder.io/c/docs/folders" rel="noopener noreferrer" target="_blank">Learn more</a>

Digital Asset Manager

Enterprise customers now have a separate "Contributor" role type for users who only need to edit block options<a href="https://www.builder.io/c/docs/guides/roles-and-permissions?utm_campaign=Builder%20Drop&amp;utm_source=hs_email&amp;utm_medium=email&amp;_hsenc=p2ANqtz--XX5WbXOhoUKpRJ978Hm9TZ4naXYliya1uhVFe83A6cOtjDgZQ8MomlA6gsb7x2NhA7yn3#contributor" rel="noopener noreferrer" target="_blank">Learn more</a>&nbsp;

Contributor Role Type

Use new demo experiences and example templates as jumping off points for your next project:<ul><li>&nbsp;<a href="/demo?utm_campaign=Builder%20Drop&amp;utm_source=hs_email&amp;utm_medium=email&amp;_hsenc=p2ANqtz-_-XhLg1O8MeRDm5E3ErOy3am1qEIAfbzQetH2Rjz_N0g_tR_ZtYXgoXy7bL0jGgW1563PP" rel="noopener noreferrer">Landing Page</a></li><li>&nbsp;<a href="/demo/commerce?demoHost=nextjs-edge-personalization-demo-git-editor-demo-builder-io.vercel.app&amp;demoModel=page&amp;utm_campaign=Builder%20Drop&amp;utm_source=hs_email&amp;utm_medium=email&amp;_hsenc=p2ANqtz-_-XhLg1O8MeRDm5E3ErOy3am1qEIAfbzQetH2Rjz_N0g_tR_ZtYXgoXy7bL0jGgW1563PP" rel="noopener noreferrer">Commerce</a></li><li>&nbsp;<a href="/demo/blog/example?demoHost=blog-example-builder-io.vercel.app&amp;demoModel=blog-post&amp;demoPath=%2Fblog%2Fexample&amp;utm_campaign=Builder%20Drop&amp;utm_source=hs_email&amp;utm_medium=email&amp;_hsenc=p2ANqtz-_-XhLg1O8MeRDm5E3ErOy3am1qEIAfbzQetH2Rjz_N0g_tR_ZtYXgoXy7bL0jGgW1563PP" rel="noopener noreferrer">Blog</a></li></ul>

Example Project Demos

Updated Upload API lets you manage all your files (Images, videos, etc.) from a single API endpoint.<a href="https://www.builder.io/c/docs/upload-api?utm_campaign=Builder%20Drop&amp;utm_source=hs_email&amp;utm_medium=email&amp;_hsenc=p2ANqtz--XX5WbXOhoUKpRJ978Hm9TZ4naXYliya1uhVFe83A6cOtjDgZQ8MomlA6gsb7x2NhA7yn3" rel="noopener noreferrer" target="_blank">Learn more</a>

Upload API

Now you can dynamically manage complex preview URLs — helpful in scenarios like:<ul><li>adding locale codes as top routes,</li><li>serving different sites for mobile or desktop</li><li>targeting specific subpaths</li><li>and <a href="https://www.builder.io/c/docs/dynamic-preview-urls?utm_campaign=Builder%20Drop&amp;utm_medium=email&amp;_hsmi=2&amp;_hsenc=p2ANqtz-8NjLm4NR2xDevLei9hYUEVwfZfH_Q0rly3jvIV7PJF6t22gUDsck2pSQDr2hU1_BhiHveeEboQ7R_xDa-jR8tfeh-kFg&amp;utm_content=2&amp;utm_source=hs_email" rel="noopener noreferrer" target="_blank">more</a>!</li></ul><a href="https://www.builder.io/c/docs/dynamic-preview-urls?utm_campaign=Builder%20Drop&amp;utm_medium=email&amp;_hsmi=2&amp;_hsenc=p2ANqtz-8NjLm4NR2xDevLei9hYUEVwfZfH_Q0rly3jvIV7PJF6t22gUDsck2pSQDr2hU1_BhiHveeEboQ7R_xDa-jR8tfeh-kFg&amp;utm_content=2&amp;utm_source=hs_email" rel="noopener noreferrer" target="_blank">Learn more in our docs here</a>

Dynamic Preview URLs

Organizations need the flexibility to control who can publish content and who cannot.If a user does not have "Publish / Unpublish Content" enabled, it will be replaced by "Request Publish."When a user selects "Request Publish", a dropdown menu will allow them to select the desired approver. Upon sending the request, the approver will receive a message in the Comments tab and be notified of the request.<a href="https://www.builder.io/c/docs/request-to-publish?utm_campaign=Builder%20Drop&amp;utm_source=hs_email&amp;utm_medium=email&amp;_hsenc=p2ANqtz--XX5WbXOhoUKpRJ978Hm9TZ4naXYliya1uhVFe83A6cOtjDgZQ8MomlA6gsb7x2NhA7yn3" rel="noopener noreferrer" target="_blank">Learn More</a>

Request to Publish in Comments

Use the eyedropper tool to click-to-pick colors for a faster design process.

Eyedropper

Dark Mode user interface (UI) reduces the luminance emitted by device screens, while still meeting minimum color contrast ratios.Dark mode improves visual ergonomics by reducing eye strain and adjusting brightness to current lighting conditions —while conserving battery power

Dark Mode

Start conversions, and share updates and ideas with teammates. You can comment on an entire content entry or a specific block within an entry.Click <a href="https://www.builder.io/c/docs/commenting" rel="noopener noreferrer" target="_blank">here</a> to learn how adding Comments to your processes can accelerate collaboration across your team today.

What's New

Get the latest from Builder.io

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!