Article summary
I recently had the opportunity to build a custom blog website using Builder.io. This WYSIWYG CMS makes it easy for marketers and editors to construct their content using drag-and-drop controls. Despite its appeal to non-technical users, these low-code platforms often face criticism from developers who require more control to achieve the results they’re looking for.
Coming from a background in custom app development, I was curious to see how Builder.io could handle more custom functionality. I was pleasantly surprised with the results, but it wasn’t all smooth sailing.
In this article, I’ll share my experience with Builder.io and discuss the advantages and disadvantages of using this low-code CMS for a custom website.
The Good
- Custom components: One of the main objectives of this project was to create custom components like callouts, tooltips, and accordions. Builder.io lets you register React components that editors can easily drag into site pages. This allows you to create a library of reusable components for use across multiple pages. This not only accelerates the development process but also ensures consistency across your site.
- Data model management: Builder.io lets you define a custom data model tailored to your site. Through the Builder.io web interface, you can define rich data models, complete with references, arrays, and nested structures. This provides flexibility when structuring your content and makes it easier to define the boundaries of your system.
- Constraints for content editors: When non-technical users manage content, it’s crucial to set boundaries to prevent unexpected bugs. Builder.io lets you define custom validation hooks to enforce constraints on your data model. For example, you can ensure a certain field is always a valid URL or email address. Additionally, you have complete control over which components your users can use, allowing you to restrict them from using built-in Builder.io components that aren’t optimized for your site.
The Bad
- Lack of self-hosting: Builder.io’s drag-and-drop editor is closed-source and cannot be self-hosted. This means you’re dependent on Builder.io’s servers, which can be problematic if your project requires high levels of security. It also means that fully local development isn’t possible, which can be a hurdle if your team requires extensive collaboration.
- Lack of type-safe content API: Builder.io offers a JavaScript content API to fetch content from your Builder.io project. However, the API doesn’t provide any type of completion or safety, which means you have to redefine your data model in your code and handle your own data validation. This can lead to bugs and inconsistencies in a project with many changing requirements.
- Difficulty writing automated tests: Builder.io renders all page content via the provided
BuilderComponent, which requires content in a very specific shape. While you can try to reverse-engineer the data model to write your own tests, you’re still dependent on Builder.io’s internal implementation. Luckily, you can write custom components in a Builder-agnostic way and test those components separately.
Builder.io for Custom Websites
Builder.io is a potent low-code CMS that can be a fantastic tool for building custom websites. It’s particularly useful for teams with a mix of technical and non-technical members. It offers a lot of flexibility and control, allowing you to create custom components, define your data models, and enforce constraints on your content.
However, it’s not without its challenges. The lack of self-hosting and type-safe content API could be deal-breakers for some projects, and writing automated tests can be a struggle. Despite these limitations, I found Builder.io a valuable tool that can significantly speed up the development process while still allowing for a high degree of customization and control. As with any tool, it’s important to assess your project’s specific needs and constraints before deciding if Builder.io is the right fit for you.