{"id":15439119,"url":"https://github.com/braincee/builder-mui","last_synced_at":"2026-06-08T11:31:50.230Z","repository":{"id":176960822,"uuid":"659765710","full_name":"braincee/builder-mui","owner":"braincee","description":null,"archived":false,"fork":false,"pushed_at":"2023-09-21T15:09:28.000Z","size":325,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"development","last_synced_at":"2025-03-02T14:35:38.090Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/braincee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-28T14:08:03.000Z","updated_at":"2023-06-28T15:04:57.000Z","dependencies_parsed_at":"2023-09-21T19:32:59.057Z","dependency_job_id":null,"html_url":"https://github.com/braincee/builder-mui","commit_stats":{"total_commits":70,"total_committers":3,"mean_commits":"23.333333333333332","dds":"0.27142857142857146","last_synced_commit":"46bc238a738fbb5051003dddfdfa9398c6de53b4"},"previous_names":["braincee/builder-mui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/braincee/builder-mui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/braincee%2Fbuilder-mui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/braincee%2Fbuilder-mui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/braincee%2Fbuilder-mui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/braincee%2Fbuilder-mui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/braincee","download_url":"https://codeload.github.com/braincee/builder-mui/tar.gz/refs/heads/development","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/braincee%2Fbuilder-mui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34061121,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-08T02:00:07.615Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-01T19:02:42.668Z","updated_at":"2026-06-08T11:31:50.215Z","avatar_url":"https://github.com/braincee.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js + Builder.io Minimal Starter\n\nThis example walks you through using Builder.io with a minimal Next.js application.\n\n## Prerequisites\n\nBefore using this example, make sure you have the following:\n\n- A [Builder.io](builder.io) account. Check out the [plans](https://www.builder.io/m/pricing), which range from our free tier to custom.\n- [npm](https://www.npmjs.com/)\n\nA basic understanding of the following is helpful too:\n\n- The [command line](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line)\n- JavaScript and [React](https://reactjs.org/)\n- [Next.js](https://nextjs.org/)\n- What it means to [clone a GitHub repo](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository)\n\n## Overview\n\nTo use this project, you need to do three things:\n\n1. Get a copy of this repo.\n1. Create a corresponding space in your account on [Builder.io](builder.io).\n1. Connect the two.\n\nThe next sections walk you through each step.\n\n### Clone this project\n\nThis example provides you with a ready-made application that you can copy locally and configure for use with your Builder.io account.\n\n1. At the command line, run the following command to create a local copy of the Builder.io repo:\n\n   ```shell\n   git clone https://github.com/BuilderIO/builder.git\n   ```\n\n1. Change into the example application by using the `cd` command:\n\n   ```shell\n   cd builder/examples/next-js-simple\n   ```\n\n1. Open this directory in your favorite code editor.\n   You'll come back here when you're ready to connect your application to your Builder space.\n\n### Generating your Builder.io space\n\nIf you've just created your Builder.io account and logged in for the first time, Builder prompts you to create a space with a new Builder site or add Builder to an existing application.\nFor this example, click **Add Builder to an existing site or app**.\n\n\u003cfigure\u003e\n    \u003cimg src=\"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F19683b4ef3f54eb78e8c2fa6c65759a7\" alt=\"Builder.io Welcome screen for creating a new Organization\" width=\"600\" style=\"display: block; margin: auto\"/\u003e\n\u003c/figure\u003e\n\n**If you don't have the introductory prompt for creating a space, take the following steps. If you do have the prompt in the previous step, skip to step 4.**\n\n1. Click on the Organization icon on the bottom left.\n\n\u003cfigure\u003e\n  \u003cimg src=\"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F279657f9a38743e99a028173200d6f76\" alt=\"Organization icon with two people standing together\" width=\"600\" style=\"display: block; margin: auto\"/\u003e\n\u003c/figure\u003e\n\n1. Hover over **Builder.io** and choose **+ New Space**.\n\n\u003cfigure\u003e\n  \u003cimg src=\"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F32d67ac4249c40fda0486fb7f38ac71b\" alt=\"Menu options for creating a new space\" width=\"400\" style=\"display: block; margin: auto\"/\u003e\n\u003c/figure\u003e\n\n1. Click **Add Builder to an existing site or app**.\n\n1. When Builder asks you which ecommerce platform you use, select **None**.\n\n1. Name your new space by entering \"My Next.js App\" and click **Create**.\n\n\u003cfigure\u003e\n    \u003cimg src=\"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F3b434d77529f4ae392a3d481a926092d\" alt=\"Dialogue for creating a new space\" width=\"400\" style=\"display: block; margin: auto\"/\u003e\n\u003c/figure\u003e\n\nNow that you have a new space, the next step is connecting \"My Next.js App\" with your application.\n\n### Connecting Builder.io to your application\n\nTo connect your Builder.io space and your application, set the model preview URL and get your API key as follows:\n\n#### Setting the model preview URL\nTo enable Builder to open your site in the visual editor, you will need to provide a URL that we can open which has the Builder rendering component in it.\n\nGo to the [/models](https://builder.io/models) page in Builder and choose your **page** model.\n\nThen, set the Preview URL to http://localhost:3000. Be sure to include the http://.\n\n![Image showing where to put the Preview URL](https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F5c26e2c8b4ec437aaef196c8d4e32fc3)\n\n**Note: once you deploy your updates, you will want to update this to a public URL, such as your live site or your staging site (e.g. `https://your-site.com`), so anyone on your team can connect to your site for visual editing**\n\n#### Getting your API Key\n\nIn the [Account settings](https://builder.io/account/space), copy your Public API Key. We're going to paste the API Key into your Next.js app in the next section.\n\n![Image showing where to get your API Key](https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F761e521019724d8bbd59ed0d5f079c8e)\n\n\nIn your code editor, update `_app.tsx` with your [Public API Key](https://builder.io/account/space) like below, but using your Public API Key that you copied in the previous step.\n   For example:\n\n   ```shell\n   builder.init(\"YOUR_PUBLIC_KEY\"); \u003c-- replace this with your API Key\n   ```\n\n## Running your application\n\nTo serve your application locally, install dependencies, serve, and view your preview.\n\n1. Install dependencies by entering the follw\\owing at the command line.\n\n   ```\n   npm install\n   ```\n\n1. Serve your application by running the following at the command line:\n\n   ```\n   npm run dev\n   ```\n\n1. In your browser, go to `http://localhost:3000` to see your application.\n\n### Experimenting\n\nNow that you have a configured Builder.io application, you can try different features, such as creating a page.\nCreate a new page entry, assign any URL, publish and preview.\nFor more detail and ideas on creating pages, see [Creating a landing page in Builder\n](https://www.builder.io/c/docs/creating-a-landing-page).\n\n### Deploy\n\nYou can deploy anywhere you like, but for this project we recommend [Vercel](https://nextjs.org/docs/deployment).\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fbuilderio%2Fbuilder%2Ftree%2Fmaster%2Fexamples%2Fnext-js-simple)\n\n## Next steps\n\n- Learn how to [use your react components in our visual editor](https://www.builder.io/c/docs/custom-react-components)\n- For more information on previewing your applications, see [Editing and previewing directly on your site](https://www.builder.io/c/docs/guides/preview-url).\n- See [Getting started with the visual editor](https://www.builder.io/c/docs/guides/page-building) for an introduction to editing your pages without having to code.\n- Check out [Builder best practices](https://www.builder.io/c/docs/best-practices) for guidance on how to approach site development with Builder.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbraincee%2Fbuilder-mui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbraincee%2Fbuilder-mui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbraincee%2Fbuilder-mui/lists"}