Imagine your app super🦹charged with Builder.io

Clear that backlog of pages and content updates. Use your tech stack, your design system, your rules.

<ShoesViewer />

./components/ShoesViewer/ShoesViewer.tsx

Use your own components

The shoes viewer component you see to the left is a custom component that lives in the project the builder CLI command created for you.

  1. Click on the shoes component to the left. Click "edit" on the button that shows up. You should now see options to set on the component, such as number of shoes. Adjust the number of shoes and see it update!
  2. Open up the ShoesViewer.tsx file in your code editor. Adjust a parameter, such as hoverColor on line 69 to be a different color. Save the file and notice that your component updated!
Learn more

Next steps

  1. Make changes to this page. You can add blocks, change text, delete things, re-arrange things, whatever you want to do. Then click the green "publish" button in the upper right corner. The page is now live, meaning you will be able to see it when visiting your app. Click the "eye" icon by the publish button and select "View live page" to see it!
  2. Learn how to integrate Builder into your existing site
  3. Learn how Builder works
  4. Visit the developer hub and learn more about how Builder can supercharge your site!
  5. ...
  6. Profit!

đź‘€Builder's site is built using Builder. Here are some example sections taken straight from the https://www.builder.io/m/developers page đź‘€

Builder is API-driven, customizable and extensible

Leverage your code components

Using your own components ensures everyone stays within design guidelines

Extend the platform

Use our plugins (and/or build your own) to integrate content and capabilities from your favorite platforms, like Shopify and Cloudinary

Import your content

Import your components and/or your content so that you always have a starting point to build upon

Customize everything

You'll never hit a limit with what you want to build

Drag & Drop

Let non-technical teams drag and drop to mix and max pre-built components, or even create fully bespoke experiences.

Complete creative control

Full drag-and-drop design customization without having to write any code

Performance Obsessed

Blazing fast content delivery at the edge

Smart requests with our GraphQL API

Advanced image optimization

Customize everything

Your components, plugins, everything!

Server side rendering support