You are using an unsupported browser. Please update your browser to the latest version on or before July 31, 2020.
close
Home > Getting Started > Getting Started with Glitch: Part 1 - The Project Editor
Getting Started with Glitch: Part 1 - The Project Editor
print icon

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 Project Options menu and App Status bar.

  • Part 3 will go over the editor’s Tools menu and Share options.

 

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:

  1. The file view is on the left

  2. The editing pane is in the middle

  3. 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.

  • Click the New File button to create a project file.

  • 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 Markdown button at the top of the editing pane to toggle between the code and the formatted content.

  • Use the Format This File button to clean up and align the existing code.  

 

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 x in the top-right corner of the pane to close it.

  • If you want to temporarily hide the preview click the little right-arrow button.  Click it again and the preview pane will reappear.

  • By default, the project preview displays the index.html.  If you want to see a different page, click the Change URL button and then type the name of the page that you want to see.

  • 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.

Got more questions? Check out our Community Forum!
Open 24/7, the forum is where Glitch makers help each other and show off all the rad apps that they have created. It's the friendliest community of coders on the Web!
Feedback
0 out of 0 found this helpful

scroll to top icon