DEV Community: Retool

Building an AI-powered question answering bot in 2 days

jamiecuffe — Fri, 23 Jun 2023 14:45:36 +0000

For enterprises and scaling startups, managing information about your product, customers, and business is challenging. Team members need to reference information stored in a lot of different places, which can make it harder for teams to onboard, ramp up, and get their work done. Unless your company has a very, very organized and centralized knowledge base—or the luxury of employing a dedicated librarian— few folks will know how to find every answer.

When new team members run into questions about best practices and effective customer interactions, it’s not uncommon for them to struggle to find the precise information they need. As a result, they rely on their colleagues for context and expertise—and while collaboration and supportiveness are great, that’s not exactly a scalable system.

However, if expert knowledge can be unlocked and made instantly accessible to internal collaborators it can be a game changer that saves time and energy—and equips everyone with the necessary information to be successful in their work.

So, that’s what we did.

Our friendly neighborhood “knowledge base bot” helps our Sales, Support, and Success teams quickly answer technical questions for customers—and has become one of our most actively used internal applications. If you too have lots of great documentation and are eager to leverage its full potential, read on to learn how we built and trained an AI-powered enterprise search tool in two days (!!) using Retool, GPT-4, and a vector database.

The challenge: Scaling the knowledge of Retool’s field engineering team

For field engineers here at Retool, each day presents a different set of challenges—from debugging a deployment on Kubernetes to advising customers on the most performant way to architect a Retool app. The team is constantly striving to respond to questions and resolve issues, which allows us to develop a deep understanding of both our product and customers.

But as the field engineering team has grown, it’s gotten harder to capture and share institutional knowledge with everyone who might benefit from it. For example, many team members were encountering the same deployment issue, and each person was independently figuring out a solution. Problem-solving like this, while admirable, is inherently inefficient. Instead of solving the same issue five times, we could have addressed five different problems. To reduce redundancy, the field eng team tried designating one person as the domain expert for deployments, but this solution presented a different set of challenges.

It’s generally a known-known that relying solely on an individual as the source of information can create bottlenecks and jeopardize productivity and customer experience. What happens if the subject-matter expert is out sick? Goes on vacation? Leaves the company? To mitigate this risk, field eng proactively creates documentation to preserve and share knowledge and to ensure its accessibility regardless of who’s around on a given day. We publish documents on Confluence, Google Docs, public docs, and other easily discoverable locations for our target users. But while we’d written plenty of docs, at scale that fragmentation was making answers harder and harder to find.

Our aim was to eliminate the need for individuals to search through multiple sources for answers or for multiple people to independently solve the same problem in isolation. This meant we needed a solution that could effectively scale the knowledge within the field engineering team while minimizing repetitive work. And an ideal system would empower team members with instant access to domain knowledge so they could quickly find answers.

The context: How we got started building an AI-powered enterprise search tool

Ultimately, we decided to create an AI-powered enterprise search tool that would transform our diverse internal information hubs into a comprehensive and consolidated knowledge base.

To get there, we embarked on building a knowledge database by integrating data from several different systems that our company uses to track product information and customer engagements. We seeded the database with text found in Confluence, Slack, and our public documentation site. (If you decide to build your own knowledge-base bot, you can opt to seed the knowledge base with text found in these or different systems. The key is to select systems that align with the types of questions you aim to address through the knowledge database.)

We built the enterprise search tool with a team of three engineers in a two-day company hackathon. Initially, the plan involved building the backend from scratch, but we were able to save about a week of development time by using Retool Workflows to build the backend layer. This meant we didn’t have to worry about deploying and managing a separate backend server. Plus, Retool provided seamless integration between the backend and our frontend, which was also built using Retool.

What is enterprise search, anyway?

Enterprise search is the systematic approach of searching, retrieving, and indexing information from diverse resources and datasets within an organization. These can include, for example, documents, emails, Slack messages, databases, and intranet sites. The primary objective of enterprise search is to facilitate easy access to and navigation of relevant information, particularly in large businesses. Enterprise search software typically utilizes advanced data processing techniques, natural language processing, and machine learning algorithms. These technologies work in tandem to deliver accurate, efficient, and secure search results.

AI-powered enterprise search software is developed by training a machine learning model on the knowledge database. We used GPT-4, a model created by OpenAI, but you can use any appropriate large language model (LLM) that suits your requirements. It’s fairly easy to test and swap out different LLMs with Retool by connecting to their APIs and calling them from your Retool apps, so once you’ve explored specs, data privacy and security considerations, and other relevant attributes, you can experiment as you like to find the most suitable LLM for your specific needs.)

Keep in mind that using OpenAI’s API involves the transmission and processing of data by an external party. OpenAI’s privacy policy states that customer data submitted through their API will not be used for training and enhancing their models unless explicit consent is given to share the data for this purpose. Still, it’s always wise to consult with your security team before leveraging an LLM to ensure compliance with your organization’s security measures and protocols.

Augmenting ML models

Once we picked a model, the next step was to determine the best approach for working with it. There are two primary strategies used to augment machine learning models with external sources of data:

Fine tuning : Train a pretrained model on an external dataset
In-context learning : Insert relevant data into the input prompt

Fine-tuning is a technique that utilizes a task-specific dataset to train a model and enhance its specialized knowledge. For example, we can use our support ticket catalog to produce a dataset of questions and answers. By training an existing model on this dataset, it can become highly proficient at answering questions similar to those in the training data. Fine-tuning allows the model to excel in solving a specific type of question, improving its accuracy and effectiveness within that particular domain.

In-context learning doesn’t involve retraining an existing model. Instead, it involves incorporating relevant data and additional context into the prompt. This approach enables the model to handle unfamiliar questions without requiring additional training, making the solutions generated by the model more adaptable and generalizable. By decoupling the knowledge base from the model itself, the model can respond effectively to a wider range of queries.

Since our internal knowledge base is diverse and requires the bot to handle unfamiliar tasks, we chose to architect the solution using in-context learning.

The tutorial: How to build an AI-powered enterprise search tool

Okay—let’s get into it. To build a search tool for an enterprise, you’ll need:

An OpenAI API key (or your preferred LLM key)
Pinecone (or another vector database)
Retool Workflows
Retool Database (or another database)

Here’s the outline that we’ll follow:

Build a knowledge database
Seed it with relevant text
Build the enterprise search tool

Before building the enterprise search tool, our initial step involves creating a knowledge database and seeding it with pertinent data. The knowledge database consists of “threads,” which are units of unstructured text. A thread can represent various forms of communication, such as a conversation in Slack or a specific section of a Confluence document. Each row in the database corresponds to a distinct thread, capturing its content and context.

We opted to utilize a vector database because it has the ability to analyze spatial relationships within the data, and, for our purposes, it allows for better performance than a traditional relational database.

Setting up the vector database

A vector database is a specialized storage system designed to handle spatial data, including geometric objects and their spatial relationships. It provides advanced capabilities for querying and manipulating complex spatial data. Vector databases are frequently used for AI applications such as geospatial analysis, computer vision, and natural language processing. These applications often require a deeper understanding of spatial elements and relationships.

The knowledge database we’re creating has at least two columns: one containing the unstructured text, and another column that stores the vector representation of the corresponding unstructured text. To make searching for and retrieving relevant information efficient, we’ll use a vector similarity search: When a user submits a question, we convert the question to a vector representation, and the search matches the question with the most relevant threads in the database.

In our case, the data model manifested as two tables—a Postgres table and a Pinecone table—which were joined using primary keys.

Seeding the knowledge database

When creating your own knowledge database, you should seed it with data from the systems and platforms your team uses to document pertinent information. We chose our most frequently accessed information repositories: Slack, Confluence, and our public documentation pages.

To seed the knowledge database, we built a Retool Workflow that scrapes data from those three systems. This workflow is designed to extract relevant information from these sources, chunk it into smaller, more manageable threads, and subsequently upload the threads to our Retool Database. (Chunking is a critical step. Dividing the data into threads enhances the searchability and accessibility of specific information within the knowledge database.)

Our next step was to generate embeddings of the threads and store those embeddings in the vector database. The OpenAI embeddings API accepts text as an input and returns a vector, so we used a Retool Workflow to iterate through each thread, shipping each thread to the embeddings API for vector representation. We then uploaded the vectors to our vector database. Building this workflow took less than an hour, largely because we didn’t need to fuss with complex database connections, and we could use visual programming concepts like the loop block to ship faster.

At this point, we’ve successfully built a knowledge base and seeded it with relevant threads that contain valuable information about our product. We’ll use this database to inform the enterprise search tool.

Building the enterprise search tool

Now that we’ve built the knowledge database, it’s time to construct the enterprise search tool. We built ours in Retool Workflows. The workflow accepts a technical question in the input block and returns an answer in the return block. There are three intermediate steps between the input and output:

Perform a vector search for threads similar to the question
Construct a prompt using the relevant threads
Generate a completion , or response

To perform the vector search, we’ll convert the question into a vector using the OpenAI embeddings endpoint. We’ll then perform a vector similarity search against our knowledge database to identify the threads that closely align with or match the embedding.

Once we’ve retrieved the relevant threads, we can construct a prompt that contains an instruction for the ML model, the question itself, and the relevant context. Our prompt looked something like:

You are a Retool support agent whose goal is to resolve a customer’s question. The context supplied below are relevant links from our knowledge base.

Question: In the documentation of the S3 integration we noticed that CORS is not required. This potentially means that requests are made from the browser not the server-side. Could you please clarify how this integration works?

Links:

[
“You can connect to Amazon S3 or S3-compatible services by creating a resource … ”,
”Before you can create an S3 resource, you must update the S3 bucket …”,
]

After constructing the prompt, we’re ready to ship it to the OpenAI completion endpoint.

We now have a workflow capable of answering questions using our knowledge database! The workflow essentially functions as an API, accepting questions through a webhook and returning corresponding answers via a return block.

To enhance the user experience, the team created a Retool app as the frontend interface for this system. This enterprise search app, which we call “Eternal Tools,” is actively used by our sales and field engineering teams to quickly answer all sorts of technical questions.

A sample prompt and response in our "Eternal Tools" question-answering bot

Results

We’ve been happily surprised by just how helpful this tool has become. Since the bot combines the ML model’s original knowledge base with Retool-specific knowledge, it’s not just some glorified FAQ—it can answer questions our team has never even encountered before. For example, the ML model has an innate understanding of technologies such as Kubernetes, and combined with Retool-specific context, we’ve found it quite skilled at answering esoteric deployment questions.

Moreover, we moved our big rock—enhancing knowledge accessibility and scaling the field engineering team’s context. Building AI-powered enterprise search software has enabled us to shift away from the brittle system of relying largely on individual experts. Now, every team member can leverage a shared knowledge base and is empowered to answer difficult questions in seconds. And, most important, this ability to deliver accurate and more timely technical assistance helps us keep customers informed, supported, and satisfied.

AI has so much potential to make teams more collaborative and productive. If you’re interested in using Retool to build AI-powered tools, learn more or book a demo.

Happy building!

Special thanks to Anoop Kotha, Dave Leo, and David Dworsky who also worked on building our enterprise search support bot.

When, why, and how to upgrade spreadsheets to PostgreSQL

Amit Jotwani — Mon, 01 May 2023 20:33:14 +0000

This post was originally written by Kevin Whinnery.

Many businesses are run off of spreadsheets. From your local coffee shop to the US military, spreadsheets handle a lot of heavy lifting in many workflows. More than 3 billion people use Excel and Google Sheets every month. Unfortunately, there comes a time when even this powerful and familiar tool becomes a liability. Spreadsheets can get out of sync when emailed back and forth, and are vulnerable to typos and human error. At a certain level of complexity, you should strongly consider moving from spreadsheets to a relational database, which provides more guarantees about the integrity of your data.

Read on to learn about the warning signs of impending spreadsheet disaster, how to recognize them, and how to move to a database when the time is right.

Recognizing when spreadsheets are falling over

As your spreadsheets grow in complexity, here are some pains you might start to feel - if you read through these pain points and find yourself nodding along, it might be time to consider upgrading to a database.

You’re struggling to manage large amounts of data. Your key spreadsheet has dozens of columns and tens of thousands of rows of data. At around 40,000 rows, you’ve started to notice that scrolling and calculations are slowing down.
You have too many editors, and you keep stepping on one another’s toes. Spreadsheet software like Google Sheets supports multiple people editing at the same time (i.e. multiplayer collaboration), but they lack version and access controls. Your key spreadsheet is difficult to keep in a predictable state, because so many people need to change and update it.
It’s hard to get the insights you want from data in spreadsheets. Maybe your business uses several key spreadsheets, and you have a business intelligence question that needs data from all of them. You find it hard to use the relatively limited query and data modeling capabilities of spreadsheets to get all the insights you’d like from your data.
Costly mistakes and bad data because of human error. Spreadsheets are very malleable by default, and don’t have built-in mechanisms to ensure data integrity, like transactions, foreign key constraints, and data validation. As a result, sometimes your data is inaccurate, which impacts decision making and workflows that depend on spreadsheet data.

These pain points typically appear when your use case evolves from data storage, analysis, and visualization. Spreadsheets actually do those things reasonably well. What spreadsheets don’t do well is manage large, complex data sets, and relationships between different data points. They also don’t work well to model business processes and operations, which often have multiple steps and validations that need to happen at different steps. When your use case shifts from analyzing static data to driving business processes, that’s when you’re likely to encounter trouble.

No-code tools provide a partial solution

Some teams might upgrade their spreadsheet use cases to no-code tools like Airtable. Airtable has become a popular alternative to spreadsheets by providing more structured data storage. And it’s easy to understand why it’s been so compelling - Airtable combines the simplicity of a spreadsheet interface with the basic functionality of a relational database. It also enables teams to create customizable views and simple apps, and integrate with other tools.

This upgrade might be sufficient for some spreadsheet use cases, if your primary pain point is just modeling relationships between data points. There are a few spreadsheet problems that aren’t solved at this stage of evolution, however.

Performance issues and storage limits : As the amount of data you store in Airtable bases grows, interacting with data through the GUI can start to slow down (similar to spreadsheet software). There are also limits to the size of your data set enforced by the product (250k rows in an Enterprise plan as of this writing).
Modeling business workflows : Airtable is a major upgrade over spreadsheets in data modeling, but it’s hard to model more complex, multi-step business processes. The ability to create forms and customized user-facing views is nice, but they are still tightly coupled to pushing data in and out of a spreadsheet-like data store.
Inconsistent interfaces to data : because views and schemas in Airtable are still quite malleable by default, data integrity can still become an issue without great care taken in configuration.
Limited query capabilities : Airtable has a REST API to access data and resources, but its query capabilities are limited when compared to languages like SQL or GraphQL. So while this is probably a step up from a spreadsheet, it might still not be flexible enough.

No-code solutions such as Airtable provide a meaningful upgrade over spreadsheets, but still experience some of the problems at scale that you might be feeling in a spreadsheet. If you find yourself struggling still when using these tools - it’s probably time to consider moving your data to a relational database.

Building with a PostgreSQL database

The final evolution from spreadsheets is a relational database - like our personal favorite PostgreSQL. A relational database like Postgres can potentially address many issues in a spreadsheet that has ballooned into an unmaintainable state.

Performance and scale: A database can store extremely large data sets, far beyond what’s reasonably possible in a spreadsheet-like tool. And because database software is designed to hold such large data sets, it is also designed to access that data fast, at any scale.
Robust data modeling : Relational databases are designed to support very complex data models - whatever types of data your business cares about, it should be possible to model it in a database.
Data integrity : Relational databases are designed to promote data consistency and integrity. The format of data is strictly enforced, and prevents many classes of human error.
Advanced querying : A database that supports SQL queries can enable you to answer just about any question from your data, joining individual data points across multiple tables within the database. SQL is the “lingua franca” of data access for a reason!
Supports building application software on top : A SQL database can be combined with a wide array of software development tools to build applications that interact with your data. Custom software enables you to model any kind of business workflow, rather than just pushing data in and out of a spreadsheet. And if you choose platforms like Retool, those applications can be almost as easy to create as customizing a spreadsheet or arranging a PowerPoint presentation.

So let’s say you are sold on the utility of a relational database, but your data is still locked in Airtable or a spreadsheet. And maybe you’re pretty comfortable with a spreadsheet interface, but have never used a relational database before. If this sounds like you, Retool Database might be the best first step into the world of managing data in a relational database. It offers both an optional graphical interface that is spreadsheet-like, and is integrated into Retool, which makes it much simpler to build software and visualizations on top of your data than typical app development tools. Let’s take a look, at a high level, how you could migrate from a spreadsheet to Retool Database.

From spreadsheets to Retool Database

Your first step in migrating from spreadsheets to a relational database will be exporting your data from either Airtable or your spreadsheet software as CSV files. This bare-bones text representation of your data can make it portable into different environments, like a relational database. Retool Database, through its graphical interface, allows you to import CSV files as new tables in your database.

To migrate your spreadsheet or Airtable data to Retool Database, just upload your CSVs into Retool. Retool will automatically create PostgreSQL tables for you. There’s no setup or configuration required.

Uploading a CSV into Retool Database

Once you’ve uploaded your CSV, Retool Database will create PostgreSQL data type columns and insert your data for you. Double-check that the names and field types match your preferences.

Schema mapping

From there, you can quickly build out your data model and schema with the Retool Database UI—add tables and configure fields in a few clicks.

With Retool, you can start with a PostgreSQL database and build custom applications that work for you and your users. If you want to use Retool Database, you get up to 5GB of data storage free for one year. To get started, create a free Retool account.

Custom apps and workflows

With your data now in a PostgreSQL database, you can use Retool, a developer platform for business software, to build custom apps and workflows on top of your database much faster than coding from scratch. These apps can be complex and custom enough to handle many use cases, and can scale to thousands of users.

Retool comes with several features to help you build faster.

Drag-and-drop interface : Create user interfaces quickly and easily using Retool's visual editor, without needing to write extensive frontend code.
Pre-built components : Leverage Retool's library of hundreds of pre-built components, such as tables, forms, and charts, to streamline your app development process.
Seamless integrations : Connect your Retool app to your Postgres database and other third-party services using Retool's built-in integrations.
Collaboration and source control : Work together with your team on app development and track changes with Retool's source control features.
Automate ETL tasks and alerts : Use Retool Workflows to schedule background tasks that operate on your databases, like periodically ingesting data from 3rd-party APIs or running GPT-4 against your database to answer questions with plain English.

An optimal path forward

There’s a time and place for every tool in your toolkit, and spreadsheets are a valuable arrow in your quiver. But when your spreadsheet becomes the system of record for critical business data, and your business processes rely on manual efforts that modify the spreadsheet - I’m afraid you’re asking for trouble at some point down the line. At some point, human error or software limitations will create problems for your business.

Relational databases provide an alternative to mega-spreadsheets that is scalable and reliable, and opens up the possibility of creating custom software on top of your database to run your business processes in a safe and repeatable way. If you’re coming from the world of spreadsheets, Retool Database can help ease the transition to relational databases with a graphical interface, and the power of the Retool platform to build business processes and data visualizations on top of your data.

If you have questions or want to share your experience working between spreadsheets and PostgreSQL, join us on Discord to chat about it live, or post about your experience in our community forums.

Analyzing LEGO set data with Retool Workflows

Amit Jotwani — Fri, 28 Apr 2023 00:54:56 +0000

Analyzing and visualizing data is a crucial part of any business or organization, but it can be tedious and time-consuming. As someone who likes finding ways to save time and effort, I’m game to explore anything that can make this kind of work faster and easier. That’s where Retool Workflows come in.

Retool Workflows make it easy for developers to create automated processes that send custom alerts, and analyze and visualize data using a graphical interface—and to run those processes on a schedule.

With Python support recently added to Retool Workflows, I wanted to play around and do some fun data analysis with it. I thought about some datasets to use—IMDb movie ratings, global coffee production statistics, UFO sightings... But I kept coming back to something that I love even as an adult—something that felt a little poetic, given the parallels I recognized with Retool: LEGO!

Just like how LEGO pieces of different shapes and sizes connect to build pretty much anything you can dream up, Retool Workflows provide a way to drag and drop blocks of code, customize them, and connect them to create a seamless automation for data analysis. Building with Retool Workflows is, I realized, like building a LEGO model, but instead of using plastic bricks, you’re using Python/JavaScript code blocks. Instead of creating a castle or a spaceship, you can build a data analysis workflow that streamlines your ETL and reporting tasks.

So, with LEGO as inspiration, allow me to demonstrate how Retool Workflows can be used to analyze data and create stunning visualizations using Python libraries like pandas, seaborn, and matplotlib.

We’ll use this dataset available on Kaggle.com to analyze and visualize the following:

Number of LEGO sets released over the years: We’ll dive into the data to see how many LEGO sets were produced each year and track how that number has evolved over time, allowing us to gain insights into the growth of the LEGO world.
Average number of pieces per LEGO set over the years: How many pieces does the average LEGO set contain? We’ll crunch the numbers to find out, and explore how this has changed over time as sets have become more complex and detailed.

You can download the JSON for these workflows here: Workflow 1: Number of sets produced over the years, and Workflow 2: Average number of pieces per LEGO set over the years), and import it into your Retool account.

Ready? Let’s get building.

Analyzing LEGO set data with Retool Workflows

Here’s the basic outline that we'll be following to build the workflows for each of these analyses:

Workflow Start Trigger: This block will be the starting point of our Retool workflow. We can configure this block to trigger our workflow at regular intervals using Schedule/Cron or Webhook.
Fetch your data (getLEGOSetsData): This block will use SQL to query Retool Database for the LEGO set data we want to analyze.
Customize with code (LEGOSetsPerYear): This is where the magic happens! We’ll use Python libraries like pandas, seaborn, and matplotlib to analyze the data and create visualizations. For example, we can use pandas to group our data by year and then use seaborn to create a bar chart showing the number of sets produced each year.
Fire an action (UploadToAmazonS3Bucket and getS3URL): Once we have our visualizations, we can save them to a file buffer and then use Retool’s native integration for Amazon S3 to upload the files to our S3 bucket. This will allow us to easily share the images with others or include them in reports.
SendEmail: Finally, we’ll use Retool’s native integration for SendGrid to send the visualizations in an email. This is a great way to share our analysis with others or to receive automated reports.

Here’s what the final workflow will look like:

Bird's eye view of the final Python workflow to visualize the number of LEGO sets released over the years

Let’s build the workflow

The StartTrigger block is the entry point for the workflow. You can select this to either be a Schedule/Cron job or a Webhook. We’ll just let it be at its default value, but feel free to play around with it if you like.

_You can select the Start Trigger to either be a Schedule/Cron job or a Webhook. _

Click on the “+” button on the left side bar, and then click on “Resource Query”. Then click on the canvas to place it next to the StartTrigger block.

Inside the Resource Query block, choose the source for your database. This could be any of the data integrations supported by Retool, including any REST/GraphQL API, or databases like PostgreSQL, DynamoDB, or MongoDB. In this case, I downloaded this LEGO dataset available on Kaggle.com in CSV format, and imported it data into Retool’s built-in database using the CSV import feature.

So, we’ll choose retool_db (postgresql) as the resource, and then type the SQL query to retrieve the LEGO data set from Retool Database.

You can run each block individually to see the results of that block, like we did to run the SQL query.

Write SQL to get the data for LEGO sets

Now that we have our LEGO data available in our workflow, we’re ready to write some Python code to analyze this data.

Analysis 1: The number of sets produced over the years

We’ll add a “Code” block to our workflow, and write some Python code to analyze the data using the Python libraries mentioned earlier.

Add a Code block to write some Python code to analyze the data

import pandas as pd 
import seaborn as sns 
import matplotlib.pyplot as plt 
import io 
import uuid

# create a pandas dataframe called lego_sets using the lego set data retrieved in the previous block
lego_sets = pd.DataFrame(getLegoSetsData.data) 

# count the number of sets released per year and store it in a new dataframe called sets_per_year
sets_per_year = lego_sets["year"].value_counts().reset_index() 

# set the column names of the sets_per_year dataframe
sets_per_year.columns = ["year", "count"] 

# sort the data by year
sets_per_year = sets_per_year.sort_values("year") 

# create a bar plot
plt.figure(figsize=(14, 6)) # set the figure size
sns.barplot(x="year", y="count", data=sets_per_year) # set the x and y axis, and the data for the plot

# add title and labels to the plot
plt.title("Number of LEGO Sets Released per Year") 
plt.xlabel("Year") 
plt.ylabel("Number of Sets") 

# rotate x-axis labels for better readability
plt.xticks(rotation=90) 

# display the plot
plt.show() 

# save the plot as a PNG image in a file buffer
file_buffer = io.BytesIO() 
plt.savefig(file_buffer, format='png') 
file_buffer.seek(0) 

# get the image data from the file buffer
image_data = file_buffer.getvalue() 

# Generate a random UUID (Universally Unique Identifier)
file_name = str(uuid.uuid4())

# Append a file extension
file_name += ".png"

# return the image data
return {"file_name": file_name,"image_data": image_data}

What’s this Python code doing?

To get started, I’ve imported three handy libraries: pandas, seaborn, and matplotlib.

pandas is a library that helps us work with tables of data. It’s useful when we have a lot of data to work with or when we need to combine different types of data (like numbers and text), like we do with our LEGO dataset.

seaborn helps us make pretty graphs and charts from data. We can use it to visualize data in different ways to better understand patterns and relationships.

matplotlib helps us make all kinds of graphs and charts. It’s very versatile, in the sense that we can use it to make simple or complex visualizations. We can use it to make things like line graphs, scatter plots, and bar charts. We’ll use a combination of seaborn and matplotlib to generate this graph to find out the number of sets released over the years.

We also use the library io which is a part of Python and helps you work with input and output, like reading and writing files, strings, or byte arrays. We use this to create a file buffer object that stores the image data generated by our plotting libraries in memory as bytes.

We then get the image data from the file buffer object for further use—in this case, we’re storing it in an S3 bucket and using that to send an email.

Visualization of the Number of LEGO Sets Released per Year

💡

Side note: Apart from the drop off we see in 2017, which is probably because the dataset only covers up until July of that year, it’s quite evident from this chart that LEGO is now producing more sets than in decades past, which is great news.

Next, we’ll connect this to another resource query, this time for an S3 bucket.

Upload the image file to Amazon S3 Bucket using Retool's built-in Amazon S3 integration

To make it easier to reference the URL in our email, we’ll add another little Python code block to clean up the S3 URL, and we’ll grab the link to our file.

Extract the S3 URL from the response sent by Amazon S3 using a Python code block

Finally, we’ll reference that URL in our SendGrid email block.

Send an email using Retool’s built-in SendGrid integration

Here’s what the final workflow looks like:

Bird's eye view of the final Python workflow to visualize the number of LEGO sets released over the years

Testing and deploying the workflow

Now that we have the workflow setup, we can test it by clicking on the “Run” button at the top. This will manually run the entire workflow, so you can test if it’s functioning correctly. Once you’re satisfied, you can enable and deploy it, so it will fire off using the settings in the StartTrigger block.

Analysis 2: Average number of pieces per LEGO set over the years

We can follow the same process using this code to get the average number of pieces per LEGO set over the years.

import pandas as pd 
import seaborn as sns 
import matplotlib.pyplot as plt 
import io 

# create a pandas dataframe called lego_sets using the lego set data retrieved in the previous block
lego_sets = pd.DataFrame(getLegoSetsData.data) 

# group the dataset by year and calculate the mean of pieces per set for each year
pieces_per_set_per_year = lego_sets.groupby('year')['num_parts'].mean().reset_index()

# create a line plot of pieces per set over the years
plt.figure(figsize=(14, 6)) # set the figure size
sns.lineplot(x="year", y="num_parts", data=pieces_per_set_per_year) # set the x and y axis, and the data for the plot

# add title and labels to the plot
plt.title("Average Number of Pieces per Set over the Years") 
plt.xlabel("Year") 
plt.ylabel("Average Number of Pieces per Set") 

# rotate x-axis labels for better readability
plt.xticks(rotation=90) 

# display the plot
plt.show() 

# save the plot as a PNG image in a file buffer
file_buffer = io.BytesIO() 
plt.savefig(file_buffer, format='png') 
file_buffer.seek(0) 

# get the image data from the file buffer
image_data = file_buffer.getvalue() 

# return the image data
return image_data

Visualization of the Average Number of Pieces per LEGO Set over the Years

We can see from this chart that the sets are becoming larger on average. More LEGOs!

🧱

Fun Fact: As of 2021 the largest LEGO set in terms of the number of pieces is the LEGO Art World Map set, which contains 11,695 pieces.

Putting the pieces together

To wrap up, with Retool Workflows’ support for Python, we were able to analyze a LEGO dataset using popular Python libraries like pandas, seaborn, and matplotlib to create visualizations that helped us gather some pretty interesting insights.

With Retool’s native integrations for Amazon S3 and SendGrid, we were able to have the workflow upload the images to an S3 bucket and send the image in an email—all automatically.

The libraries we used in this post are just the tip of the iceberg. Retool comes pre-installed with over 20 popular Python libraries and packages, including openai, beautifulsoup4, and pillow, making it a powerful tool for any data science project.

I hope you found this post helpful in demonstrating how to use Retool Workflows to automate your data analysis projects. Questions, comments, or favorite LEGO sets? Feel free to reach out to me on Twitter.

P.S. My favorite LEGO set is the Seinfeld set—it has a total of 1,326 pieces!

Building an AI RegEx Editor with Retool, OpenAI, and CodeMirror

Christina Zhu — Mon, 13 Mar 2023 17:27:38 +0000

Every developer has struggled with regular expressions (RegEx) at some point in their career. While incredibly powerful and versatile, they are also notoriously unintuitive and difficult to learn, causing many developers to facepalm in frustration. Knowing that this is a typical issue that developers face, we’ve built a super cool, human-friendly RegEx generator that utilizes OpenAI’s GPT-3 and CodeMirror on Retool to automate and make RegEx more accessible to developers. Simply describe what you want the RegEx to do, and our friendly AI Developer will translate that into Javascript code for you. Let’s dive in and see how this app works together!

Before we get started, make sure you've created a free Retool account and have your OpenAI API Key and resource integration ready to go.

Here is a link to the JSON of the app if you'd like to edit it yourself.

Overview

Showing off the AI RegEx Developer tool

This AI-powered RegEx code editor combines CodeMirror and OpenAI inside Retool to make working with regular expressions as easy as chatting with your coworker. To use it, simply write a sentence about the type of RegEx you want it to capture - for example, you might want to create a RegEx that captures all the numbers in a sentence, or capture all the text before a comma. Once you’ve described it, click Generate Code to generate the corresponding JavaScript code on the right-hand panel, which also includes the Run and Reset buttons to execute the code and see the results of the RegEx. The app also includes a handy prompt history on the left panel, which helps you keep track of your previous prompts!

Today we will be breaking this app down into four parts and going through how to do each of them:

The OpenAI API resource call
The basic UI in Retool
Using custom components to create our CodeMirror editor
Using temporary variables to keep track of the state of our app

OpenAI Resource Setup

The first part of the app is powered by an OpenAI API call to their text model. Our Retool OpenAI integration guide provides step-by-step instructions on how to set up your very own OpenAI resource, so be sure to check that out! Once you’ve set that up, you can start using it in your app. Our app uses the text-davinci-003 model of OpenAI to generate RegEx patterns and combined them with the RegExPrompt.value in Retool to pass our prompt to OpenAI. We also set our top_p to 1 and temperature to 0.7 - these values determine the “creativity” and “randomness” of our generated RegEx expressions, which should still be reliable and accurate but also offers a bit of variation.

Retool UI Components

In creating our AI RegEx Developer app, we utilized several different Retool UI components to make it come to life and make it user-friendly. Retool components are prebuilt, modular, and reusable interface elements that are designed to display data in an easy drag-and-drop interface. These components have an internal state and can trigger events based on user interactions, enabling us to perform actions and queries. Additionally, Retool offers preset for commonly used configurations, which we utilized in our app.

We utilize the following components in our application:

Text Area - Used to display text, such as previous prompts
Sidebar - A navigation component that we used to show our prompt history using the navigation properties.
Text Input - Used to get the prompt from the user, as well as ask the user for test strings to run the code on
Buttons - Combined with our event handlers to run our OpenAI, CodeMirror and prompt history queries and control most user interactions

CodeMirror & Custom Components

Now that we have our prompt for our RegEx as well as an example piece of RegEx from OpenAI, we need to put it in our CodeMirror editor to test and execute it. This component uses CodeMirror to edit code and evaluate it and provides a way for us to test it directly inside our Retool app. We utilize custom components in Retool to get this working, which allows us to extend Retool’s functionality beyond what’s currently possible with our component library.

Our custom CodeMirror component has 3 main sections: an iFrame, a model, and a script. The iFrame includes references to the necessary CodeMirror styles and scripts, such as the CSS and the Javascript library needed to run it. The model code section defines the data model for our custom component, which includes the RegEx that we want to evaluate, the test strings that we input, and other information such as our last run index.

The script section of the code contains the bulk of our component logic, including functions for initializing our CodeMirror editor, setting and running the code, as well as handling the majority of the updates to the data model from Retool.

When our model is updated, the component then checks if our RegEx and test strings have changed since our last run. If they have, our component updates the text inside the CodeMirror editor to include the new data, and then runs this once a test run is requested, we print the results in the Retool app in our RegExMatchesDisplay textArea component.

Temporary State & Variables

The last section of our application is the left-hand panel which uses temporary statesin Retool to store our previous prompts to OpenAI. Temporary states are an essential feature in Retool that allows us to store and manipulate data, and in this app in particular, we use temporary states to keep track of various variables and user interactions, such as the previous prompts as well as the current RegEx and test strings.

We track several different states here in our application, and here's a short explanation of all of them and what they're used for:

Temporary State Variable	Explanation
`currentRegExText`	Stores the current RegEx being used in the app. Changes based on the OpenAI call.
`currentTestString`	The current test strings declared by the user
`lastRunIndex`	Records the index of the last prompt that was run, and is updated whenever a prompt is run so that the app knows which prompt to run next.
`promptHistory`	Displays the previous prompts entered by the user and updated whenever a new prompt is entered
`resetIndex`	Stores the index at which the user wants to reset the prompt history

Conclusion

In conclusion, Retool is a very powerful platform for building quick tools to help enable developers to be more productive without having to write a ton of code. The key features that allow Retool to be so versatile are our ability to connect to various APIs such as OpenAI and our ability to create custom components, as shown above. By leveraging Retool’s query editors, temporary states, and components, we’re able to create custom tools such as this RegEx generator app that can help save time and improve a developer’s workflow. With Retool, the possibilities are endless, and we hope this blog post has inspired you to build your own little tools, wrappers, and applications in the future!

How I created a coding font game with low code

Ivana Ivanovic — Thu, 18 Nov 2021 21:05:32 +0000

This post is written by Wenting Zhang, a Retool customer, who built a very cool Coding Font app. Read on to learn more.

As engineers, we spend a lot of time in front of our computer screens. The coding font that we spend 8 hours a day staring at has a lot to do with our productivity and comfort. I am very picky about coding fonts and like to experiment with that setting to find the best balance. You too? That's great because I made an app just for you! I will go through how we create CodingFont.com---a gamified experience that helps you find your true love amongst coding fonts.

First off, a little introduction. I am the co-founder and head engineer of Typogram. I write a weekly newsletter about my entrepreneur developer journey; check it out here. Typogram helps non-designers---especially startup founders and small business owners---create a brand identity system including logo, color palette, and typography, all without paying for an expensive designer, or having to learn fancy design tools.

Taking Coding Font from ideas to execution

As our company name suggests, our main product (currently under development) is heavily about typography, and indeed we spend most of our time dealing with fonts---validating them, tagging them, licensing them. Managing fonts internally was getting to be a challenge, to the point where we needed to build internal tools; that is when we met Retool.

After using Retool to create internal font management tools, we quickly realized how powerful it was. We came up with the idea to create fun, one-off, low-budget consumer-facing apps that will generate traffic to our main website and product newsletters. The fact that Retool is low code empowered our team to hack around new ideas without over-commitment. It is a nice way to think outside of the box and have a little engineers' fun!

This is what we did.

The first step was to get the fonts flowing in. With a fonts API, it is effortless to get the project off the ground by hooking up with the data source, and populating the data into Retool's standard table component:

The table is currently showing only raw metadata about the fonts, such as the font family name, font styles, category, etc. While the metadata provides supporting information, the essence of a font is its visual design, which needs to be visually showcased. We have a font file URL field among the data fields, which we can use to create a live preview of the font. Let's put that preview into a custom column.

Each column of the table component can be customized freely. There are two levels of customization:

Standard options, including Boolean, Button, Checkbox, Date, Dropdown, Integer, URL, Object, String, Text Input...
Customization by turning on "Render cell as pure HTML" provides almost unlimited possibilities

I like the convenience provided by #1---the long list of supported data formats and presentation styles solves for 90 percent of the use cases. I also enjoy the flexibility provided by #2, and it is what I used to render a live preview of the font using the font file URL. I created a @font-face using the font file URL, then applied this font to the HTML element:

Gamifying your coding font choices

However, simply previewing a list of coding fonts is not enough to attract users; I wanted to spice it up and provide a unique app experience to make it worth people's time. As trained as my eyes are after working with fonts for many years, I still feel helpless when choosing fonts from a long list. Some subtle differences between them are hardly noticeable. That rings especially true for coding fonts, as they inherently share the mono-spaced characteristics already.

But what if you could look at only two fonts at a time, picking the better one, then rinsing and repeating in a "tournament style" until you have the winner?

I assigned the fonts into pairs; just like in the Squid Game, if the total number of players (aka fonts) is odd, the unpaired player automatically wins that round and gets to the next.

Each pair is then battled out in a side by side UI for easy comparison:

After you select the round's winner, the button click will automatically trigger a query to fetch the next font pair recursively until there is only one font left, which is the winner and hopefully your next coding font!

Why I built it with Retool

Five years ago, if I wanted to build this coding font game, I would have had to spend days or weeks hand-coding it in React or other frameworks. But since then, I have discovered no code and low code apps which are essentially libraries of pre-existing informational or functional things. They can be powered by a database or an API, and the interaction layer is standard, often with minimal customization needs. That library of functional things in this case is coding fonts. Our idea was perfect for a low code execution.

Does that mean low code is replacing coding? In my opinion, low code platforms are not replacing coding. They are instead creating an entirely new market. Many products that would have never been developed in the traditional hand-coded way now have a chance to see the light of day. Some examples include apps serving a small number of users that would not be economical to hand-code from the ground up. Without low code, these problems are often not worth solving. In the banking and finance industry, there is "too big to fail"; in product making, there was "too small to exist." However, that is being changed by the no code / low code movement!

I am also seeing a new generation of platforms like Retool that are more open-minded and open-ended. They are not enclosed systems and offer freedom to go off the road by systematically allowing users to write custom code and components. They are endlessly configurable and expandable, intended for engineers and developers of all levels. I am looking forward to witnessing where low code takes us next!

Top 5 MySQL GUI tools in 2021

kevbosaurus — Tue, 26 Oct 2021 16:37:18 +0000

Ahead of Postgres and SQLite, MySQL has been the leading relational database for years. This is corroborated most recently by Stack Overflow's 2021 Developer Survey, in which 50.18 percent of all respondents (73,317) claim to have used MySQL extensively and plan to do so in the coming year.

However, many find MySQL challenging to manage despite its simpler design. GUIs have become increasingly central to delivering exceptional user experiences. Database managers are faced with a number of tasks, including the following:

Object management and automation
Data analysis
Creating and executing queries
Developing and debugging stored routines

MySQL Shell might feel unapproachable, and even its fundamental components like MySQL Workbench or MySQL Connectors don't appeal to everyone. Some may not even require every advanced feature under the database's umbrella. Thankfully, the third-party tooling market has grown substantially throughout MySQL's twenty-six-year history.

This article breaks down the leading MySQL tools and their benefits (plus potential drawbacks).

Selection criteria

The goal was to find tools with well-rounded functionality. Each is evaluated on the following:

Features---what can you do with the tool, and how well do these capabilities align with MySQL's native functional offerings? How might these tools exceed expectations, or democratize the utilization of MySQL within teams?
Platform compatibility---is the tool developed for specific OSs, or does it have cross-platform availability for Windows, Mac, Linux, and even the web?
SQL autocomplete support---is the MySQL Intellisense feature baked in or emulated, both to save time and reduce scripting effort within the editor?
Special MySQL support---does the tool integrate with MySQL in any novel ways that differentiate it from competitors?

This assessment is meant to be as objective as possible, with added comments that you might find helpful. Here are the top five picks.

Adminer

Adminer interface, via online demo editor

Perhaps one of the more no-nonsense members on this list (in stock form), Adminer aims to provide powerful functionality within a simplified package. Launched in 2007, the tool prioritizes security, performance, and size. You can select your preferred look from over twenty-five included themes---sourced by Adminer's developers, with others contributed by community members.

Installation

The tool promises robust database management using a single PHP file. This makes it relatively easy to set Adminer up on any machine with PHP. Learn how to set up PHP on your computer with this guide.

You can install optional MySQL database servers either locally or remotely. This second option lets you tap into a remote machine as needed, saving space on your physical drive. Accordingly, it may be advantageous to install any database extensions for MySQL that you cannot live without. This is great preparation for the remaining steps.

Finally, download the latest Adminer PHP file directly from Adminer's website. Any associated plugins you'll want to add are hosted and documented on this website and on Adminer's GitHub page. Getting started is as easy as logging into your essential databases.

Features and MySQL support

To understand how Adminer stands out, compare it with another leading MySQL GUI, phpMyAdmin. Adminer offers numerous improvements, according to its developers:

It's available in a MySQL-only version---purpose-built without excessive bloat
Permanent logins
Automatic field generation
Multi-index manipulation
Complete foreign-keys support with an associated interface
Full support for triggers, routines, and events
Absolute and relative modification support in bulk
Safer row cloning with confirmation, avoiding overwrites
Seamless anywhere-synchronization using an ALTER export
Multi-query SQL results displayed in a single view
Concurrency with multiple tabs during complex operations

Adminer requires secure logins for all integrated databases, and employs rate limiting to thwart brute force attacks. It's built to be lightweight and rapid thanks to asynchronous data downloading. Table fetching isn't a limiting factor when requesting lists.

Among other features, Adminer allows plenty of table manipulations---especially those involving listing, indexing, altering, creating, dropping, and adding records or indexes. You can execute any SQL command using text fields and files. It's also possible to create new databases, export data structures, kill processes, and display users alongside their rights. Adminer allows all of this while encouraging you to harness your preferred data type.

Best use cases

The makers of Adminer highlight two seemingly paradoxical benefits: its simplicity and its customizability. But customization isn't necessary to get the most out of the GUI. It's available for power users, while the base package remains usable to novices.

That said, flexibility is a major strength of Adminer. It allows experienced developers to stretch their capabilities with plugins, extensions, and other APIs. It's great for those with solid knowledge of PHP and avoids the one-size-fits-all pitfalls of other applications. Finally, the toolset is welcoming to newcomers thanks to liberal inclusion of text fields, drop-downs, toggles, checklists, and radio buttons.

Beekeeper Studio

Decidedly the junior compared to something like Adminer, Beekeeper Studio first launched in early 2020 as a modern approach to MySQL database management. This is reflected in its aesthetic, which mirrors that of other GUI-centric applications in the past five years. The interface and editor come with numerous content views, most of which are information-rich and well-organized. Development has also been steady, with forty-one releases in the past year and a half (at the time of writing).

Installation

Beekeeper Studio is compatible with Windows, Mac, and Linux. The program is built primarily using Vue, TypeScript, and JavaScript. No PHP downloads are required locally. To get started, install the appropriate .dmg or package directly from Beekeeper's website.

You can get started with Beekeeper within minutes, depending on your OS.

Features and MySQL support

Beekeeper highlights a host of key features on its homepage. Security is highly important, given that SSL encryption is standard for all database connections. Beekeeper will hold onto your password for safekeeping. It also helps you connect through firewalls via specific ports.

Beekeeper Studio supports SQL autocompletion through the built-in editor, which provides dev-friendly features like syntax highlighting and pop-up suggestions. This makes it much easier and less tedious to fly through numerous SQL queries. Beekeeper also provides the following:

Support for dozens of concurrent tabs within one unified window
Quick saving and organization of common SQL queries
Quick and easy data table changes, with the ability to stage changes later on
Straightforward creation, editing, and deletion of table columns, indexes, and relations using the GUI
Data export in CSV, JSON, JSONL, and SQL in just a few steps---even in conjunction with specialized data filters

Beekeeper also supports multiple run contexts. It's possible to run all queries by default, run the current highlighted query, or run selected queries only. Once data is retrieved and arranged in a table, you can filter, sort, and peruse this information however you wish. Beekeeper also supports a number of default keyboard shortcuts.

Best use cases

Beekeeper Studio is designed to work with several DBs, like Postgres, SQLite, and SQL Server. It's not built solely for MySQL and is therefore better suited for day-to-day data lookup and manipulation, as opposed to intensive or detailed projects. Compared to something like Adminer, Beekeeper supports a smaller array of MySQL-specific features, which you might miss.

The editor is the star of the show here. It's attractive, easy to work with, and relatively powerful. If you're looking to bang out numerous lines of SQL queries, you'll feel right at home within the app.

CloudBeaver

CloudBeaver's integrated schema diagrams\
Released around the same time as Beekeeper Studio, CloudBeaver is a smaller, open-source project supported by a stable of thirteen contributors. Because of this, development schedules are a little more deliberate, but that hasn't stopped CloudBeaver from fine-tuning its lightweight, user-friendly GUI. The interface is clean and has both dark and light modes. CloudBeaver also presents users with informative visualizations, keeping you engaged and organized as databases scale. Being a web application, this tool is accessible to a larger subset of users without consuming too many resources or disk space.

Installation

CloudBeaver comes in three flavors. First is the web application, which leverages a web server and JavaScript frontend. While this method is accessible, CloudBeaver warns that the setup process can be somewhat complex.

Next is the popular community build, which is free. CloudBeaver distributes this as a Docker image on Docker Hub or as source code.

The final version is CloudBeaver Enterprise. The development team has made a Docker container specifically for this purpose, or you can secure an AWS-compatible version within the AWS Marketplace. The application is predominantly built using TypeScript and Java.

Installing CloudBeaver requires the Terminal and some scripts. Use either docker pull dbeaver/cloudbeaver:latest to pull the current build, or docker pull dbeaver/cloudbeaver:dev to grab the newest developer build.

You can run CloudBeaver using the Terminal, using daemon mode, or by accessing localhost databases.

Features and MySQL support

At the macro level, CloudBeaver offers you its data editor, data export, entity diagrams, SQL editor, AWS-and-Docker integration (RDS, Redshift, Dynamo DB, Docker Hub), and execution planning. However, let's dig a little deeper to understand how helpful these features) are.

The data editor displays data from tables and queries in a readable list format composed of labeled rows and columns:

Scanning these custom categories and arranging data in a sensible format is doable in a snap. Both relational and document-oriented databases are supported. Quickly view values for all data types, read from tables regardless of length, use the dedicated data-filter panel, or even order tables based on column numbers.

For export, CloudBeaver supports CSV, XLSX, XML, JSON, and SQL INSERTs formats. Entity diagrams offer more interesting features. Should you want to visualize your entire database schema, Beaver will provide a flowchart-style diagram with labels and categorized data points. Unique keys, foreign keys, and automatic layouts are supported by default. You can even export this visualization as a PNG or SVG file for safekeeping.

The SQL editor supports syntax highlighting for different dialects and even provides auto-completion for columns, tables, SQL keywords, and procedures. Query results are viewable in multiple concurrent tabs.

You can integrate CloudBeaver with your AWS account to unlock authorized browsing of AWS databases using AWS credentials and RDS authentication. This type of process relies either on Kerberos or Active Directory, and thus allows you to clamp down on unintended access. You also have compatibility with Docker environments and the ability to serve local or remote databases.

Finally, the execution plan feature generates a query-execution tree in a results tab and evaluates whether scripts and queries are designed to work optimally in their existing formats.

Best use cases

If you prefer integration with AWS, you'll love CloudBeaver. The tool is built from the ground up with these platforms in mind, offering an expansive list of possibilities for serving and pulling databases from multiple sources.

CloudBeaver is also good for team collaboration---you can invite contributors to join project workspaces with a simple, shareable link. It's a viable solution for enterprises and common users alike---while other tools don't offer specialized corporate versions. That alone speaks volumes.

phpMyAdmin

phpMyAdmin demo interface

A stalwart in the database management space, phpMyAdmin launched in 1998 and has since enjoyed voracious support. GitHub has recorded 469 releases since launch---an ambitious schedule made possible by over 1,100 contributors. It's written mainly in PHP.

Installation

At the OS level, phpMyAdmin supports Windows and various Linux distributions. However, be warned that macOS is NOT supported.

Choose an appropriate distribution kit from the website's Downloads page, unzip it, connect to your web server, and configure the tool accordingly. You might opt for MyAdmin's new wizard-style installation, which makes things easier.

There are three other ways to install phpMyAdmin: using a Git package, via Docker, or via Composer. These utilize images and tarballs.

Features and MySQL support

The web-based phpMyAdmin tool allows you to use either the GUI or direct commands.

The tool also offers the following features:

Support for MySQL functions like browse or drop for tables, databases, fields, views, and indexes
Create, copy, drop, and rename functions for the above items
Support for server configuration proposals and server maintenance
Importing and exporting data in a wide range of formats
Administering multiple servers
Creating multi-format database graphics
Creating complex Query by Example (QBE) queries
Global and subset database searches
Transformation of stored data using predefined functions and formats---even converting BLOBs into links or images

phpMyAdmin supports both LTR and RTL languages. The tool has been translated into seventy-two languages, making it accessible for global users.

Best use cases

phpMyAdmin has had plenty of time to develop a list of highly requested features. Administrators and architects can trust it to handle tasks ranging from menial to intricate.

MySQL Workbench

MySQL Workbench was launched in 2015 as a visualization tool for database architects, developers, and DBAs. It's a full-fledged suite that allows you to data model, develop SQL, and administer everything around your databases. It's written mainly in C++ and has twenty-five releases stored on GitHub.

Installation

MySQL Workbench is available for Windows, macOS, and Linux distributions. It's designed to work best with (yet doesn't require) a MySQL server connection, along with simultaneous client connections.

MySQL Workbench can be installed via the command line. However, there are unique installation pathways for each OS.

Features and MySQL support

MySQL Workbench is primarily a GUI-centric tool and thus ditches the scripting interfaces found elsewhere. Designed to work with MySQL Server 5.6+, it offers the following:

create and manage database-server connections, connection parameters, and integrated query execution
assemble data into meaningful graphical designs, reverse and forward engineer between schemas and live databases, and edit all database elements as needed. The Table Editor makes it easy to alter tables, columns, indexes, triggers, options, privileges, inserts, and partitioning
server-instance management, auditing, backup and restoration, and performance-health monitoring
data migration between versions of MySQL or moving data from other database systems to and from MySQL
MySQL Enterprise support

Use cases

Like phpMyAdmin, MySQL Workbench is made for both novices and experts. As the native database management option for MySQL, the tool excels at supporting the database technology without major hiccups. It's perfect for those hoping to keep everything under one proverbial roof.

Conclusion

As you can see, there are plenty of exceptional (and approachable) MySQL GUIs on the market. No tool is perfect, but your needs and preferences will help determine which is ideal for you.

It's also true that simple is often better. At Retool, we work to make it easy to build apps and tackle other projects using your team's data. We aimed for a clean, organized GUI enables you to quickly view, edit, and analyze information whether you prefer lists, tables, or richer visualizations.

To learn more, give it a try.

What is low code?

kevbosaurus — Fri, 25 Jun 2021 22:51:54 +0000

Low code and no code have all the hype, but among developers, they also have equal amounts of skepticism.

In March 2021, no code pioneer Zapier acquired no-code community Makerpad. In April 2021, UiPath, a provider of low code automation software, IPO'd at $31 billion. Gartner predicts that by 2024, more than 65% of application development activity will come from low code application development platforms.

Software is eating the world, but low code and no code are making developers rethink how software is made.

Of course, (some) developers tell a different story. According to an Evans Data report, one in five developers never use low code, and almost three-quarters of developers use low code less than half the time. And anecdotally, many developers express a similar sentiment to low code as Reddit user blahblahblah does below:

In this article, we're going to dig into open questions, including:

What is low code?
What's the difference between low code and no code?
What are the major use cases for low code?
What are the benefits and drawbacks of low code?
What does low code say about the future of software development?
What are some good low code development platforms?

Throughout, we'll return to the thesis that though low code may not be disrupting or replacing software development, it is transforming it.

What is low code? A primer

Low code is the development of software via a visual, drag-and-drop interface. The logic is simple and the UI is intuitive, but the results are scalable, secure, and performant.

The three components of low code

A low code development platform consists of three major components that are, by and large, common across all low code tools and platforms.

A visual integrated development environment (IDE): This is the core of a low code development platform. It's usually a drag-and-drop interface that developers use to model workflows and declare logic. As necessary, developers can also use it to add hand-written code. Typically, developers use the IDE to create most of the app and then customize the last mile with hand-written code.

Connectors: Depending on the low code platform, various kinds of connectors plug the platform into a variety of back-end services, databases, and APIs. These provide extensibility and increased functionality. Developers tend to prioritize connectors because the usefulness of a low code platform is directly tied to what it integrates with. Some early low code platforms are short on connection functionality, leaving developers with with unnecessary workarounds or missed requirements.

Application lifecycle manager: Again, depending on the low code platform, it might also include tools for debugging, deployment, and maintenance across testing, staging, and production. If a low code platform promises robust results that match those produced by hand-coding, then it needs to come with lifecycle management to match the standard software development lifecycle that developers run when creating software from scratch.

Though low code platforms and tools can differ widely, they all tend to share these three components.

What does low code do?

The primary goal of low code is to reduce the amount of "hand-coding" (i.e., code done from scratch) and increase the amount of code reused and apps developed. Low code is highly composable, meaning that when you use the visual IDE to construct a component, it's easy to then reuse that component in different situations. You get the initial speed of using an IDE and then even more speed as you reuse the resulting components.

The reason why it's called "low code" (as opposed to "no code," which we'll get into in the next section) is that low code development is split roughly 80:20 visual coding to hand-coding. You build about 80% of your app using a low code UI and then hand-code the rest---usually last-mile specifications, as necessary. In the below video, for instance, our developer advocate, Chris Smith, uses in-line JavaScript to get an order total for a MongoDB admin panel.

The future of low code is bright

Developers have plenty of reasons to be skeptical of low code. Many have seen the rise of technology fads that similarly promised the reduction---or even the elimination---of traditional programming. The elders among us will remember Visual Basic and PowerBuilder.

That skepticism is belied by the research. According to Mendix research, 99% of organizations surveyed report that they'd benefit from the capabilities of low code platforms.

Our own research shows that 89% of developers enjoy building with low code, 90% of developers believe low code meets their needs, and 89% of developers plan to keep building with low code. And, as we mentioned at the top of this article, Gartner predicts that more than 65% of application development activity will come from low code application development platforms by 2024.

Companies, analysts, and developers agree: low code is here to stay. We're reaching an inflection point where the capabilities of low code technology are actually ready to meet their promised potential.

Low code vs. no code: The differences and similarities

Let's bust a myth right from the get-go: low code and no code are not the same thing. They share some similarities, but on close inspection, those similarities become superficial. At a fundamental level, the technologies are different.

What is no code?

If low code is the minimization of hand-coding, then no code is the elimination of hand-coding.

No code also uses a visual workflow builder and IDE, but it doesn't require developers to hand-code at all, a feature that poses both advantages and disadvantages.

At first glance, that difference seems minor. If anything, it seems advantageous for no code---why code a little when you could skip coding altogether? But it turns out that difference makes all the difference.

Low code vs. no code: the small differences

The first differences you'll notice between low code and no code involve differences among target users, design, and UI. Though these differences aren't minor, they make low code and no code applications look slightly different.

Target user: Low code is for semi-technical business users and technical developers, whereas no code is just for business users. Since low code still involves some hand-coding, many low code tools still require software developers to either handle development or take it over the last mile.
Design: Low code platforms still depend on hard code for software architecture, whereas no code tends to have model-driven workflows and declarative logic.
UI: Low code provides greater flexibility, enabling developers to add hand-written code to visually developed components, whereas no code is a closed system that tends to lock users into the abilities of the no code platform in question. The ramifications of this lock-in vary depending on what platform you choose.

If these were the only differences, you could imagine low code and no code someday converging or a vendor offering a platform that effectively does both. This ignores the fact, however, that low code and no code are different at a fundamental level.

Low code vs. no code: the big difference

No code abstracts away code, whereas low code retains the ability to code. Though that difference might seem small on the surface, the ramifications are profound.

Low code is a natural extension of web frameworks, component libraries, and the long tradition of borrowing pre-built work and adding in nuances that are unique to your situation. Developers have always strived for more composability, and entire businesses have been built on this desire: think API-first companies like Twilio and package managers like npm.

Low code is less a disruption and more a continuation of this tradition. Low code helps developers move faster, both by helping them make decisions and follow through on actions more efficiently. That speed, however, doesn't sacrifice anything---low code respects the fact that developers will still need to customize.

The ability to customize is a DNA-level difference, and it has ripple effects. No code aims at a new audience with a new proposal: turn all of the code into UIs, logic, and simple steps, such that non-technical business users (or "citizen developers") can now "code."

No code, by its very nature, is opinionated and inflexible. While both low code and no code manifest similarities (namely the drag-and-drop visual IDE mentioned above), they approach different problems and solve them so distinctly that the possible end results are entirely different.

5 low code use cases

Low code use cases range from the complex (such as full-on app development) to the relatively simple (such as landing page design).

1. Internal tools

Internal tools aren't flashy, but developers spend a lot of time working on them. According to our research in The state of internal tools in 2021, developers spend nearly a third of their time (30%) building internal applications.

It's not that this work isn't impactful (it is; for companies with more than ten employees, one in three employees are using internal apps a developer has built). It's that internal tools aren't always how developers want to spend their time nor how businesses want to spend their development resources.

With low code platforms, you can develop internal tools faster and even enable some non-developers to build them, too.

2. UI design

Some low code platforms let you build an intuitive user interface from drag-and-drop components. This is especially useful for back-end developers who may have to build dashboards but aren't familiar with UX best practices.

This use case bleeds into others on the list. A popular internal tool, for instance, is a sales dashboard that helps sales reps track deal flow. The sales team might ask a back-end developer to make such a tool, and while the back-end developer can easily handle the data, they might not be able to present that data in an intuitive way.

With low code, a back-end developer can easily spin up a UI that they can layer onto the data they retrieve.

3. Integration and automation

Platforms like UiPath, Workato, and Appian provide ways to integrate apps and automate the processes that connect and flow between them.

Many companies, large enterprises especially, are stuck with legacy infrastructure (think SAP, Oracle, Citrix) that they can't afford to rip out and replace. These companies, however, are increasingly feeling the heat from nimble startups relying on custom-built tools, SaaS apps, and APIs.

With low code, enterprises can achieve some of that speed by connecting and automating those legacy systems. Enterprises can then adjust and iterate much like startups can, leaving them less vulnerable to disruption.

4. Basic app development

Low code tools like Bubble.io enable non-developers to spin up entire web apps, and low code tools like Memberful enable non-developers to add specific features to their apps (in Memberful's case, membership).

Some of the results of Bubble.io, according to their showcase page, include:

Teeming, a cloud-based tool that helps remote teams bond via interactive work sessions
ResidentStreet, a platform that connects people looking for "mid-term accommodations" (1-11 months) with furnished properties
Incomee, an accounting tool for freelancers

This use case is one where the difference between low code and no code really matters. Be aware of the customization limitations of no code as your app scales.

5. MVPs and prototypes

The minimum viable product (MVP) methodology, originating with famed startup expert Eric Ries, asks developers and startups to ship products faster, get feedback earlier, and build with customers in mind. MVPs (and prototypes, a similar idea) are a great use case for low code.

The idea is this: don't invest tons of development resources into an app or feature you're unsure of. When you're building an app from scratch, the necessary up-front investment is immense. You have to think about hosting, the back-end, the front-end, the UI, maintenance, monitoring analytics... the list goes on.

Those are all distractions from what your primary focus needs to be at this early stage: your user and what they need. Low code helps you delay those important business decisions, so that you can make them later, when you have a stable business and customer traction.

With low code, you can get most of the way toward your final product, test it with your customers, and then, and only then, make an investment you're confident in.

Why low code? Benefits and drawbacks

Low code has a variety of benefits and drawbacks, all of which depend on which low code platform(s) you choose and how you use it.

Low code benefits

Though low code comes with many benefits, they generally come down to three core ones.

Increase time to value (TTV)
Compared to hand-coding, low code development gets developers from idea to execution to production much faster.

According to Kintone research, developers using low code tools "get applications out the door faster than large IT departments. They turn around their required applications in a matter of weeks, or a couple of months. Only 17% report turnaround times exceeding three months."

Improve developer productivity and efficiency
Many low code platforms come with pre-built components, and most come with the ability to make components you can reuse, making low code development eminently composable. Developers can borrow, build, and reuse components as they go, making them more efficient over time.

Improved productivity and efficiency is backed up by research, both in terms of sheer speed and the ability to meet previously unmet demand via improved efficiency:

Forrester analyst John Rymer says that low code platforms "have the potential to make software development as much as 10 times faster than traditional methods."
Caspio research shows that 63% of organizations using low code platforms have the skills and resources to fulfill the demand for custom apps, whereas only 41% of organizations not using low code can say the same. Similarly, 61% (as opposed to 38%) of organizations using low code typically deliver custom apps on time, on scope, and on budget.

With low code, developers can ship faster.

Better use of existing staff
Developers are in short supply.

According to the Bureau of Labor Statistics, "employment of software developers...is projected to grow 22% from 2019 to 2029, much faster than the average for all occupations." Demand for software developers is already outpacing supply, despite the ever-increasing need for software. This is backed up by TechRepublic research, which found that 83% of CIOs struggle to find tech talent.

Low code allows already hired developers to move faster (as covered in the previous benefit), but it also allows non-developers, such as operations staff, to take part in development. Companies can produce more software with existing staff.

Drawbacks

Low code isn't without its drawbacks, but you can defeat many of these by choosing a modern low code platform that fits your use case.

Vendor lock-in

Perhaps the top reason developers fear low code tools is the risk of vendor lock-in. Whereas hand-coding is inherently flexible and extensible, low code platforms have the potential to lock developers into a limited ecosystem.

This drawback varies depending on which low code platform you choose. Legacy low code application development platforms, many of which resemble no code more than low code, can absolutely lock you into their ecosystems. Modern low code platforms, however, tend to be built on the aforementioned tradition of composability, meaning that there's an inherent respect for the need to customize.

Retool, for instance, is built on Javascript and SQL, meaning developers versed in those languages can easily add on to what they develop in Retool.

Shadow IT and governance

IT might be resistant to low code adoption.

According to Jason Bloomberg, an IT industry analyst, "IT has been telling business stakeholders for years that the six month/million dollar plan is the only way to build enterprise software," but now, according to Simon Chan, Founder and CEO of DigiVue Consulting, "the same systems can be implemented by smaller players at a fraction of the price and in a fraction of the time," which "has leveled the playing field."

What might appear to be a level playing field to a business user, however, can appear to be a threat to IT. IT has long had to resist the encroachment of so-called "shadow IT," and a low code program might appear to add fuel to that fire. Imagine, the IT admin might fear, if employees were not only adopting SaaS tools without permission but were building apps without permission?

This isn't IT being controlling. There are serious ramifications, especially in terms of security, from letting more people build software. And they're not wrong --- according to Kintone research, more than one in four surveyed organizations have no citizen development policy of any kind in place. The problem is less with low code itself and more with how companies implement and scale low code programs. Eventually, governance becomes necessary.

Scalability

Some developers have an instinctual resistance to low code platforms based on the assumption that any code that isn't hand-written can't be robust enough to scale. This assumption isn't true---low code apps can scale to enterprise proportions---but the nugget of truth is that many low code platforms aren't built with scale in mind.

Outsystems, for instance, in a surprising moment of vendor honesty, notes that "When it's time to scale, integrate with existing systems, or perform under extreme conditions like a mobile banking app on Black Friday, the [low code] application could buckle under the weight of functional and nonfunctional requirements. If an application built with low-code needs updating or if the underlying technology needs changing, good luck."

The solution here tends to be picking a low code platform that *can *develop apps that can scale. And scalability tends to come from leaning into low code's advantages. No code apps are much more likely to suffer from scalability problems because they aren't customized. Use low code to build your foundation but hand-code your way to scalability.

How low code will shape the future of software development

Low code development will not replace traditional software development. Full stop. But it will change software development---and in some areas, the change will be dramatic.

Low code will add (more) abstraction

Low code, understood historically, is another layer of abstraction between developer and code.

You can trace the roots of low code back to the fourth-generation programming languages (think Visual Basic and PowerBuilder) and computer-aided software engineering (CASE), rapid application development (RAD), and business process management (BPM) tools from the 1990s. These early tools and platforms tried to fulfill the same promise modern low code does: build real apps in less time and with less code.

It took another couple of decades for the brand name to form, however. The first popular instance of the phrase "low code" occurred in a 2014 Forrester report and has been on a steady rise since.

Searches for "low-code app development platform" on Google Trends

If you want to get technical, you can trace low code back through the history of code, too. The history of code is itself a history of abstraction: every programming language is a more human-readable version of binary code. What's unreadable to us now, like FORTRAN, was a big step toward readability back in the day. As Nacho Iacovino, developer advocate at Clerk, wrote in a guest post for us, even modern options like React are "a low(er)-code option, compared with the alternative of vanilla JavaScript which would take many more lines of code to achieve the same results."

In the same way, low code is another step toward readability and up the ladder of abstraction. Viewed this way, low code isn't a departure from history so much as it is a continuation.

Low code will add, not disrupt

A major reason developers are skeptical of low code is the hype. A simple Google search reveals the scale of the hype. "Is low code the future" returns over 2 million results, and articles on the topic include titles like:

Why Low-Code Automation Is The Tech Of The Future
Why low-code and no-code are the future of enterprise applications
The Future of Software is No Code and Low Code Programming
Low Code Is The Future Of Application Development
Low-code programming -- the next frontier in app development

Realistically, low code isn't the future; it's part of the future. Internal tool development, our specialty, provides a perfect example.

Internal tool development (which developers spend 30% of their time doing) is an ideal use for low code. Though two out of three developers default to building from scratch (instead of using a spreadsheet or a SaaS tool), 88% of developers that *do *build internal apps using low code plan to keep building that way in the future. In other words, most developers have a need that low code solves for but aren't using low code---but once they try low code, they keep using it.

More than likely, low code won't disrupt, displace, or destroy software development. Instead, developers will try particular low code tools, especially ones specialized for specific use cases, and replace hand-coding development when it benefits them to do so.

Low code will expand the circle of software development

According to Scott Brinker, VP of Platform Ecosystem at HubSpot, the best way to think of low code is to think of it as a way to expand the circle of people who can develop software.

Low code, as well as no code, enables more people to build software. This bears out in the research so far. According to Kintone research, many non-IT low code developers are power users "embedded within line-of-business departments building the applications."

Power users are becoming more powerful, so powerful that they can now develop software. According to John Rymer, an analyst at Forrester, he can "see maybe 100 million people---business people---engaged in producing software."

That means that companies don't need to hire software developers for every software need. That doesn't mean that developer hiring will slow, but that companies can reallocate developer hiring away from some projects (say, internal tool development) and toward customer-facing features as well as complex and unique software development problems.

The impact of low code on startups and enterprises

Often lost in the discussion of low code and its effects is context: low code looks very different to startups and enterprises.

Low code and startups

Startups are time- and resource-strapped, which is the primary reason they adopt low code tools. With low code, their existing engineers can move faster and make a greater impact in three primary ways.

Internal tools will be easier to make
With low code tools, developers can re-focus from internal tool development toward customer-facing features. For startups, who may only have a couple of developers, this time and effort are precious. With product-market fit still on the horizon, early-stage startups need as many engineering resources as possible dedicated to iteration.

Back-end developers will be able to develop better services
Back-end developers are well-versed in systems and functionality but not in UX design. With low code, even back-end developers can create pretty, intuitive apps and tools. The ever-elusive 10x full-stack developer becomes more attainable if you can enable back-end developers to create things only a front-end developer would normally be able to make.

Validation will come sooner in a startup's life
As we covered above, low code enables companies to rapidly build MVPs and prototypes. This is especially useful for startups, who may still be settling on a product and pursuing product-market fit. The right low code tool will also enable rapid iteration, such that startups can debut and improve products before dedicating much in the way of hand-coding.

Curtis Cummings, a Senior Software Engineer at On Deck, said in an interview he did with Retool, "I've been on a couple of different projects in my consulting career where we had this perfect spec, we built it perfectly to spec, went out to users and it fell flat on its face because all the assumptions that backed up that spec weren't validated or grounded in user data."

With low code, startups are less likely to fall on their faces.

Low code and enterprises

Enterprises are not, generally, in want of resources like startups are, but they are often stuck with technical debt.

Enterprise technical debt, driven by prior investments in now legacy technologies, is encouraging many enterprises to adopt low code and pursue modernization. There are three primary use cases for enterprises and low code.

Improved agility
Low code tools, especially those from the RPA and workflow automation fields, will enable enterprises to move more nimbly. Enterprise technology stacks are often overly complex, old, and slow. Low code automation tools can reduce the negative effects of that complexity. These tools can automate the steps involved in the processes these legacy tools run.

Software robots, offered by low code RPA tools, for instance, can run unattended, meaning they can operate in the background, 24/7, handling all the agonizingly manual processes legacy tools typically require.

Modernize and connect legacy technology
Enterprises are not only stuck with legacy technology; those legacy technologies are themselves often stuck in disparate silos. Connecting your ERPs to your CRMs and back again, for instance, can be a nightmare. Enterprises often face the choice of either living with it and being inefficient or hiring armies of consultants to fix it all, which is expensive.

With low code, enterprises can modernize their legacy technology stacks without ripping them out and replacing them. Low code tools can layer on top of these tools and create a much more usable, intuitive interface. Business users can then access and use systems they previously would have had to request help from developers to use.

Digital transformation
Forgive the buzzword, but for enterprises, digital transformation is a serious pursuit. Many enterprises are still operating on paper and, if not paper, so-called "digital paper" systems --- technologies that weren't designed with the internet and native digital capabilities in mind.

In clinical research, for example, as product manager Stephanie Morillo points out in this Twitter thread, many organizations still use Excel. Rather than use a modern database tool, enterprises (and their employees) use a tool that lacks version control and can't handle the thousands of rows necessary for their purposes.

If ever there was a need for low code, this is it.

Low code is in your future (even if it isn't the future)

Big brain, hot take "thought leadership" on low code often relies on the phrase "the future of," as if software development --- an already complex and diverse field of technologies and methodologies --- will somehow evolve into one, simple thing. Well, it won't. That doesn't mean, however, that low code won't create incredible change.

Low code will transform the field of software development by empowering developers to choose when and where they want to spend time hand-coding. With low code, developers can build less and architect more. As more developers adopt low code, the industry will shift in big, unpredictable ways.

Full-time developers, armed with low code (or arming business users with low code), can re-focus from solving simple problems to solving complex problems. The effect of this reallocation is hard to understate and hard to predict. Developers run the world these days (see Stripe, Twilio, Atlassian, Datadog, MongoDB, etc.), so imagine if these kingmakers shifted their internal tool development efforts (30% of their time) toward changing the world. And that's only one use case for low code!

The best React Native datepicker libraries

kevbosaurus — Thu, 10 Jun 2021 17:39:30 +0000

Date pickers are a common and essential component for many apps, especially those that facilitate event booking—like a hotel booking app—to aid seamless date selection. Date pickers improve app usability by reducing the complexities of date validation issues by ensuring that invalid dates cannot be entered, restricting date ranges, and eliminating date format confusion (for example, is July 9, 2010 or September 7, 2010).

The React Native framework used to provide React-Native date picker APIs for Android and iOS—DatePickerAndriod and DatePickerIOS—are now deprecated. Your choices now are to either build a date picker from scratch or use another date picker library.

We researched and tried a handful of popular React-Native date picker libraries, narrowing down to four options based on factors that make a good library. Out of the top four libraries, we found the React-Native DateTimePicker is the best; we’ll walk you through our reasoning for the selection.

What to consider before choosing a library?

We considered several factors in making our selection for the top React-Native date picker libraries and landed on the following:

Documentation: Documentation is a necessity for every library, so you need to check if the library has a documentation file or site. Is the documentation detailed and written in simple language? Does it clearly highlight how to install and set up the library, how to use the library with some code examples, and have solutions to common issues or FAQs?

Popularity: If many developers are actively using a particular library, then it’s likely to get the job done. Popularity indicators we looked at include metrics like the number of downloads recorded on the library’s npm page, number of forks, stars, users, and contributors on GitHub.

Code update frequency: If the codebase of a library is not frequently updated that means it is not actively maintained. Metrics you should look out for are: last commit date (anything greater than a year ago is a cause for concern), number of open vs. closed issues (the latter should be greater than the former), and date of the last version release.

Usability: How easy is it to use the library? Do you have to learn any new technologies outside your existing tech stack? Does it support all platforms you need?

Bundle size: When adding a package, how much extra weight will this add? Will it significantly increase the size of your app? You can use bundlephobia to check.

Reputation of creators: Who are the creators/maintainers of the library? What is their experience? Have they successfully built and maintained other open-source libraries?

Why React-Native DateTimePicker is the best date picker library

As mentioned, we used the factors discussed above to assess several React Native date picker libraries, and React-Native DateTimePicker stood out from the pack. It is the most popular, has the most downloads, and was created and is maintained by the React Native community—the same group that builds and maintains most popular packages in the React Native ecosystem.

Here are detailed specs of this top-notch library:

Documentation: Documentation is available via the repo’s README.md on Github. It is elaborate, shows how to install, set up, and use the library’s ‘DateTimePicker’ component, and also discusses all accepted props
Popularity: 46 contributors, 1.2k stars, 16.2k users on GitHub, approximately 150k weekly downloads
Code update frequency: Since the first version was released on 18 June 2019, new versions with are released at least once every month
Usability: Supports Android, iOS, and Windows. Supported by Expo — the official toolchain for building React Native apps
Bundle Size: 188kb
Reputation of creators: Created by and actively maintained by the React Native community

Notable React-Native date picker library options to consider

Based on our assessment, we found other React-Native date picker libraries that are worth recommending as well. If React Native DateTimePicker doesn’t suit your needs, here are three other alternatives that are popular, have good documentation, and are also simple to use.

React-native-modal-datetime-picker

Documentation: Documentation is hosted on the repo’s readme.md on Github. It is straightforward, covers all the basics required to install, set up, and use the DateTimePickerModal component from the library, alongside a description of all acceptable props and answers to popular FAQs.
Popularity: Approximately 100k weekly downloads, 2.2k stars, 9.1k GitHub users, 76 contributors
Code update frequency: The repo is active. Over 66 releases since its first release on October 6, 2016
Usability: Supports Android and iOS. Also, Supported by Expo. But, it uses React-Native DateTimePicker under the hood, so it is dependent on it. It is a good alternative if you want to show your date pickers inside a modal.
Bundle Size: 35.2kb (lightest weight of the bunch)
Reputation of creators: Matteo Mazzarolo, a software developer at inVision

React-native-date-picker

Documentation: Documentation is hosted on the repo’s readme.md on Github and it covers all the basics required to install, set up, and use the ‘DatePicker’ component from the library, alongside a description of all acceptable props and answers to popular FAQs.
Popularity: It has 826 stars, 24 contributors, 1.5k GitHub users, and approximately 26,000 weekly downloads
Code update frequency: Since its first release on 8 April 2018, there have been 71 releases, with at least a new version with code updates and bug fixes every month
Usability: Supports Android and iOS. Not supported by Expo. It is ideal if you want a unified date picker design across your Android and iOS apps.
Bundle Size: 157kb
Reputation of creators: Henning Hall, JavaScript developer at SF Studios

React-native-calendar-picker

Documentation: Documentation is available via the repo’s readme.md on Github. It is elaborate, shows how to install, set up, and use the library’s ‘CalendarPicker’ component, discusses all accepted props, and showcases several code examples to achieve different tasks.
Popularity/Active community: 579 stars, 1.4k GitHub users, 38 contributors, approximately 5000 weekly downloads
Code update frequency: Over 31 version releases. Ever since the earliest release was made on March 10, 2018, at least 5 releases are made yearly to fix bugs and update the codebase.
Usability: Android and iOS. No time picker. Not supported by Expo. It is a good alternative if you just want a simple calendar interface for date picking across all platforms.
Bundle Size: 99.6kb
Reputation of creators: Stephani Bishop, Senior software engineer at Netflix

Getting started with React-Native DateTimePicker

You’ve heard our take on the React-Native DateTimePicker. Now, let’s give you an overview of how you can install and use it in your project. Before you get started, ensure you have XCode >= 11.6 and React Native version 0.60 or greater.

1. Install via npm /yarn

npm install @react-native-community/datetimepicker --save

2. Rebuild project

npx pod-install

3. Import and use

import React, {useState} from 'react';
import DateTimePicker from '@react-native-community/datetimepicker';

const App = () => {

const [date, setDate] = useState(new Date());

const onChange = (event, selectedDate) => {
 const currentDate = selectedDate || date;
 setDate(currentDate);
};

 return(
      <DateTimePicker
         value={date}
         onChange={onChange}
       />
 )
}

For more detailed instructions and examples, check out the library’s README.md

A React-Native date picker library for every use case

When sifting between different React-Native date picker libraries, based on factors like ease of use, active development, and popularity, then React-Native DateTimePicker is the pick of the litter.

That said, as we’ve proven with our full list of libraries, there’s no dearth of popular, efficient, and highly usable options when it comes to React Native date picker libraries — regardless of your use case.

Top React component libraries (2021)

kevbosaurus — Fri, 28 May 2021 20:19:16 +0000

Because of React’s ubiquity (169k stars on GitHub), developers have a near-endless supply of UI libraries with custom components to draw upon to build applications. But not all React component libraries are created equal. Some are best for general purposes, others were created specifically for web development, and many are tailored for niche use cases like enterprise product production.

We’ll review React component libraries in this post considering several factors like popularity, use cases, documentation, resources, support, etc.

Material-UI
Ant Design (AntD)
React Bootstrap
Grommet
Rebass
Blueprint
Semantic UI React
Retool

Honorable mentions

Fluent React UI
Onsen UI
Evergreen

Material-UI

GitHub Stars	Weekly NPM Downloads	Stack Overflow Questions	Origin
68k	1,9M (May 2021)	12.5k	Google

Developed by Google in 2014, Material-UI is a general-purpose customizable component library to build React applications. The folks at Google designed Material-UI as an adaptable system of guidelines, components, and tools to make app building beautiful yet straightforward.

Material-UI components

The Material-UI component library offers a wide range of options from app bars to time pickers.

Google also provides guidelines for usage, design principles, dos and don’t, and best practices for each type of component. This makes it easy for developers to build well-designed apps regardless of intuition for design.

Material-UI themes and theming

Material-UI offers several free and paid themes to get started with. Paid themes start at $59 for a standard license and increase to up to $599 for an extended license. The key difference between standard and extended licenses is the ability to charge end users. Both are limited to the usage of the theme for a “single application.” Most themes offer a robust set of features, documentation, and support.

For those who want complete control over design elements, Material-UI allows for custom theming to “systematically customize Material Design to better reflect your product’s brand.” Material Design is beneficial for applying consistent design across your app and making global design changes with minimal effort.

Material-UI documentation and support

Material-UI is well documented and supported. Documentation covers everything from installation to components to styling and guides for implementing utilities like server-side rendering and localization.

For support, there’s plenty of free options like the Material-UI community, Stack Overflow, and GitHub. Material points technical questions to Stack Overflow, where more than 12.5k questions have been posted. GitHub is used exclusively as a bugs and feature requests tracker. On the paid side, Material-UI suggests purchasing a Tidelift subscription which offers “flexibility of open-source and the confidence of commercial-grade software.” At the rate of $200/hr or $1500 per day, “Custom work” can be requested for help modifying Material-UI to meet specific requirements.

Apps and websites built on Material-UI

We've grabbed a few screenshots from the Material-UI website below. See the full showcase of public apps using Material-UI here.

Ant Design (AntD)

GitHub Stars	Weekly NPM Downloads	Stack Overflow Questions	Origin
71.4k	610k (May 2021)	3.2k	Ant Financial

Ant Design (also referred to as AntD) brands itself as the "The world's second most popular React UI" although, it's unclear who they view as the most popular. AntD differentiates itself from other React component libraries as a design system for enterprise-level products. AntD has also developed a design philosophy based on four values: Natural, Certain, Meaningful, Growing.

Notable companies that have bought into AntD's design philosophy include Ant Financial, Alibaba, Tencent, and Baidu. Ant Design was created by Ant Financial and was launched in 2016 — more in this Show HN thread.

Ant Design components

AntD offers a set of more than 50 components that serve as building blocks for enterprise applications. They also recommend using other React third-party libraries for components that fall outside of the Ant Design specification, such as the React Hooks Library or React JSON View.

Ant Design theming

Ant Design doesn't offer the same pre-built theme options compared to a library like Bootstrap or Material. At the time of this writing, Themeforest offers 12 themes at prices ranging from $12 to $999. That's a pretty stark difference from Material themes on Themeforest, which has more than 1,500 themes built with Material Design. And Bootstrap has an order of magnitude more than Material with more than 30k themes listed on Themeforest.

AntD offers Ant Design Pro, an out-of-box UI solution for enterprise applications. Ant Design Pro comes equipped with templates, components, and a corresponding design kit.

In addition to Ant Design Pro, AntD packages designs for data visualization, mobile, and graphic solutions so developers can start with a package based on a particular enterprise use case.

Ant Design documentation and support

While AntD does have documentation, it doesn't offer the depth of documentation that a framework like Material-UI has. AntD's component documentation is easy to understand and includes examples and API properties for each component. AntD components also include internationalization support for dozens of languages and uses Less.js for styling components.

While it doesn't appear that Ant Design offers any paid support options, they have an engaged community and many resources for self-learning. AntD uses GitHub Issues for bug tracking. AntD also facilitates community discussions via GitHub, Stack Overflow, and Segmentfault.

Examples of apps and websites built on Ant Design

React-Bootstrap

GitHub Stars	Weekly NPM Downloads	Stack Overflow Questions	Origin
19.4k	838k (May 2021)	2.9k	Twitter

Initially named Twitter Blueprint, the Bootstrap framework was built by Mark Otto and Jacob Thornton at Twitter. Bootstrap predates React by a couple of years (Bootstrap’s initial release was August 19, 2011, and React’s was on May 29, 2013). Bootstrap started as an open-source CSS framework centered around helping developers build responsive, mobile-first front-end websites and applications.

React-Bootstrap is a bit different but very similar to the original Bootstrap framework. React-Bootstrap replaces the Bootstrap JavaScript, and each component has been built from scratch as a proper React component, without unneeded dependencies like jQuery.

React-Bootstrap components

React-Bootstrap’s component library skews toward web development. With less than 30 components, React-Bootstrap also doesn’t provide the breadth of component coverage that a Material-UI or AntD offers. Less can be more, especially for those familiar with Bootstrap and know it can accommodate their use case.

React-Bootstrap themes and theming

Due to the widespread use of Bootstrap for web development, there are thousands of free and paid Bootstrap available. Generally, custom Bootstrap themes work with React-Bootstrap as long as Bootstrap defined classes and variants are used.

React-Bootstrap documentation and support

While React-Bootstrap doesn’t offer any official support, there is a massive, active community and plenty of resources supporting Bootstrap. The React-Bootstrap website suggests starting with support in one of three places:

Stack Overflow to ask specific, detailed questions
Reactiflux Dischord to discuss via chat
GitHub Issues to report bugs

Apps and websites built on Bootstrap

Grommet

GitHub Stars	Weekly NPM Downloads	Stack Overflow Questions	Origin
7.2k	21.5k (May 2021)	84	Hewlett Packard Enterprise

Grommet was developed by HPE and offers a more vibrant (and not so Google-y) look and feel compared to alternatives like Material-UI or AntD. From their marketing site copy, Grommet positions itself as “a React-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package.”

Reading between the lines, Grommet is lighter weight, and from the looks of their website design, it also has bolder component designs.

Grommet components

Grommet provides a bold and robust set of components to use. They categorize components into the following categories:

Layouts — a system for layout of an app with components like headers, footers, grids, cards, sidebars and more.

Type — components for headings, markdown, paragraph, and text.

Color — set color schemes for branding, accents, status, and neutral colors.

Controls — components that let users interact with an app like menus, buttons, navbars, etc.

Input — components where users input things like text, check boxes, file uploads, etc.

Visualizations — components for more rich visualizations like calendars, charts, avatars, etc.

Media — components for video, images, and carousels.

Utilities — catch-all for components that improve user experiences like keyboard shortcuts, responsive elements, infinite scroll, etc.

Grommet themes and theming

While there are not a lot of pre-packaged Grommet themes available, Grommet does provide two useful tools for customizing a theme:

Grommet theme designer — an interactive demo admin panel to create custom Grommet themes by adjusting elements in the admin panel itself.
Grommet designer — an interactive canvas that lets you build and save experiences with grommet components.

Grommet documentation and support

Grommet doesn’t offer any hands-on support. They do have an active Slack community, and, like other frameworks, bugs are submitted via GitHub Issues. In addition to that, Grommet provides resources, including a template/pattern library, component library on Storybook, and a codesandbox for each component.

Rebass

GitHub Stars	Weekly NPM Downloads	Stack Overflow Questions	Origin
7.3k	68k (May 2021)	10	Brent Jackson

Rebass was created by Brent Jackson, who is currently a front-end developer at Gatsby. React primitive UI components are at the core of the Rebass library, which are coupled with a Styled-System. The Rebass Styled System is compatible with CSS-in-JS libraries and reduces the need to write custom CSS into an application using style objects instead of embedded CSS strings. As a result, developers can build faster and add a theme and design elements on top of Rebass primitives. Rebass is also very lightweight, with a footprint of about 4KB.

Rebass components

Rebass comes with a foundational set of primitive components that can be “extended” to build a component library with a consistent API and styles defined in a design theme. Foundational include primitives for app structure (responsive boxes and flexbox layouts), text (heading, text, link, button), images, cards, and forms. The Forms component includes many interactive sub-components like inputs, textarea, sliders, switches, and checkboxes.

In addition to primitives, Rebass offers documentation on recipes for common use cases like grids, navbar, and image cards.

Rebass themes and theming

While Rebass doesn’t have a library or 3rd-party ecosystem of pre-built themes, it does offer a lot of theming flexibility and customization. Themes are applied in Rebass using a ThemeProvider component. Rebass follows Theme Specification for defining theme objects and design tokens for use with UI components. Rebass is compatible with Theme UI and Styled System, which both work with Rebass with no additional configuration required.

Rebass documentation and support

Rebass provides thorough documentation centered around getting developers quickly up to speed on how Rebass works. As the concepts of primitive components, theming, and design systems are understood, developers using Rebass can fully customize and extend the library. There is no paid support or official Rebass communities listed in their documentation.

Blueprint

GitHub Stars	Weekly NPM Downloads	Stack Overflow Questions	Origin
17.8	168k (May 2021)	345	Palantir

Blueprint is an open-source React UI kit developed at Palantir. It differentiates from other React frameworks as being “optimized for building complex data-dense interfaces for desktop applications.” Not a huge surprise, given Blueprint’s origins out of Palantir.

Blueprint components

In addition to its core component package, Blueprint separates component libraries based on use cases and significant dependencies.

Core components — provide the essential components for any app built on Blueprint. This includes components from buttons to form controls to tooltips and trees.

Datetime components — offer a complete set of components for building apps with date and time dependencies. These are components like a DatePicker, DateRangeInput, DateInput, etc.

Select components — a package of components for selecting items from a list such as Select, MultiSelect, Omnibar, QueryList, etc.

Table component — robust table component the features cell and header rendering, virtualized viewport rendering, editable headers and cells, and more.

Timezone component — a TimezonePicker for handling and selecting Timezones.

Icon components — a package of over 300 vector UI icons which can easily be modified by color, size, and effects.

Blueprint themes and theming

Blueprint not the framework to use if you’re looking for a variety of themes to start from. However, Blueprint does offer light and dark mode themes out of the box, and design elements like classes, color schemes, and typography are customizable.

Blueprint documentation and support

While Blueprint provides detailed documentation, it lacks community and support options. The Blueprint GitHub repo appears to be the most active place for reporting issues and getting support from contributors. There are also a few hundred Blueprint questions on Stack Overflow.

Semantic UI React

GitHub Stars	Weekly NPM Downloads	Stack Overflow Questions	Origin
12.3k	176k (May 2021)	2.6k	Jack Lukic

Similar to Bootstrap-React, Semantic UI React is the React flavor of the Semantic web framework. Also, like Bootstrap-React, Semantic UI React is jQuery-free to make it fully React compatible. Because of its origins in aiding with responsive, HTML-friendly web design, Semantic for React is better suited for web development vs. application building.

Semantic UI React components

Semantic UI React has a respectable library of over 50 components. Semantic UI acts as a layer on top of the React components and offers Semantic themes as CSS stylesheets.

Components grouped in the following categories:

Elements — includes foundational components like buttons, dividers, lists, images, and headers. More specialized components like image reveal and rails for content that protrudes borders are also included in the Elements grouping.

Collections — components like breadcrumbs, forms, grids, menus, and tables are included in the Collections category.

Views — visual components like cards, advertisements, comments, feeds, etc., are included in the Views category. Note: that many of these components (e.g., advertisements) are unique to Semantic UI.

Modules — includes modular components like modals, popups, progress bars, and more.

Behaviors — visibility, which provides a set of callbacks for when content appears, is the sole component in the Behaviors category.

Add-ons — additional components like radio buttons, toggles, and sliders are included in this category.

Semantic UI React themes and theming

When using Semantic UI React, it’s important to note that it does not have custom theming options and fully relies on the theming of Semantic UI. Semantic UI theming and design is based around Fredrick Brooks’s concept of “progressive truthfulness.”

Progressive truthfulness is perhaps a better way to build models of physical objects…Start with a model that is fully detailed but only resembles what is wanted. Then, one adjusts one attribute after another, bringing the result ever closer to the mental vision of the new creation, or to the real properties of a real-world object.
Frederick Brooks, The Design of Design: Essays from a Computer Scientist

The idea is to remove complication and analysis paralysis from web development. Rather than building from a blank slate, developers can specify how components should differ from the default theme using CSS variables and let Semantic UI handle the rest.

In addition to theming, Semantic UI React provides layout examples for using grids, responsive design, sticky nav, webpage construction, etc. These layouts offer a useful starting point vs. starting from a blank slate.

Semantic UI React documentation and support

Semantic UI React provides thorough documentation. Most documentation of components includes code to try the component, codesandbox, and live examples. Within the Buttons component alone, there are 36 different button variations from a static button to floating groups of buttons — all come with code to copy/paste.

Retool

Disclaimer: there is bias at play in this overview.

Retool is a platform for building internal applications. It comes with a complete set of powerful 50+ components out of the box. Because Retool is a platform and not just a component library, you can:

compose applications with 50+ drag-and-drop components
connect to any data source or API to work with all of your data sources seamlessly in one app
customize how your app works by writing JavaScript anywhere inside of Retool

Retool also lets you deploy applications as a cloud-hosted solution or on-prem and comes with enterprise requirements for security, reliability, and permissioning built-in.

Retool components

Out of the box, Retool comes with 50+ components to build internal applications. We also offer custom components if you need to load other interfaces into your applications dynamically.

Retool components are grouped in the following categories:

Commonly used — as the name implies, these are core components like buttons, tables, text, dropdowns, etc.

Inputs — components that allow for user input and interactions. These include components like a checkbox, date range picker, rich text editor, slider, etc.

Data — these are components that aggregate data like a calendar, JSON explorer, and query builder.

Charts — build interactive charts in your Retool apps while also providing the full flexibility and customizability of the Plotly.js charting library for more advanced use cases.

Display — visual components that provide users with context such as a progress bar, alerts, timers, and video viewers.

Retool themes and theming

Style editors — Style editors are available across all Retool plans and allow you to customize your Retool components within the Retool UI by editing the style properties (e.g., color, border-radius) of any component.

Themes — Themes are available on the Retool Pro and Enterprise plans and allow you to apply style customizations across any of your applications.

Custom CSS — When inspector styles and themes don’t cover your needs, you can leverage CSS directly in Retool. Custom CSS styles can be applied across all applications within your org settings.

Templates — We also offer ready-made templates as a quick starting point for building internal tools from real-world use cases.

Retool documentation and support

Compared to React components libraries, Retool offers far more extensive support and support. If answers can’t be found in Retool documentation, customers can turn to the following support channels:

Community forum — Retool’s Discourse forum is the best place to get tactical product help.

Power users Slack — If you’re a Retool Power User, you can request access to our sort-of-exclusive Slack group for our most engaged developers.

Reschool — a learning course for getting started with Retool from scratch that includes basic SQL and JavaScript training.

Intercom — use the Intercom chat within the Retool platform to for live support

Email — send an email support@retool.com

Enterprise support — Retool customers on enterprise plans get access to a dedicated support representative.

Honorable mentions

Fluent React UI

GitHub Stars	Weekly NPM Downloads	Stack Overflow Questions	Origin
397	44k (May 2021)	1k	Microsoft

Fluent React UI is Microsoft’s design system adapted for React. It’s built on top of the Fluent UI design language, component specifications, and utilities. Fluent is the UI framework used in the latest versions of Microsoft applications like Powerpoint, Word, Outlook, etc.

Components — Microsoft uses the name “Controls” instead of components. Either way, Fluent React UI offers a wide range of controls/components that are built with the React framework.

Theming — Fluent React UI comes with a theme designer, component styling guide, and a theming deep dive guide.

Documentation and resources — Microsoft and Fluent contributors maintain a Fluent React UI wiki for advanced usage, building, and contributing to Fluent UI React. They also offer a frontend bootcamp learning course which includes exercises with Fluent UI React.

Onsen UI

GitHub Stars	Weekly NPM Downloads	Stack Overflow Questions	Origin
130 (React) 8.4k (original)	1.2k (May 2021)	1163	Monaca

Originally based on AngularJS with support for jQuery, Onsen UI offers an adapted framework for React. Onsen was developed by Monaca Software which specializes in mobile app development and is based out of Japan. Based on the mobile-first origin, the Onsen UI framework is well suited for building mobile apps.

Components — Onsen UI comes with more than 100 components designed for mobile experiences.

Theming — Onsen UI provides a Theme Roller to customize themes for mobile platforms and styling, which can be downloaded and applied.

Documentation and resources — Documentation for Onsen provides a getting started guide for React. Onsen UI also showcases several samples to demo and a “playground” to test your code and interactively learn the Onsen framework. There’s also a community forum to tap into help from others using Onsen.

Evergreen

GitHub Stars	Weekly NPM Downloads	Stack Overflow Questions	Origin
10.8k	7.2k (May 2021)	-	Segment

Evergreen is a React UI Framework developed by Segment. It centers around a design system that was created for building “ambitious products” on the web.

Components — Evergreen offers 30+ components built on top of a React UI Primitive. Evergreen also provides “patterns” which are common reusable combinations of components.

Theming — Evergreen ships with two themes: 1) A default theme that reflects Segment’s current brand, and 2) a classic theme from the first version of Evergreen. While there is no theme builder with Evergreen, it offers an extensible theming architecture to customize the look and feel of the components as needed.

Documentation and resources — In addition to documentation, Segment has created an Evergreen Figma library available on Figma Community.

Finding the perfect React checkbox component

kevbosaurus — Thu, 27 May 2021 04:59:02 +0000

Many websites and applications use checkboxes as a critical way to help users select more than one option—whether they’re filling out a form, adding their preferences, or searching for the perfect product.

If you’re using React, you have a lot of options when it comes to building checkboxes into your application.

You can build a React checkbox natively, but libraries like Bootstrap and Material-UI come with checkbox components that are easily implemented, and the excruciating pain of styling is already handled for the most part. In addition to these larger libraries, there are also several standalone components you can choose from.

With all the possible options, it might take a while to research, identify, and evaluate which checkbox component might work better for a particular solution. Rather than sink all the time and effort into doing this painful research yourself, we’ve compiled several common checkbox use cases and helpful suggests for the React checkbox components that best fit the use case.

Simple checkboxes

Best for: Straightforward form requests
Recommended Component: DIY

The native React checkbox component is a good choice when your application only has a few checkboxes and styling is not a priority. But once things get more complicated, you should definitely consider your options.

It can be challenging to style the native React checkbox component (i.e., vanilla JavaScript) due to how many scenarios need to be taken into account. Does it need a disabled state? Does it need an error state? A success state? Can multiple boxes be checked at once?

Not to mention, the native checkbox doesn’t respond well to CSS customization. This is such a problem that a common technique used to style native checkboxes is to hide them, replace them with labels, and style the labels.

Checkboxes can also have complicated presentation, error handling, and validation requirements. This could be a tree of checkboxes or requirements for one group of checkboxes be dependent on other values throughout the site.

You also need to think about whether your checkbox component will be handled through React or the DOM. When there are complicated requirements like this, you are on your own managing that complexity and handling the UI states in a native component solution.

Solving for these problems, especially if you need multiple checkboxes in an application, can result in having to write a massive amount of repetitive boilerplate code.

Folks use Bootstrap and similar libraries because it makes their lives easier, and one of the primary ways these libraries do this is by providing an integrated, uniform system of components.

If you’re using a library that includes a checkbox component, it’s a better choice than the native component because there will be less development lift in terms of styling and browser compatibility.

It varies per library, but library checkbox components can alleviate many disadvantages of the native component.

So, before choosing to use a standalone component, check your library’s documentation to make sure it doesn’t have the feature you’re looking for. In particular, library checkbox components are usually easier to style across browsers.

Trees of checkboxes

Best for: Multi-level configuration options
Recommended Component: react-checkbox-tree

Sometimes, a simple group of checkboxes will not suffice, and you need a multi-level tree of checkboxes. For example, you might need to have the user enable or disable a lot of configuration options.

You could definitely implement a tree of React checkboxes yourself, but using the react-checkbox-tree component does a lot of the heavy lifting for you.

One note, this component does require the use of the font-awesome library, which makes this solution the largest option (38.9kb minified for react-checkbox-tree and 30.2kb minified for font-awesome) and therefore the slowest to load.

Groups of checkboxes

Best for: Simulating relational checkbox options
Recommended Component: react-checkbox-group

Usually, several checkboxes are logically grouped into one multiple-choice question, and you have to write some boilerplate code to make individual checkboxes appear related.

For example, if you want the user to select fruits from one list and vegetables from another list, you have to present the checkboxes that way, validate the user’s selections, and then provide a way to obtain both results. The more of these checkbox groups you have, the more tedious it is to maintain the code and the longer it takes to download your application.

It is fairly arbitrary to determine when application code becomes difficult to read or the application is loading too slowly, but using the react-checkbox-group component (1.1kb minified) can help alleviate both of those problems.

Indeterminate checkboxes

Best for: Non-boolean options
Recommended Component: react-input-checkbox

A checkbox usually indicates a true or false situation, but sometimes, you want to allow no value to be selected at all for a checkbox; in other words, you need the checkbox to have a third indeterminate state.

This situation might arise in nested checkboxes, where if all children checkboxes are checked, so is the parent, but if they are not all checked, the parent will remain in the indeterminate state.

You also might want to force the user to explicitly choose a true or false option. If you’re using a framework, you should check to see if your framework’s checkbox already has an indeterminate status option. Otherwise, the react-input-checkbox component (2.8kb minified) allows you to have an indeterminate option.

Pretty checkboxes

Best for: Out of the ordinary, custom UIs
Recommended Component: pretty-checkbox-react

While the styling of a React checkbox is important, the main concern is usually providing a way for the user to select from multiple options. But if you’re especially concerned about the styling of your checkboxes or you’re looking for a checkbox-related feature not mentioned here, then pretty-checkbox-react (5.5kb minified) might just be the component you are looking for.

Some of the highlights for this component are radio buttons (single selections), display options (icons, scaling, sliders), property forwarding, and internationalization. You can also use hooks to abstract the presentation code from the logic code.

Choosing the right React checkbox depends on your needs

You can build a React checkbox natively or use any of the myriad libraries where components are available in order to address different use cases, styling options, and browser compatibility.

If you’re already using a JavaScript library, then your first move should be to check out what checkbox solution is already available to you. If it meets your needs, there’s no reason to weigh down your project with more packages.

If you aren’t already using a library or your library doesn’t have a checkbox component, then you should check if the native checkbox component is enough for your needs.

But if your use case requires many checkbox groups, trees of checkboxes, checkboxes with intermediate states, or significant styling, then using one of the standalone React checkbox components mentioned in this article is a good path to take.

Best library for checkbox trees: react-checkbox-tree
Best library for styling checkboxes: pretty-checkbox-react
Best library for checkbox groups: react-checkbox-group
Best all-around checkbox implementation: react-input-checkbox

Best PostgreSQL GUIs in 2021

kevbosaurus — Thu, 27 May 2021 04:27:46 +0000

If you’re a modern web developer, chances are you’ve interacted with PostgreSQL (“Postgres” for short). It’s the second most popular database among developers overall, and almost 70% say they love working with it.

PostgreSQL ships with a built-in CLI called psql, but nobody wants to write queries via the command line, even if you’re a veteran database administrator (DBA). This post will review the best PostgreSQL GUI tools available for querying, visualizing, and analyzing your Postgres data, as well as remotely accessing and navigating database servers.

1) pgAdmin

Overview

PgAdmin is one of the most popular GUIs available for Postgres users. Database objects are immediately easy to find on a left hand menu. PgAdmin is on it’s fourth major version and supports all of PostgreSQL’s features while also being open-source.

Strong Points

PgAdmin’s greatest strength is that anybody can use it, anywhere. You can configure it to run on any cloud server and then access it from all of the major operating systems; Windows, Linux, and MacOS.

PgAdmin runs as a web application, meaning it can be deployed on any server, including your computer. This is convenient if you’re running Postgres as a distributed database across multiple servers, as you can include PgAdmin on each. Admittedly, this is a feature more targeted at the Database Administrator (DBA) level than the Analyst or Engineer level, which involves more SQL than production database management.

Useful Shortcuts for your Editor

SQL Query Editors are where most Postgres users spend their time when manipulating data. PgAdmin’s SQL Editor provides an extensive list of useful shortcuts for quality of life improvements. They cover most of what you’d want to accomplish when writing queries that need maintenance friendly white space.

Drawbacks

The main drawback of PgAdmin is installation barriers, especially for SQL developers who aren’t experts at the command line. Running a Postgres GUI as a web application from your terminal is something that newcomers should not be expected to figure out from the ground up. Managing multiple servers, databases, and the usage that comes with them, is definitely a more advanced terminal skillset.

2) Navicat

Overview

Navicat is not as popular as PgAdmin but definitely comes with many of the features you would expect from software that makes talking to databases easier. Navicat is a paid tool and isn’t open-source, so it comes with many more features than the typical open-source tool. Unlike pgAdmin, for example, Navicat supports multiple SQL dialects, like MongoDB, MySQL, and PostgreSQL.

Strong Points

Installation of Navicat requires no more than three lines of terminal commands in Ubuntu. It is easy to get up and running and has multiple features which make it a great choice for team collaboration. You can easily improve team productivity for the SQL your team writes via Navicat’s job scheduler.

An add-on feature called Navicat Cloud also allows for Navicat SQL-specific team collaboration. This cloud friendliness extends to how easy it is to connect to data sources, like cloud databases, local flat files, or SSH tunneling and SSL.

Navicat also comes with a powerful data modeling tool, which lets you visualize database structures and design schemas.

Modern Aesthetic

The aesthetic of Navicat’s GUI is slicker and more modern than pgAdmin’s. One of the neat things about Navicat is that it gives the user a choice of dark or light theme from the start (for those dark mode die hards out there).

Drawbacks

The main drawback to Navicat is the price. Cost may not be as much of an issue for a business looking to maximize their database users’ efficiency, but it could be frustrating if you’re an individual looking for a simpler query tool. The Navicat trial is only available for 14 days, and you have to buy licenses to be able to work with PostgreSQL or MySQL.

Navicat for PostgreSQL pricing consists of three tiers: non-commercial ($119), standard ($199), and enterprise ($299).\

3) DBeaver

Overview

DBeaver is open source like PgAdmin. However, it supports different types of databases like Navicat. DBeaver also has an enterprise version which provides advanced plugins for productivity. You can run DBeaver on all of the common Operating Systems; Windows, Linux, and MacOS, and import and export data from a variety of file formats, including CSV, HTML, XML, JSON, XLS, and XLSX.

Strong Points

At least for beginners, the best thing about DBeaver (at least in how it compares to the other GUIs so far) is that it runs as a desktop application. Database objects are easy to find on the left-hand side menu, and connecting to my local Postgres database was intuitive. No CLI experience is necessary for you to start.

DBeaver, being open-source, has both free and paid options. An easy-to-sell concept: start with a deadline-less free DBeaver and transition into a paid tier as your organization’s needs scale.

Drawbacks

DBeaver’s main strength is also its main weakness: desktop applications only have as much power as your machine. To unlock the productivity levels you need in distributed development situations, you’ll have to turn to its enterprise option.

4) HeidiSQL

Overview

HeidiSQL is the only GUI on this list that was built exclusively for Windows. Just like DBeaver and Navicat, HeidiSQL can connect to different database drivers, like MySQL, Microsoft SQL Server, and PostgreSQL. HeidiSQL is free and open-source.

Strong Points

Like many Windows desktop applications, HeidiSQL is easy to download and install. If you’re siloed in Windows and your IT department is firm on that, HeidiSQL is a great option for connecting to a Postgres database.

I was able to connect to a database with only a handful of credential fields. The console prints out the commands that the GUI executes in real time — much like a log. This visibility into the back end makes it a useful tool for debugging and troubleshooting database problems.

Drawbacks

HeidiSQL is pretty lightweight, so it’s missing some of the power features that advanced users might need, like a debugger, and has no cross-platform support.

5) Datagrip

Overview

Datagrip is a cross-platform integrated development environment (IDE) from the folks over at JetBrains (makers of IntelliJ, PyCharm, etc.). That means, you can use it on Macs, Windows, and Linux. Unlike PgAdmin or Navicat, it is not a web application and can run as a local application like Spotify, VSCode, or RStudio.

Strong Points

DataGrip is intense, and it’s built from the ground up for power and customizability, ranging from dark themes to plugins for the many database systems and dialects available.

As an Ubuntu (Linux) OS user, installing dependencies requires two bash CLI commands. Installing DataGrip only requires one. A single terminal with an open log remains open when I launch DataGrip. This terminal prints out log information about the app as it's running. You can run it in the background, but I like DataGrip’s balance between command-line usage and desktop application.

Drawbacks

With a range of plugins and up-to-date development, it’s no surprise that DataGrip is a paid tool at $199 per year, per user, for the first year ($159.00 for the second year and $119.00 thereafter). Unlike pgAdmin or Navicat, DataGrip is not built to be an administrator web application that you can deploy on any cloud server. It’s made for querying.

DataGrip is more than enough for many small businesses because a desktop application can help them solve most of their urgent database problems on one or a few computers. That said, another solution may be better for deploying and managing many Postgres DBs.

6) OmniDB

Overview

OmniDB is open-source software that works on Mac, Windows, and Linux. It’s focused on lightweight, no-frills, Postgres database management.

Strong Points

Despite being open-source, OmniDB retains a lot of the SQL development features that a lot of the paid GUIs have, including features like SQL autocomplete, syntax highlighting, customizable charts for database metrics, and complete debugging tooling. Release notes show that OmniDB is most focused on Postgres.

Drawbacks

OmniDB is a lightweight tool, meaning it works great for one or a few SQL developers who need a free option for fundamental database work. It’s not, however, the best option for SQL developers who need a wide community of support, documentation, and at-scale deployment for their databases.

7) Beekeeper Studio

Overview

Beekeeper Studio is a cross-platform open-source database management desktop app that works on Mac, Linux, and Windows. It supports a broad set of databases, including PostgreSQL, MySQL, SQLite, SQL Server, CockroachDB, and Redshift.

Strong Points

Beekeeper Studio is focused on providing a smooth, fast, and easy-to-use interface, as opposed to a powerful, keyboard-shortcut-based nightmare. Typical tasks, like quickly updating a database table or running a SQL query, are super quick and simple.

Another benefit: the Beekeeper Studio team is committed to staying open-source and never adding any user tracking or user monitoring. This commitment to privacy is a unique promise among the apps we’ve reviewed here.

Drawbacks

Beekeeper Studio doesn’t have as many bells and whistles as DBeaver or DataGrip, so if you’re a DBA or need sophisticated performance monitoring and profiling tools, you’re better off with something like DataGrip or DBeaver.

8) TablePlus

Overview

TablePlus is a modern, native GUI tool for relational databases, such as MySQL, PostgreSQL, SQLite, and a few NoSQL databases like MongoDB. The TablePlus team is fairly active on GitHub — the only people behind the company being founder Henry Pham and Windows developer Raccoon Thai.

Strong Points

TablePlus is slick. It provides a customizable user interface (UI), meaning you don’t have to use Mojave at all. You can customize your configurations and their appearance as much as you like.

That slickness, however, doesn’t belie an unsophisticated tool. A standout among many TablePlus features is its database security functionalities. When you use TablePlus, the connection between you and your database is end-to-end encrypted. That encryption means no data is sent to a TablePlus server. Additionally, TablePlus comes with built-in SSH and ensures your database credentials are stored securely in your device’s keychain.

Drawbacks

Despite the slickness of its UI, some TablePlus users have pointed out how difficult it is to carve out a unified UX. An advantage to TablePlus is that it supports a wide range of databases, but a weakness of that approach is that the UX of all of them can suffer. Luckily, if you’re using it as a Postgres GUI, you’ll likely find the support you need. Users noted it suffered more when it came to things like Redis.

9) QueryPie

Overview

QueryPie is a cross-platform database IDE for Mac, Windows, and Linux. QueryPie promises to provide data access governance, from the cloud to on-premises to a variety of other platforms up to and including various SQL tools.

Strong Points

QueryPie stands out for a few different features, including:

Auto-complete, giving you the ability to write your queries faster.
Multi-query, multi-results, giving you an intuitive UI that makes query search and execution faster. You can also view multiple query results simultaneously.
In-line data edit, giving you the ability to edit query results and table structure directly and easily.

QueryPie also has some unique features when it comes to Snowflake, so if you’re interested in expanding beyond Postgres, QueryPie is worth considering.

Drawbacks

The QueryPie team announced its MVP in 2019, and updates have been sparse since. On their blog, a majority of recent posts date back to early 2020. Though the tool appears robust and useful, you may want to look elsewhere if you’re looking for a product that comes with more tutorials and up-to-date content.

10) SQLGate

Overview

SQLGate is an integrated tool for database management and development. It promises to simplify how you construct and operate databases. It works with Oracle, SQL Server, MySQL, MariaDB, Tibero, DB2, and, of course, PostgreSQL. Together, according to SQLGate, these databases make up 83.2% of the database management system (DBMS) market, meaning using SQLGate will allow you to manage most of the DBMS tools out there.

Strong Points

SQLGate has a few features that make it especially useful for database operators and analysts (though SQLGate also says it’s useful and accessible to developers, planners, and marketers, too).

Direct database connections, meaning you can connect without any complex Postgres client installations.
Big data processing, giving you the ability to quickly export query results (even massive amounts of them) to Excel.
Ultralight design, proven by the fact that the entire app and all of its functions are contained in less than 50MB.

Drawbacks

Pricing, like Navicat, is SQLGate’s main drawback. SQLGate is the most expensive tool on this list, coming in at $300 for an indie developer license and about $500 (you have to contact them for specifics, so it could be higher) for an enterprise license. With the amount of open-source and cheaper options on this list, you should take a close look at the unique benefits this Postgres GUI option provides — or else look elsewhere.

11) Retool

Overview

Retool is a web-based tool for building internal tools and applications on top of your data. It connects to all modern databases (Postgres, MySQL, MongoDB, and even Oracle) and any REST API, as well as third-party APIs like Stripe and Twilio.

Strong Points

Retool connects to pretty much anything, which is useful if you’ve got more than one data source to work with. You can access and work with your Postgres DBs and your MongoDB collections in the same GUI, all from your browser. Retool also puts a GUI wrapper over write operations so you can avoid accidentally writing DROP TABLE and getting yelled at.

Retool saves engineering time, too, as proven by our customer stories. Just look at Avo, which saved hundreds of hours of engineering time by implementing Retool.

If you’re building tools on top of your data, Retool saves you time by providing the reusable components you need: tables, buttons, text inputs, and even custom components. Retool is cloud-hosted, so the GUI is accessible from any major operating system and any major browser.

Drawbacks

Retool isn’t specifically focused on Postgres (like OmniDB), and is missing some advanced features like a query debugger.

Choosing between these PostgreSQL GUIs

Which is the best PostgreSQL GUI? The answer is: it depends. If you’re a single analyst looking to move into transparent and reproducible workflows with a single instance of a database, then DBeaver, Beekeeper Studio, DataGrip, or HeidiSQL are your best bets.

If you are part of a larger team, however, then paying for Navicat may be the best option because of Navicat’s team collaboration focus.

pgAdmin is the only PostgreSQL native GUI — plus, it’s totally free and scales easily across multiple servers. pgAdmin makes for a great choice for Postgres-focused DBAs. That said, a need for distributed servers usually only arises for skilled developers who can tackle this kind of configuration.

Retool shines when you’re working with multiple data sources. Modern developers rarely stay in one ecosystem like Postgres. As an organization grows, data workers have a growing list of stakeholders who need and want visibility for their metrics. Integrating multiple data sources with clicks and transforming with SQL is my preferred method of data manipulation because it minimizes developer time and maximizes domain-specific knowledge about your own data.

The best MongoDB GUIs in 2021 (Updated)

kevbosaurus — Sun, 23 May 2021 21:28:10 +0000

MongoDB is a NoSQL database that more than a quarter of developers use in some capacity. What makes MongoDB and other NoSQL DBs attractive is flexibility; instead of being held to a rigid schema that scales vertically, you can evolve your schema as you grow and scale horizontally. MongoDB went public in 2017 and is worth more than $17 billion today.

Document DBs work through nested key-value pairs instead of relational tables and columns. You’re going to need to parse data for your front-end eventually, and with document DBs, your data is already stored in the right format (give or take a .map or .reduce). Working with MongoDB through the command line isn’t exactly a cakewalk: This post will walk through the best MongoDB GUIs available for reading from and writing to your MongoDB clusters.

The Mongo Shell Versus a MongoDB GUI

The most basic way to access MongoDB is through the mongo shell; you can use it to query, update data, and complete admin tasks.

It’s included in the MongoDB Server installation, so you’re all set as long as you’re comfortable with shell commands. Traversing objects and writing long queries in the command line can get annoying fast, so using the shell is usually best for quick peeks or admin tasks.



> use sample_analytics
    switched to db sample_analytics
> db.transactions.find({})
   {
   "_id": "5ca4bbc7a2dd94ee581625eb",
   "account_id": 50948,
   "limit": 10000,
   "products": [
     "InvestmentStock",
     "Commodity",
     "Brokerage"
   ],
   "transaction_info": [
     {
       "_id": "5ca4bbc1a2dd94ee58161e14",
       "account_id": 50948,
       "transaction_count": 6,
       "bucket_start_date": "1991-05-08T00:00:00.000Z",
       "bucket_end_date": "2015-10-13T00:00:00.000Z",
       "transactions": [
         {
           "date": "2015-10-08T00:00:00.000Z",
           "amount": 2311,
           "transaction_code": "sell",
           "symbol": "nflx",
           "price": "104.9154457571513461289214319549500942230224609375",
           "total": "242459.5951447767609039374292"
         },
         {
           "date": "1995-12-15T00:00:00.000Z",
           "amount": 4828,
           "transaction_code": "buy",
           "symbol": "aapl",
           "price": "1.102632231847472166208490307326428592205047607421875",
           "total": "5323.508415359595618454591204"
         },
         ...
       ]
     }
   ]
 },

It’s definitely possible to query your Mongo data exclusively from the command line, but if you’re working with even medium-sized datasets, GUIs offer a helpful alternative.

MongoDB GUIs provide a user interface for your MongoDB database that gives you the ability to visualize data and edit queries without the use of shell commands (or with them — more on that later).

The best MongoDB GUIs share similar features:

A visual query editor: Click or drag-and-drop elements to create queries.
Query autocomplete: Auto-suggestions for collections, fields, methods, and operators.
An aggregation framework: Build queries out step-by-step, test along the way, then export into usable code.
Server and query analytics: Insights into query and server performance.
Relational database to MongoDB data transfer: Automate tedious and error-prone data transfers between database types.

Below is a list of the best MongoDB GUIs that 2021 has to offer. Each one has features that set it apart from the rest. The best one for you will depend on the scope of your project, the features you need, and your budget.

MongoDB Compass

(Image courtesy of MongoDB Compass GitHub Repository)

Overview

The creators of MongoDB (Mongo) have their own GUI called Compass. It’s platform-agnostic and provides a graphical view of your database without the need to use a query language. MongoDB recently announced that the fully featured Compass GUI is completely free for everyone to use. Plus, the repo is now open-source on GitHub.

Some notable MongoDB Compass features include:

Schema visualization: Compass visually displays your collections to help you better understand your datasets.
CRUD visual editor: Perform CRUD operations within the UI, no need to type queries.
Geospatial data: Create queries on map data using an intuitive UI with generated results in both graph and JSON document form.
Validation: Write JSON Schema validation rules using an editor that suggests BSON data types and validation keywords as you write

Winning feature: Compass Plugins

One of the best features of the MongoDB Compass GUI is that it has an API for adding plugins. The Compass community has built tons of cool plugins that can generate data for testing, inspect database users, and even check the shard status of the database. If there’s a feature you want but a plugin isn’t available yet, you can build your own using their plugin template.

TablePlus

(Image courtesy of TablePlus)

Overview

TablePlus is a modern, native GUI tool for relational databases like MySQL, PostgreSQL, SQLite, and NoSQL databases like MongoDB. The TablePlus team consists of founder Henry Pham and Windows developer Raccoon Thai. The team, as well as the community, is also fairly active on GitHub.

Some notable TablePlus features include:

Customizable UI: There’s no need to turn to Mojave. With TablePlus, you can customize your configurations and their appearance
In-line edits: Edit data rows and table structure with a single click

Winning feature: database security

TablePlus promises secure connections. The connection between you and your database is end-to-end encrypted –– no data is sent to a TablePlus server. Additionally, TablePlus ensures database credentials are stored securely in your device’s keychain and comes with built-in SSH. TablePlus also supports multi-step authentication and native libssh.

Robo 3T

(Photo courtesy of Robo 3T blog)

Overview

Robo 3T is an open-source, platform-agnostic, lightweight GUI for MongoDB. Formerly known as Robomongo, the company was bought in 2017 by 3T Software Labs and rebranded (Robo 3T also made it open source).

The project continues to be developed and has 8K stars on Github. In that vein, one of the best parts of using this GUI is the large community of users. Loads of tutorials, guides, and forums are available if you get stuck – just search.

Some notable Robo 3T features include:

Code autocomplete: While Robo 3T doesn’t have the autocompleting prowess of IntelliShell (see Studio 3T below), it does have a useful runtime autocomplete feature that works through an internal virtual machine.
Fast UI: All operations are done asynchronously, which means the application will never block you from working by freezing up.

Winning feature: embedded Mongodb shell

Many of the MongoDB GUIs have emulated mongo shells, but this GUI has an embedded mongo shell. The embedded shell provides increased functionality over an emulated shell because emulators generally run on top of a provided API, whereas an embedded shell works directly with MongoDB.

Studio 3T

(Photo courtesy of Studio 3T)

Overview

Studio 3T, formerly MongoChef, is the robust, professional version of Robo 3T owned by the same parent company, 3T Software Labs. Studio 3T is more than just a MongoDB GUI: it’s also an IDE and client. There is no free version of this software (unless you count Robo 3T), and the Core pricing level starts at $149/year per user. Even then, the Core level lacks features that pricier ones have, like SQL import/export, SQL queries, and the schema explorer.

Some notable Studio 3T features include:

IntelliShell: A smart, built-in mongo shell with autocomplete that supports Javascript standard library functions, collection and field names, operators, and methods.
Three ways to view data: Once you have retrieved your data from the database, you can view it in three different formats:
- Table View formats the data into rows and columns.
- Tree View formats the data into expandable hierarchies.
- JSON View formats your data as JSON documents.
Code generation: Export queries into Node.js, Python, Java, C#, PHP, Ruby, or the mongo shell language.
Data import: Support for data imports from SQL databases, Oracle, and Sybase.

Winning feature: four ways to query MongoDB and view data

Out of all MongoDB GUIs, Studio 3T provides the most ways to query your database. You can query using:

SQL queries: Query MongoDB using the SQL query language (super cool!)
The mongo shell: Built-in IntelliShell technology that provides robust autocomplete features
The Aggregation Editor: For building up complicated queries
The Visual Query Builder: A drag-and-drop editor for building out queries (fun fact: can be used side-by-side with IntelliShell)

Given this volume of query methods (including less “technical” ones), Studio 3T is usable for anyone, no matter their familiarity with document-based databases, query languages, or command lines.

NoSQLBooster

Overview

NoSQLBooster is a shell-centric GUI with a broad range of features that come with a paid license. The free tier is missing many of the features that make this GUI so great, like code completion and the visual query builder. NoSQLBooster does not work through a subscription model, so once you pay for a license, it’s yours forever (or until you want to update your version).

Some notable NoSQLBooster features include:

IntelliSense: Similar to Studio 3T’s IntelliShell, this language service appears as a tooltip while you type to suggest completions, methods, properties, variables, keywords, collection names, field names, and operators.
Interactive samples: In-app tutorials with prewritten queries and descriptions for learning how to use MongoDB.

A notable part of IntelliSense is the built-in snippets that offer code completion for operations like SQL to MongoDB data conversions and date ranges. You can also create your own snippets to save time.

Winning feature: NPM packages in the MongoDB shell script

The best feature of NoSQLBooster is the unique ability to add any NPM package into the MongoDB shell script. In fact, this GUI already comes with a number of useful and popular utility modules — like lodash, moment, bluebird, ShellJS, and math.js — in the global scope, ready to use.

HumongouS.io

(Image courtesy of HumongouS.io)

Overview

HumongouS.io is a fully online MongoDB GUI. Since it’s online, HumongouS.io allows users to collaborate pretty seamlessly. Instead of using it as just a GUI, you can set it up as a more fully-featured internal admin tool. You then don’t need to share database credentials but can instead invite people to collaborate with you from the app. You can even access your data on a mobile device.

Some notable features include:

Smart filters: Create filters that you can use to display your collections as chips, which enables quick access
Charts and dashboards: Easily create charts and dashboards to track the metrics that are important to you

Winning feature: widgets for customization

With HumongouS.io widgets, you can customize how your data displays and use those widgets to pull data from specific reference collections as needed. There are viewer, form, and layout widgets. Viewer widgets let you represent data in more meaningful ways than default string values.

Form widgets are, according to HumongouS.io’s documentation, “the building blocks of forms.” They’re also customizable, meaning you can match them to any data type in your database.

Layout widgets give you an alternative to the default table view, allowing you to display specialized data.

NoSQL Manager

(Image courtesy of NoSQL Manager)

Overview

NoSQL Manager is a shell-based MongoDB GUI tool. NoSQL Manager makes it easy to navigate, view, and edit documents, as well as set limits to maximize performance. You can manage, as the name implies, a lot of things, including collections and their indices as well as users, roles, and functions. It offers support for MongoDB Enterprise, MongoDB on Azure Cosmos DB, and Amazon DocumentDB.

Some notable features include:

Wide support: NoSQL Manager supports replica sets, sharded clusters connections, and standalone hosts
Document viewer: The NoSQL Manager document viewer and editor offer Tree, Table, and JSON view modes
SSH tunneling: NoSQL Manager offers SSH tunneling for MongoDB connections
Imports: Import tables from your MySQL and SQL Server databases

Winning feature: autocompletion

NoSQL Manager comes with a MongoDB UI Shell that offers code autocompletion, syntax highlighting, and hints. Autocompletion takes much of the guesswork out of MongoDB management, helping you by autocompleting things like the collection names and methods in MongoDB Shell commands. As you type into the Shell, NoSQL Manager uses context clues to provide collection or method completion.

Bonus: Retool

Overview

Retool is a internal tools platform where you can build any GUI for MongoDB (see template). Retool makes it possible to drag-and-drop visual components to avoid boilerplate code and connect to anything with a REST or GraphQL API, meaning you can build a full-featured MongoDB GUI—and include any CRUD operations—in just a few hours.

Some notable Retool features include:

Speed: Connecting Retool to MongoDB takes just a few minutes
Schema inspection: Visually view your data.
Save and share queries: Keep your queries handy for multiple uses.
Turn your queries into useful tools: go from query to table, search, and button without writing frontend code.

Winning feature: Customizable front end for visualizing data

You can use Retool’s pre-built components—including tables, buttons, text inputs, and search bars—to not only view your data but do any CRUD operations you need to keep your business going. Once you connect your data sources, you design your frontend with their drag-and-drop component tool.

The Best MongoDB GUI for Your Project

As with any tool, the best MongoDB GUI for you depends on what you’re trying to accomplish.

If you want to completely avoid the command line, MongoDB’s Compass is probably the most fully featured and natively integrated GUI out there. If you want a simple application that has a well-supported community, Robo 3T is the best GUI. If you’re familiar with SQL and want to keep writing queries in everyone’s favorite query language™, NoSQLBooster is going to feel slick. If you’re looking to easily share queries or turn your queries into tools, check out Retool.