Ready to get started?
Try it free, or book a demo with an expert to learn how you can deliver internal apps 10x faster with Superblocks.
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.
Stay tuned for updates
Get the latest Superblocks news and internal tooling market insights.
You've successfully signed up
“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.”
Table of Contents
Multiple authors
November 8, 2024
Selecting a React Component Library, the Strategic Way
For engineering teams choosing a new UI component library, it’s easy to over-index on visuals and ease of use. It’s only when a library choice begins to create tech debt and extensibility headwinds a few months down the line that teams begin to recognise the enormous challenge of selecting a library that can truly carry their codebase for the long-haul.
Multiple authors
September 10, 2024
Announcing the Superblocks Testing SDK: Build Mission Critical Apps in Low-Code
In an environment where time-to-market is crucial, low-code platforms are game-changers, allowing developers to build full-stack applications with a fraction of the time and effort. Traditionally, low-code platforms have offered limited testing support - resulting in trading development speed for unstable applications and long, tedious manual testing cycles. As a result, developers are often disincentivized to use low-code to build complex applications and mission-critical tooling for their support and ops teams - often resulting in it never being built at all.At Superblocks, we're taking a pro-code approach to the traditional low-code setup by introducing the Superblocks Testing SDK. With this new SDK, you can easily integrate testing into your workflow, letting you confidently build resilient and complex applications. Never worry again about the stability of your mission-critical applications, just write and run tests as you build in the testing frameworks you love. When you're ready to review, just integrate your testing into your CI/CD pipelines to automatically detect regression before you deploy. Now, creating powerful applications that meet the demands of modern businesses is not just possible—it’s a breeze!
Multiple authors
July 9, 2024
Velocity Global: Leading Employer of Record provider achieves efficiencies in time to market, scale, and cost savings with Superblocks
EOR provider Velocity Global is leading the future of borderless work by helping organizations onboard global talent in more than 185 countries. The company offers a full spectrum of HR and payroll solutions, including talent acquisition, payroll administration, benefits management, and vacation time oversight, all while ensuring the highest compliance standards and strict adherence to local governmental regulations.
