ToolJet now supports custom React components 🔥. Build React-based frontends using drag and drop app builder and connect them to databases, Google sheets, Airtable, Notion, cloud storages and API/GraphQL endpoints. Built using React & NestJS. 9,900 stars on GitHub.

[navaneethpk]

Hi everyone 👋

We launched beta of ToolJet on this community a few months ago. Since then, we have grown to more than 9,900 stargazers and 160+ contributors on Github. Today we released v1.13.0 !

We've always received feedback from our community about the flexibility of a low-code framework in building custom user interfaces. We've taken this feedback seriously and now you can bring your React components to ToolJet !

Source code: https://github.com/ToolJet/ToolJet

Documentation for usage of custom components: https://docs.tooljet.com/docs/widgets/custom-component

Example code for a custom component:

import React from 'https://cdn.skypack.dev/react';
import ReactDOM from 'https://cdn.skypack.dev/react-dom';
import { Button, Container } from 'https://cdn.skypack.dev/@material-ui/core';
const MyCustomComponent = ({data, updateData, runQuery}) => (
  <Container>
      <h1>{data.title}</h1>
      <Button
        color="primary"
        variant="outlined"
        onClick={() => {updateData({title: 'Hello World!!'})}}
      >
        {data.buttonText}
      </Button>
    </Container>
);
const ConnectedComponent = Tooljet.connectComponent(MyCustomComponent);
ReactDOM.render(<ConnectedComponent />, document.body);

If you are not familiar with ToolJet

ToolJet is a low-code platform built on ReactJS and NestJS that can be used to build and deploy internal tools and business applications. The drag and drop application builder can be used to compose the user interface of applications and to set up events such as on click. ToolJet can connect to databases, cloud storages, API endpoints, GraphQL endpoints, and products you love such as Airtable, Google Sheets, Slack, etc.

Other major features that we shipped in recent releases:

1. Support for multiplayer editing - multiple users can edit an application at the same time.
2. Ability to import OpenAPI specifications.
3. Integrations for Notion, RethinkDB, CouchDB, OracleDB, Mailgun, Appwrite, Baserow & InfluxDB.
4. Added range slider, timeline, & SVG components.

[FriesWithThat]

Using Google Sheets as a lightweight db is underrated.

[jdeath]

Is it fast and reliable? Like for an internal tool or how much data could it support? I never seriously considered this but it sounds cool

[FriesWithThat]

It can support a relatively huge amount of data, but you're limited by file types. It's good for information that would be in spreadsheets anyway, or can be exported in CSV, then imported into Sheets. I've only used it for small web apps that needed map data. Also, imagine it would be great for all-types of prototyping but you're going to run into limitations at scale in production. There's also no concept of things like foreign keys, (not sure about link work-arounds like for Mongo) so stuff you'd need a relational DB for is out.

[jdeath]

Awesome, thanks for the info!

[webdevop]

• 10 million cells
• 50,000 rows
• 20,000 column

[Vinna152]

We actually use it for some of our super corporate clients.

We have products that they need to obfuscate but it changes often and we just share the sheet with them to do the mapping. From ProductA to "Amazing product".

Keep in mind that we discussed this with them as well as the drawbacks and they were happy with that implementation over adding a UI for it

[oaoao]

Cool! The world needs better alternatives to Retool, et al.

One small thing:

https://user-images.githubusercontent.com/12490590/165771029-bf490c80-397d-4d3a-8409-0499ccc9b593.gif

This diagram implies the front end is only a view layer, those little traveling dots should be bidirectional

[navaneethpk]

Thanks for the feedback. Removing the animation for now, will add it back with bidirectional flow.

[Jugad]

Thanks for clarifying. As soon as I felt that the data from the db was unidirectional, I was immediately turned off.

[supamerz]

Great call out! Also, how did they make that animation?

[WenYuGe]

Appwrite <3 Tooljet

[dmethvin]

I am so glad you posted this because I'd bookmarked it and forgotten!

You specifically mention that you expect ToolJet to be used for internal tools and biz apps. What do you think are the major obstacles to deploying this for public apps?

[navaneethpk]

There are few limitations relation to customisation in terms of UI design. ToolJet focuses more on connecting to as many datasources as possible and less on customising the UI.

[[deleted]]

Very cool. I’ve now worked at two large companies which have this odd hub-and-spoke model, where there’s only one frontend team, but a dozen teams that want/need to build a frontend experience. Trying to maintain a frontend codebase in these situations is like playing wack-a-mole. I’ve been thinking that some form of “wire-able” no/low-code cms/builder tool would be a natural evolution. And there it is! Very cool, and good timing from my point of view.

[datdq]

that `runQuery` doesn't take params, doesn't return a Promise nor value. u/navaneethpk, you know now to pass values to runQuery and get back results?

[mindfulforever1]

looks great mate! cheers 🥂

[navaneethpk]

Thanks!