Superblocks Custom Components: Fixing the biggest problem in low-code

Historically, Engineering & Data teams building mission-critical internal apps have had to choose between inflexible low-code platforms and the high cost of fully custom development. Superblocks makes it simple to build beautiful internal tools - while we continue to invest in our robust native component library, we know there are a long tail of use cases which require extensive frontend customization to deliver the ideal user experience.

‍

Today, we launch Custom Components, fixing the biggest problem with low-code. Custom Components gives developers the best of both worlds – a powerful low-code platform for rapid development, with the full extensibility of React. Custom Components represents a major evolution in our mission of delivering the most extensible low-code platform for developers to build internal tools without limits.

Custom Components enables developers to bring any React component into Superblocks apps seamlessly. Frontend developers can bring any component from the web or their organization’s codebase into Superblocks in minutes. Then, Superblocks Developers can leverage these components via drag & drop like any native Superblocks component. 

‍

Building internal apps with Superblocks just got a whole lot more flexible.

{{quote-1}}

Import any React component from the web

With Custom Components, it’s simple to leverage any package from the web. Simply use your favorite package manager, like NPM, Yarn, or PNPM to install any library. Building Superblocks components with MaterialUI, AntDesign, Chakra UI, D3, Lodash, AnimeJS or any other React or JS library is a breeze. Manage your dependencies in a package.json file as you would in any standard React project. 

Bring any component from your codebase 

Many businesses have large, complex internal React component libraries. Custom Components makes it simple to bring these existing component libraries into Superblocks. Developers can easily import components from their organization’s private registries and keep Superblocks Apps up-to-date as these internal libraries evolve.

‍

{{quote-2}}

Build once. Reuse infinitely

Engineering teams already invest tremendous time & effort building their organization's custom component libraries. Until this point, however, only other frontend developers could consume these components to use them across applications. 

‍

Custom Components in Superblocks changes this paradigm. With Custom Components, frontend developers build custom components once, enabling entire teams in Superblocks to use them across apps without ever touching React. 

‍

This model multiplies the ROI on development by increasing the number of developers who can leverage these components, such as data engineers, product managers, and backend developers.

‍

When building your component, you define its properties and events, and then leverage these primitives in the component React code. This allows the component to read from other parts of the Superblocks app as well as expose its internal state for other components and APIs to read and update, allowing custom React components to behave exactly like native Superblocks components. 

‍

{{quote-3}}

Style with full DOM control

Historically, low-code vendors have only provided frontend customization through a dedicated iframe. This approach prevented developers from accessing the DOM or building components which expanded outside the iframe boundary, including animations, popovers, modals, and more. 

‍

Custom Components offers an innovative solution that ensures developers retain full control over the app styling and DOM. Developers can build any component without iframe constraints, all while leveraging modern styling libraries like Tailwind CSS, Styled Components, and Sass, among many others. 

Develop seamlessly in your favorite IDE

Custom Components meets developers where they’re most comfortable: within their own IDE and filesystem. 

‍

Developers leverage the Superblocks CLI to scaffold out their React project, and run a local development server with hot-reloading within the Superblocks App. Custom Component projects are written in TypeScript, and provide automatic type generation and an intuitive React API to make it easy to control Superblocks application state & trigger events from your React code. Because all bundling is done at build-time, developers can organize their project as they like, rather than needing to manually compile multiple components into a single file. 

‍

{{quote-4}}

Build beautiful internal apps without limits using Custom Components

Custom Components enables businesses to seamlessly bring fully-featured React components into Superblocks, following these 3 guiding principles: 

• Customization - Developers can build any React component in Superblocks, using any library from the web or existing internal library. Developers retain full styling control for advanced DOM manipulation, and can use modern styling libraries like Tailwind CSS, Styled Components, Sass, and more
• Reusability - Frontend developers build components once to make them accessible to any Superblocks developer. This model multiplies the ROI on custom development by democratizing access to code and supercharging velocity
• Developer Experience - Developers build custom components locally in their favorite IDE with hot reloading, and can organize their project as they wish. Custom Component projects are written in TypeScript by default, with an intuitive React API for easy development

Start building with Custom Components in Superblocks today

Learn more about Custom Components with relevant examples by reading the documentation. 

‍

‍Sign up for Superblocks and ship powerful internal tools without limits today.