Thunkable’s Powerful Drag and Drop App Builder

Every app developer’s journey is ongoing and their app is never truly “done.” The same goes for Thunkable, and we have recently made some significant quality of life improvements to aid creators in their no code app creation process. Thunkable’s drag and drop capabilities are a great way to create beautiful apps without learning to code. With Thunkable, you can easily add buttons, images, text, and more. You can also elevate your app by adding powerful components such as translation capabilities, and sensors! Thunkable's extensive components library means you can find the perfect element for your no code mobile app development needs.

Before we dive into all the things you can build with drag and drop (DnD) let's define what Thunkable components and blocks are:

Components

Components are the visual building blocks of your Thunkable app. They can help your no code mobile app user interface (UI) look a certain way or have functionality. The variety of components can be viewed in the Design tab.

Blocks

Blocks are the building blocks of your app; you use them to program the actions taken in your no code mobile app development efforts. Every component has blocks to start or trigger an event or change properties. You can find the logic to build your app in the Blocks tab.

Some might remember our earlier Snap to Place (StP) abilities, but we recommend using our latest Drag and Drop user interface. Read on to learn the difference between StP and DnD and how you can get started.

Snap to Place vs. Drag and Drop

Snap to Place (StP) was our first foray into cross-platform app development. We used a familiar grid of rows and columns for positioning UI components. This design paradigm was reliable but new Thunkable creators found it confusing and experienced creators were frustrated with taking unnecessary steps to achieve their desired results. Other challenges faced by StP were the inability to layer components on the 2D grid as well as attempting to achieve precise alignment for design purposes was time consuming and error prone. From a user experience (UX) perspective, the other major difference is that StP made use of “invisible” UI components. These are elements such as the camera or translator that have no visible elements on the screen. New creators were confronted with more options than they needed to be and seasoned creators were forced to do a lot more scrolling than was necessary.

To address the core needs of the community, Thunkable worked to create a user-friendly and easy to navigate drag and drop app builder platform with more capabilities. With DnD you can position UI components anywhere on your screen. Below we show the difference between DnD and StP.

With the drag and drop UI, in the Design tab you can find all your components, screens, and design elements to drag and drop components to build your no code app. In the Blocks tab, you can find all the “invisible” user interface components that can be combined to create the functional aspects of your no code app. Take a look at our handy resource to guide you through the best no code app builder by clicking here.

So, what makes DnD better and why should you use Thunkable's drag and drop app builder? We will walk you through the top eight abilities you can harness to build your no code mobile app.

1. Position Components Anywhere

Not surprisingly, as the drag and drop name implies, you can easily drag components onto your screen exactly where you want them. If you want a button in the bottom right hand corner of your screen then all you need to do is drag and drop it there - no more fiddling with rows and padding to position an element on screen. But that’s not all. Thunkable makes designing your app more straightforward with our smart guides so you can align components where you need them. Aligning components is easy with our intuitive guidelines, just like you’d find in Figma or Photoshop, and similarly you can raise or lower components to layer them on top of one another. Want more precise abilities down to the pixel? Thunkable allows you to set the exact location of any component like an image, label, and more using the X and Y coordinates. You can even create scrollable screens by positioning elements below the fold.

2. View Multiple Screens At Once

Unlike other no code app builders, Thunkable allows you to view all your screens at once, to aid in your design and to create consistency across all your screens. In addition, Thunkable allows you to rearrange screens, view them all at once, zoom in to certain areas of your screen, and pan through each screen so you can better layout the user journey.

3. Snap Pictures Instantly

We’ve moved all the invisible user interface components to the Blocks section to make the platform easier to navigate. Take the Camera component, for example. What used to involve adding an invisible component, an event block, and a variable block has been reduced to just a single function block. It can’t get any simpler than that!

4. Easily Orient for Phone or Tablet

Thunkable makes it easy to select from four different layouts to build your app for phones or tablets. With Thunkable you are not limited to one device. Instead we give you the ability to publish to iOS or Android for both phones and tablets. 

5. Import Your Designs from Figma

Prototyping designs have been made faster with the ability to import your designs from Figma into the Thunkable platform. For a great guide on designing your mobile app check out our blog or watch our webinar to gain expert insight and a step-by-step guide on the best scope for your app’s framework, design, and functionality before adding your first block.

6. Monetize Your App

Thunkable gives creators the ability to monetize their app in two ways. With DnD, you can sell digital products or subscriptions with our in-app payments component. For example, the creator of Amazing Aurora easily implemented  in-app purchases on hisThunkable app to create a subscription-based model; click here to read his story. You can also generate revenue in your app by connecting your users to advertisers. Thunkable’s AdMob component gives you access to banner, interstitial, and rewarded video ads. To learn more about monetizing your app on the platform, check out our docs here.

7. Tap into AI Capabilities

Image Recognition Block

Translation Block

Level up your app using image recognition, utilizing speech identification, tapping into sensors, or translating text in one block. To understand the full spectrum of what you can do with Thunkable’s block features, go to our docs. The possibilities of what you can do are limitless with Thunkable’s drag and drop app builder!

8. Utilize Cloud Storage

Thunkable possesses a wide variety of components to suit your needs if you want to store data in the cloud. We make this easy since no lengthy setup is required and it works for testing right out of the box! We also provide various integrations with database apps such as Airtable, Firebase, Webflow, and more.

Getting Started with Thunkable

Now that you know what DnD can do for you, get started building your no code app by reading our 5 Steps for Planning Your Mobile App Project guide.

Thunkable's drag and drop app builder is easy to use and offers a range of powerful features for mobile app creators. With Thunkable, you can easily add, move, and resize components on your screen with a simple click and drag. Plus, Thunkable's extensive library of components means you can always find the perfect component for your needs.

So, why not try Thunkable today and see how easy and fun it is to create a mobile app?