React Visual Editors in 2020

An overview of top React visual editors and a look at the future of visual editing.

Shanika Wickramasinghe
Bits and Pieces

--

Image by Esi Grünhagen from Pixabay

React is already known as a sort-of “universal language” thanks to react-dom and react-native but recently we’ve seen an explosion of frameworks and tools that make it possible to build with React for every device and platform.

React is more than a JavaScript library. It is a philosophy and methodology. Building with React means adhering to that sort-of-thinking even when building for things other than the web.

To top that, there are now tools and services that allow you to create React apps with almost no coding. This is done with a GUI that allows you to drag and drop components to create apps. These tools provide the basic workflow and allow users to build on top of it to create interesting apps.

We’ll be looking at the top visual editors that can be used to create React mobile applications in this article. Before we get into the list, let’s look at this concept a little more and how it will affect us in the near future.

Low-Code App Development

Low-code app development is a concept that has been gaining a lot of traction during the last few years. A non-developer can now create a mobile app without any knowledge of programming languages.

65% of all app development will be low-code by 2024.

Research has shown that this flavor of app development is on the rise and that it isn’t going away anytime soon. Gartner reports that more than 65% of all app development will be low-code by 2024. It further states that almost two-thirds of more prominent companies could be expected to use up to four visual editor platforms for their mobile apps.

A study by Forrester expects the low-code app development market to increase from a mere $3.8 billion (2017) to $21.2 billion by 2022. This five-fold growth rate is expected to cause many Mergers and Acquisitions (M&A) that can form more robust platforms. Forrester’s findings include some of the industry’s biggest names, such as Microsoft, ServiceNow, and Salesforce.

2020 has already seen many such M&A events, such as Google’s acquisition of the popular no-code app development platform AppSheet in January 2020 and the merger between “appypie” and “appmkr” in April 2020. Appypie is on our list, and we’ll be talking about it more later in this article.

Building Components VS Composing Apps

As of now, it seems like each React visual editor runs as an isolated platform but all that might change, drastically.

In the near future, we may see React visual editors serve as the glue that holds independently built (and published) React components and BaaS services.

Tools and services like Bit make it much easier to isolate, publish, and manage independent React components. Bit’s component hub has already more than 36,000 open-source components available. So, why use a limited set of components in your visual editor instead of having access to, essentially, all publicly available components?

That means we may see frontend developers focus relatively more on building independent components and less on complete apps. Some of them may prefer to build their components (with code) and compose them together into a single app, using a visual editor. Others may want to stick only to coding and build for non-developer app composers who are in need of custom UIs or functionalities.

Example: exploring published React components on Bit.dev

Benefits of No-Code App Development

In addition to the most prominent benefit of allowing almost anyone to create a mobile app irrespective of their degree of coding knowledge, no-code app development offers a few other benefits. The speed of development is at the top of the list. These platforms take care of most of the nitty-gritty details and allow you to develop your apps quickly.

The next most important benefit is that most of these platforms don’t require you to have a development environment or your own servers. All your app configurations and data will be stored on the cloud. It will also reduce the cost of overheads along with the need for a comprehensive IT team.

These platforms will also take care of many other app development related tasks like upgrades, integrating with app stores, and adhering to certifications and regulations. In addition, they will also provide expert advice regarding how apps can be built and enhanced to increase revenue and other KPIs.

Challenges to No-Code App Development

Despite the popularity of no-code platforms and the traction they have gained in the recent past, they are not without any challenges.

Security is the main challenge or disadvantage of these platforms. The fact that you may not know where your apps and data are stored and, as such, don’t have any control over them can lead to many complexities. Even legal restrictions may apply in certain industries.

No-code platforms will be able to satisfy the requirements of the majority of businesses, at least at the start. As your business grows and its needs outgrow the platform, you will not be able to customize your apps to your liking. The vendor may also trap you with high prices for such customizations.

If you face the above situation or need to leave the platform for any other reason, you will experience vendor lock-in, which is the inability to move to another service provider due to vendor code and technology as well as high pricing.

My Recommended React Visual Editors in 2020

appypie appmakr

We already spoke about the appypie appmakr merger. The result is a versatile visual editor for React mobile apps trusted by over 7 million businesses globally. You will be able to create apps for iOS and Android as well as quickly convert your existing website into a mobile app that provides a native user interface. These apps will provide offline capabilities also.

In addition, appypie appmakr will be able to provide you with many native features like Push notifications, Navigation, Social media integrations, Analytics, and multi-language capabilities. Two other features that can be very important to businesses are Loyalty programs and Coupons.

You can rest assured about the security of your data on appypie appmakr because it is compliant with GDPR and hosts apps on AWS, which complies with HIPAA, PCI, and SOC. It also takes care of publishing your apps to both the Android Play Store and Apple App Store.

Pricing: Starting at $18/app/month (Support for iOS is only available with the Platinum plan — $60/app/month)

AppGyver

AppGyver is a top visual editor for React apps. It provides native performance, hundreds of logic functions, over 500 components, a powerful theme engine, and the ability to integrate to APIs within minutes.

With support for a range of device sizes on both Android and iOS, AppGyver provides one of the most intuitive drag-and-drop editors that allow you to create not only layouts but also logic visually. It also provides debugging, deployment pipelines, an animation engine, multi-language support, custom fonts, and optimized bundle size. It’s a fully-fledged development environment, but for non-developers.

AppGyver boasts of the security that it assures its users with four excellent case studies. They are DHL’s Europe-wide trailer fleet management and reporting app, FINGRID: Finland’s national high-voltage power grid, VOIMA Gold exchange, and the Verge ERP for a global electric motorcycle manufacturer.

Pricing: Free (Charges for customizations and special projects)

Draftbit

Draftbit is another innovative visual editor for React Native apps. It is powered by the popular React native ecosystem Expo and is fully open source, offering a benefit few other services offer: zero vendor lock-in. Your code is completely React Native based and allows you to migrate at any time.

You get started with a template that suits you, and then customize it to match your requirements. Draftbit allows multi-disciplinary teams to collaborate on a common platform. Once you have completed your app, you are provided with many options such as publishing it on the Android Play Store and Apple App Store, creating a PWA and simply exporting your code or Expo source.

In addition to being a fully drag-and-drop based visual editor, Draftbit allows you to add custom code into any component or screen to add advanced behavior. It also allows you to define your theme and apply it across your entire app. Complex Navigation with tabs and stacks of screens, API integrations, and enterprise distribution are some of the many advanced capabilities of Draftbit.

Pricing: Free (Beta access)

SaaS React App Builder

The SaaS React App Builder (RAB) is another excellent option to build your React app without any coding. It is a SaaS solution and allows you to build native apps with React. Unlike many other services, RAB allows you to self-host your app, giving you full control over it.

It also allows you to host on RAB’s cloud platforms, Firebase, or Netlify. On cloud-hosted plans, RAB teams will help you build your app and provide landing page and preview app plugins (charged separately) until your app is ready.

RAB offers a variety of templates that contain many components you may require for your business. Women in Industry MK, Macedonian Energy Forum, and ReChat are some of the popular apps that use RAB.

Pricing: Self-hosted — $140/one-time, Cloud-hosted — $49/month

React Studio

React Studio is a comprehensive platform for creating responsive apps for both Android and iOS. Its main USP is that it allows you to create components both visually and with code. This benefit allows you to make the best of a visual editor and external components.

Responsive Progressing Web Apps (PWA) are the current norm, and React Studio provides you with just that and facilitates Design, Development, and Testing through a single platform. React Studio calls its design process “Prototyping in Code” as it allows users to create their designs and prototypes while letting their apps interact with real-world data.

React Studio also allows developers to create components with clean React scaffolding and nothing more. React Studio allows testers to be involved right from the start. This is possible because, unlike in a typical app, React Studio lets you connect to endpoints and data sources right from the prototype stage. You can also connect to Firebase as your back-end. React Studio’s main downside is that it is only available for macOS.

Pricing: Free

Conclusion

Given the demand for no-code apps in recent times, it is no surprise that there are so many visual editors popping up. What is important to remember is that each of these visual editors has a set of unique features that are important in various situations.

It is especially important to consider whether there is compatibility for the platforms you require, support for the operating system you use, the features and integrations that you require, and essentially the flexibility to move out of the platform.

Learn More

--

--

Senior Software Engineer and Freelance Technical Writer. I write about any Computer Science related topic. https://www.linkedin.com/in/shanikawickramasinghe