When you log into Glide, you'll arrive at your Dashboard.
The Glide dashboard
On the left-hand side, you'll see your projects, templates, usage data, billing, and team management. You'll also see any teams you belong to, and have the ability to create new teams if needed.
Click on New Project to create a new app or click on an app to start editing it.
The Layout Editor
Glide's user interface can be broken into three areas:
- The Data Editor
- The Layout Editor
- The Action Editor
You can navigate to these different sections using the top navigation bar, which remains consistent on all screens.
The Data Editor
The Data Editor has four distinct areas.
- The tables area on the left shows each of your individual tables. If you've synced data from Google, Airtable, Excel, or a file, you'll see all of your imported data here. You can add more tables directly in the data editor, or hit the + symbol to sync more data from another source.
- The sources area on the bottom left is where you see your Data Sources. You can click here to sync or visit your data source.
- The main area is the actual data grid itself. Here you can scroll, interact, and edit the data you see.
- The Data Editor has its own top bar – which shows the Preview As dropdown, the name of the current table, the Find Column search box, and the Add Column button.
Different areas of the Layout Editor
The Layout area of Glide can be broken into 5 core areas and is where you do the bulk of your design work.
- Device preview
- Configuration panel
Layout Editor: Tabs
Tabs is where you manage the tabs in your app. You can add, delete, duplicate, rearrange, and drag them into the App Menu.
Layout Editor: Screen
The Screen section is where you manage the Components on that screen. Click on a Component to edit it and click the plus (+) icon to add a new Component. You can also re-order and delete Components here.
When you see a dropdown arrow in Glide, very often, you can collapse that area to make the interface cleaner, or to give yourself more room. 👇
Collapsing the different panels of the Layout Editor
Layout Editor: Data Tab
The Layout area of Glide has its own mini Data Editor, which we call the Data Tab. Instead of showing you all your app's data, the Data Tab just shows you the data for the current screen (if no component is selected) or the currently selected component.
The Data Tab
The Data Tab is a great tool to have open as you navigate your app and want to
- Understand the current screen's data
- Quickly edit that data or add new columns
The Data Tab
Layout Editor: Device preview
The device preview area contains a number of features that let you interact with your app – both as a user and as an app developer.
- The device itself
- The dropdown within the Layout icon allows you to change the device width & OS.
- The preview as dropdown
Layout Editor: Configuration panel
The configuration panel
The area on the right of the Layout Editor is all to do with configuration, and it changes depending on your editing context.
Knowing what context you are in is important. To help you understand this, there is a breadcrumb menu at the top. In the image below, see how the breadcrumb menu (top right) changes to show you where you currently are in your editing context.
Moving between contexts changes the breadcrumb menu
Within the configuration panel, many different things will appear, depending on your context. You will usually see 2 or 3 different tabs within the panel. These typically follow the pattern of General, Options, and Actions.
Next is the Action Editor. This is the third of the three main panels in Glide.
Some components display data, some receive data, and others can trigger actions and connect with third-party services like Slack, Microsoft Outlook, Zapier and more.
If you just want to trigger a single action, this can be achieved simply in the configuration panel of a component. But if you want to create more complex, multi-step actions and manage all of the actions within your project, you can do this in the Action Editor.
To learn more about Actions in Glide, check out our guide here.
The Action Editor