BuilderX: The Future of Collaborative Development

Design, Development and AI combined. BuilderX offers a code-first approach that keeps everyone on the same page.

About BuilderX

BuilderX is a powerful web and app builder tool that allows you to modify code in real-time. It combines design tool features with AI-powered capabilities, enabling you to showcase your creativity while working on live applications.

Features

• Real-time code modification
• AI-powered UI component customization
• Visual design tools integrated with live code
• Collaborative development environment
• Seamless integration with popular frameworks (Expo, Next.js)

Note: BuilderX is currently in the development phase. Some features may be subject to change.

Requirements

• Visual Studio Code version 1.92.0 or higher
• An active internet connection
• Expo or Next.js project

Installation

1. VS Code Extension

Install the BuilderX extension from the VS Code Marketplace.

2. Project Setup

Choose one of the following installation methods:

Option A: Automatic Installation (Recommended)

Run this command in your project root:

npx @builderx/cli install

Note: This command will modify your project files. Please commit any pending changes before proceeding.

Option B: Manual Installation

If you prefer manual setup or the automatic installation fails, follow these steps:

1. Install Dependencies

   # For Expo projects
   npm install @builderx/babel-plugin @builderx/bridge --save-dev
   
   # For Next.js projects
   npm install @builderx/next-plugin @builderx/bridge --save-dev
   

2. Configure Build Settings

   For Expo (babel.config.js):

   module.exports = function(api) {
     api.cache(true);
     return {
       presets: ['babel-preset-expo'],
       plugins: ['@builderx/babel-plugin'],
     };
   };
   

   For Next.js (next.config.js):

   const withBuilderX = require('@builderx/next-plugin');
   
   module.exports = withBuilderX({
     // Your existing Next.js configuration
   });
   

3. Add Bridge Component

   For Expo (in your main App.js):

   import { Bridge } from '@builderx/bridge';
   
   export default function App() {
     return (
       <>
         <Bridge />
         {/* Your app components */}
       </>
     );
   }
   

   For Next.js (in your layout.js):

   import { Bridge } from '@builderx/bridge';
   
   export default function Layout({ children }) {
     return (
       <>
         <Bridge />
         {children}
       </>
     );
   }
   

Usage

1. Start your development server.

2. Open the BuilderX panel in VS Code:

   • Use the keyboard shortcut: Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
   • Type BuilderX: Open in the command palette and select it

3. You can now begin editing your project in real-time using BuilderX.

Troubleshooting

If you encounter any issues while using BuilderX, try the following steps:

1. Ensure you have the latest version of the BuilderX extension installed.
2. Check that your project meets all the requirements listed above.
3. Verify that the BuilderX plugin is correctly configured in your project.
4. Restart your development server and VS Code.

If problems persist, please refer to our FAQ or reach out to our support team.

Support

For additional help or to report bugs:

• Visit our documentation
• Join our community forum
• Contact us at support@builderx.io

Stay Updated

To stay informed about the latest features and updates:

• Follow us on X

Ready to revolutionize your development workflow? Get started with BuilderX today and experience the future of collaborative coding!

Get BuilderX