Made in Builder.io

Watch the biggest Figma-to-code launch of the year

Builder.io Logo
Talk to Us
Platform
Developers
Talk to Us
Hydrogen icon

Drag and drop page building for Hydrogen

Stop drowning in backlogs. Use Shopify’s Hydrogen headless commerce framework to create, edit, and manage content. Adopt a better, simpler, and more component-driven approach.

Get startedTalk to us
Hydrogen Page Builder

Stop hard-coding Hydrogen pages

Register the code components you already use to Builder.io, then drag-and-drop them into place.

Hard Coded Content

Component-Driven

A Hydrogen component-driven approach to content management makes frontend development easy and elegant, without sacrificing performance.

Integrates with your existing sites and apps

Integrate seamlessly with complete flexibility. Simple SDK or API integrations with any tech stack

Explore our integrations

Move fast — as one team

Builder.io is the world’s first Visual Headless CMS. It allows you to adopt a truly collaborative web development process to find your perfect workflow balance of developer control and business team autonomy, and build faster together.

1

Add to your codebase

2

Drag and Drop

3

Click to publish!

Builder Blob

Leverage a range of scalable built-in tools

With powerful server-side rendering and static optimization tools, Builder is ready to scale.

Register your components
Roles icon

Roles and permissions

Determine who can input content, who can use your approved design system, and who can create fully bespoke user experiences.

Localization icon

Localization

Deliver highly personalized and localized experiences at scale.

Environments icon

Environments

Create pre-production environments to test updates and functionality

Performance icon

Performance

Build blazing fast experiences with advanced optimization, content delivery at the edge, and more.

Explore our features

BETA

Introducing

Visual Copilot

Visual Copilot saves developers time by using AI to turn Figma designs into code that looks like yours.

Learn more

Visual Copilot

We're obsessed with performance

From 20ms average response times, to hyper optimal image compression, to open-source contributions focused on performance - we aim to deliver insanely fast SEO-friendly sites and apps.

Learn more

How Builder.io works

Our CEO shares why we created Builder.io

And, we used Builder to make the page you're looking at right now.

Talk to an expert

Build using your Hydrogen components

Here's an example of code that uses Builder for a component-driven page.

const MODEL_NAME = 'page';

export default function Page(props: any) {
  const content = useQuery([MODEL_NAME, props.pathname], async () => {
    return await builder
      .get(MODEL_NAME, {
        userAttributes: {
          urlPath: props.pathname,
        },
      })
      .promise();
  });

  const params = new URLSearchParams(props.search);
  const isPreviewing = params.has('builder.preview');

  return (
    <div>
      {!content.data && !isPreviewing ? (
        <NotFound></NotFound>
      ) : (
        <Layout>
          <PageHeader heading={content?.data?.data?.title}>
            <BuilderComponent model={MODEL_NAME} content={content?.data} />
          </PageHeader>
        </Layout>
      )}
    </div>
  );
}

Quick Code Reference

builder.init()

Each project you build in Builder has a Public API key that you can use to request your Builder content. Pass your key here to tell Builder where to look.

builder.get()

Fetches your content from Builder as JSON. You can add parameters and queries to get the right result.

<BuilderComponent/>

Pass the JSON you got from builder.get() to render a Builder page or section.

Builder.registerComponent()

Register any code component in your app to Builder. Then, it can be used for drag-and-drop page building.

View the full documentation

Learn more about Builder.io + Hydrogen framework

Logo
Using Builder with Hydrogen
Using Builder with Hydrogen
View GitHub Rep
Arrow
Elastic Path
Shopify
VTEX
Commercetools
Bigcommerce
Swell
Vue Storefront
Salesforce
Megento
Netlify
Cloudinary
Segment
Elastic Path
Shopify
VTEX
Commercetools
Bigcommerce
Swell
Vue Storefront
Salesforce
Megento
Netlify
Cloudinary
Segment
Elastic Path
Shopify
VTEX
Commercetools
Bigcommerce
Swell
Vue Storefront
Salesforce
Megento
Netlify
Cloudinary
Segment
Elastic Path
Shopify
VTEX
Commercetools
Bigcommerce
Swell
Vue Storefront
Salesforce
Megento
Netlify
Cloudinary
Segment
Elastic Path
Shopify
VTEX
Commercetools
Bigcommerce
Swell
Vue Storefront
Salesforce
Megento
Netlify
Cloudinary
Segment
Elastic Path
Shopify
VTEX
Commercetools
Bigcommerce
Swell
Vue Storefront
Salesforce
Megento
Netlify
Cloudinary
Segment

Part
of
a
composable
stack

Compose content and iterate fast without sacrificing what you love.

Explore our integrations
Elastic Path
Shopify
VTEX
Commercetools
Bigcommerce
Swell
Vue Storefront
Salesforce
Megento
Netlify
Cloudinary
Segment
Elastic Path
Shopify
VTEX
Commercetools
Bigcommerce
Swell
Vue Storefront
Salesforce
Megento
Netlify
Cloudinary
Segment
Elastic Path
Shopify
VTEX
Commercetools
Bigcommerce
Swell
Vue Storefront
Salesforce
Megento
Netlify
Cloudinary
Segment
Elastic Path
Shopify
VTEX
Commercetools
Bigcommerce
Swell
Vue Storefront
Salesforce
Megento
Netlify
Cloudinary
Segment
Elastic Path
Shopify
VTEX
Commercetools
Bigcommerce
Swell
Vue Storefront
Salesforce
Megento
Netlify
Cloudinary
Segment
Elastic Path
Shopify
VTEX
Commercetools
Bigcommerce
Swell
Vue Storefront
Salesforce
Megento
Netlify
Cloudinary
Segment
Elastic Path
Shopify
VTEX
Commercetools
Bigcommerce
Swell
Vue Storefront
Salesforce
Megento
Netlify
Cloudinary
Segment
Elastic Path
Shopify
VTEX
Commercetools
Bigcommerce
Swell
Vue Storefront
Salesforce
Megento
Netlify
Cloudinary
Segment
Elastic Path
Shopify
VTEX
Commercetools
Bigcommerce
Swell
Vue Storefront
Salesforce
Megento
Netlify
Cloudinary
Segment
Elastic Path
Shopify
VTEX
Commercetools
Bigcommerce
Swell
Vue Storefront
Salesforce
Megento
Netlify
Cloudinary
Segment
Elastic Path
Shopify
VTEX
Commercetools
Bigcommerce
Swell
Vue Storefront
Salesforce
Megento
Netlify
Cloudinary
Segment
Elastic Path
Shopify
VTEX
Commercetools
Bigcommerce
Swell
Vue Storefront
Salesforce
Megento
Netlify
Cloudinary
Segment

What's next?

Use Builder for free, then sign up for a plan when you're ready to scale.

Try Builder.io

Talk to our sales team

Get a demo and find the right plan and pricing for your business.

Talk to Us