Skip to content
Branch: master
Find file History

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
.storybook
public
src
.gitignore
README.md
package-lock.json
package.json

README.md

Builder.io custom design system example with React and storybook

In this example we show how to integrate react components with Builder.io. This is useful when you want to add the ability for your team to utilize custom components on the pages you build using the Builder editor, or even want to make it so people on your team can only build and edit your site's pages using your custom components.

The way it works is by utilizing Builder's preview url feature. When you set the preview URL in the Builder editor to point to your site, Builder reads the custom components and settings you specify in your source code via the Builder React SDK and incorporates them into the Builder editor.

The source code for the custom components used in this demo are here, and you can see how they are registered with Builder by looking at the files that end in *.builder.js (this is an example). The logic for adding components to the Builder editor menu can be found here

👉Tip: want to limit page building to only your components? Try components only mode

example

Live Demo with Storybook

We also show how to intergrate Builder.io using @builder.io/storybook within your storybook to give your users a playground where they can drag and drop your custom components and prototype something quick.

Storybook Demo

storybook example

To run the example Locally

git clone https://github.com/BuilderIO/builder.git
cd examples/react-design-system
npm install

To Run storybook

npm run storybook

To run the app

npm run start
  • Now that you have the development server running on localhost, update the preview URL of the Builder.io entry you created to : http://localhost:3000/home

Screen Shot 2020-02-18 at 9 48 51 AM

This will allow Builder to read in all your custom component logic and allow your team to edit and build using your components.

When you deploy this to a live or staging environment, you can change the preview URL for your model globally from builder.io/models (see more about models here and preview urls here)

You can’t perform that action at this time.