This content originally appeared on Bits and Pieces - Medium and was authored by Eden Ella
Streamlining Bit Component Assembly with Builder.io’s Visual Tools
Organizations improve their development process by creating and collaborating on reusable components. However, improving digital business effectiveness extends beyond merely simplifying developers’ tasks.
Bit. Composable software platform.
For digital businesses to thrive, software must be accessible to non-developers. This requires seamless collaboration among cross-functional teams, ensuring they work as efficiently as possible.
Bit Platform aims to bridge this gap by providing tools that make it easier for developers to share their work with other stakeholders in their organization and get feedback during the development process. However, this can be further amplified by integrating no-code and low-code tools that allow non-developers to take an even more active part in the development process.
One popular tool for this purpose is Builder IO, which allows users to build and customize web pages visually without deep coding knowledge.
Builder.io: Drag & Drop Headless CMS
By integrating Builder IO with Bit, developers can make their UI components available to the marketing team, designers, and product managers, who can then use drag-and-drop features to assemble new pages or modify existing ones.
Making your collection of vetted components available for visual editors not only “democratizes” software development inside your organization, but also ensures consistent design and high development standards.
Builder IO integrates into your existing application using an SDK that “intercepts” your app’s routing. When a route corresponds to a page published on Builder IO, it is retrieved and rendered (at runtime).
Before we start, a few demos
See this Bit scope on Bit platform to explore a project that registers Bit components to Builder IO and integrates pages from Builder IO in runtime.
A few components, like the Button component, are registered from the “Sparks” design scope:
See this deployed app to inspect a “hybrid” app that includes Builder IO pages (the /subscribe page is fetched from Builder IO):
Integrating Builder IO into your React project
The demo app mentioned above integrates the Builder SDK like so:
/**
* @componentId: learnbit.builder-io/examples/mighty-composers
* @filename: app.tsx
*/
// ...
import { AppShell } from './app-shell.js';
import BuilderPages from './builder-io/builder-pages.js';
export function App() {
return (
<AppShell>
<BuilderPages /> // <-- BuilderIO SDK component
<Routes>
<Route path="/" element={<Homepage />} />
</Routes>
</AppShell>
);
}
export default App;
As you can see, Builder IO pages are not isolated from the app. They can be nested inside a common shell. In this case, the “app shell” includes, among other things, the theme provider:
/**
* @componentId: learnbit.builder-io/examples/mighty-composers
* @filename: app-shell.tsx
*/
// ...
import { SparksTheme } from '@bitdesign/sparks.sparks-theme';
export const AppShell = ({ children }: any) => {
return (
<BrowserRouter>
<SparksTheme> // <-- The theme for components used by this app
<AppLayout top={() => <Header />}>{children}</AppLayout>
</SparksTheme>
</BrowserRouter>
);
};
This means that Builder IO pages will look and feel like “native pages” or build-time pages as they are affected by the same context.
Making your Bit components available in the visual editor
Custom components available in the visual editor are registered via the same apps that consume the Builder pages.
To register Bit components, we’ll import them and add the metadata required by Builder IO. For example, to register the Button component from the “Sparks” scope on Bit Platform:
/**
* @componentId: learnbit.builder-io/examples/mighty-composers
* @filename: register-components.ts
*/
import { Builder} from '@builder.io/react';
import { Button } from '@bitdesign/sparks.actions.button';
export function registerComponentsToBuilderVisualEditor() {
Builder.registerComponent(Button, {
name: 'Button',
type: 'react',
inputs: [
{ name: 'children', friendlyName: 'Label', type: 'text' },
{
name: 'appearance',
type: 'text',
defaultValue: 'primary',
enum: ['primary', 'secondary', 'tertiary'],
},
],
/**
* the link to the component page on Bit Platform
*/
docsLink: 'https://bit.cloud/bitdesign/sparks/actions/button',
image:
'https://static.bit.dev/Community/blogs/builder-io/sparks-button-builder.png',
});
}
Make sure to register the componetns on the same page that renders the Builder component:
/**
* @componentId: learnbit.builder-io/examples/mighty-composers
* @filename: builder-pages.tsx
*/
// ...
import { registerComponentsToBuilderVisualEditor } from './register-components.js';
builder.init('builder-io-public-key');
// register the Bit components
registerComponentsToBuilderVisualEditor();
function CatchAllRoute() {
// ...
return (
<>
<BuilderComponent model="page" content={content} />
</>
);
}
export default CatchAllRoute;
Run or deploy the app before heading to the Builder IO visual editor. The visual editor can only access these components while the app is available on your local machine or on remote hosting.
Once a component is registered, it can be used in the visual editor. The “composer” can visit the Bit component's page to learn more about it, consume it using code, or suggest changes.
Conclusion
Bit transforms isolated, complex monolithic projects into transparent ecosystems of autonomous components that can be combined in countless ways to rapidly develop new and innovative solutions.
However, enhancing software development and boosting digital business effectiveness go beyond simplifying developers’ tasks. For digital businesses to thrive, software must be accessible to non-developers.
Bit. Composable software platform.
Using Builder IO Visual Editor to Assemble Your Bit Components was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Eden Ella
Eden Ella | Sciencx (2024-05-20T22:48:03+00:00) Using Builder IO Visual Editor to Assemble Your Bit Components. Retrieved from https://www.scien.cx/2024/05/20/using-builder-io-visual-editor-to-assemble-your-bit-components/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.