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.
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.
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.
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.
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.
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.
Custom Components enables businesses to seamlessly bring fully-featured React components into Superblocks, following these 3 guiding principles:
Learn more about Custom Components with relevant examples by reading the documentation.
Sign up for Superblocks and ship powerful internal tools without limits today.
“In one afternoon I built out 26 custom components, including a QR code scanner, Markdown editor, timeline, and a combo box. I was able to use my favorite component library, shadcn/ui, with Tailwind CSS and Radix UI. My team can now easily reuse these components across our internal apps. Superblocks is the only low-code platform that offers this level of extensibility."
“As a front-end developer, I want our internal component library to be used across all internal & external applications. In under 30 minutes, I imported components from our private NPM registry into Superblocks. Now these components can be used by any team members building in Superblocks, rather than being restricted to only other front-end devs."
“We used to rely on a difficult-to-maintain custom app to make software rotational configuration adjustments to our physical SkyCamera devices. Despite limited React experience, I rebuilt this tool in Superblocks in 2 days, combining built-in functionality for inputs and data handling with a Custom Component for the specific image adjustment. With Custom Components, building complex internal tools is significantly more flexible and scalable.”
“We coded a custom proof-of-concept for Statistical Process Control and then ported it into Superblocks for comparison. Superblocks is far easier to manage - all of the infrastructure is provided & integrated, and is accessible through one simple interface. We easily converted our chart to a Custom Component using D3.js and wired it up with our app using the provided React API. Now we're planning to see what other projects can be more easily done in Superblocks.”