Welcome to Glitch! We are excited that you are here!
Glitch is the friendly, online platform where anyone can build a web app directly in their browser.
This includes:
-
The Glitch In Bio template that you can use to create a list of your favorite links and customize them for free
-
Simple websites that use html and css
-
Static sites generated by React and Eleventy
-
Full-stack web applications
On Glitch, apps are built using our playfully powerful project editor. This Getting Started with Glitch guide will introduce you to the project editor and its features. So we don’t break your brain, we have divided the guide into three bite-sized sections:
-
Part 1 covers the project editor basics.
-
Part 2 will introduce you to the editor’s Settings menu and App Status bar.
-
Part 3 will show you some more handy tools that are available in the project editor along with the Share menu.
Before we begin, it’s important to note that Glitch is free to use with certain limitations. You can read about these limitations in our Technical Restrictions help article. If you are looking to do more with Glitch, we also offer a paid subscription to Glitch Pro.
Are you ready to get started? Then keep reading to learn about the Glitch project editor.
The Project Editor
The project editor is the interface that you will use to work on your Glitch apps.
This is what it looks like:
Opening the Project Editor
The project editor will automatically open when you do any of the following:
-
Click the New Project button and then select one of the starter templates.
-
Click on a project that has been saved to your dashboard.
-
Click the Remix button to make a copy of an existing project.
-
Click the View Source button to see a project’s code.
-
Enter a project URL into your web browser using the following format: https://glitch.com/edit/#!/project-name-here
Project Editor Panes
When the project editor opens, you will see the following three panes:
-
The file view is on the left
-
The editing pane is in the middle
-
The project preview is on the right
The File View
The file view shows you the files within the project that you can edit directly in the project editor.
-
Click on an existing file and the code will appear in the editing pane.
-
To create a new project file, click the + at the top of the file list.
-
To delete, rename or duplicate an existing file, hover your cursor over the filename and then click the three vertical dots next to it.
-
Click on Assets to save project media files such as images, music and video.
-
Click on .env to save any private information like tokens and API keys that are required to run your project.
The Editing Pane
The editing pane is where you will type in the project code.
-
If a file uses Markdown, then you can click the EDIT MARKDOWN button at the top of the editing pane to toggle between the code and the formatted content.
-
Use the PRETTIER button to clean up and align the existing code. This button will appear on files where Prettier formatting is available.
-
Use the + ADD PACKAGE button that appears on
package.json
files to install or update NPM modules.
The Project Preview
The project preview shows you what the front end of the app looks like.
-
If you don’t want to see the preview, click the three vertical dots in the top-right corner of the pane and select Close Preview.
-
By default, the project preview displays the
index.html
. If you want to see a different page, type the name of the page that you want to see in the /URL box at the top of the project preview pane. -
Projects on Glitch are not required to have a front end. If you are working on an app that does not have an
index.html
, the project preview will show a loading screen. That’s okay, the app should still run. You can close out the preview if you find it distracting.
In the next section of this Getting Started with Glitch Guide, we'll take a look at the Project Options Menu & App Status Bar. Click here to continue.