Learn to Code via Tutorials on Repl.it!

← Back to all posts
An introduction to the repl.it editor
h
TheDrone7 (1031)

Introduction to the repl.it editor

The repl.it editor is a great tool for writing code but it can be quite difficult to use if you're a self-learner and are directly getting started by using repl.it instead of a setting up a local environment on your PC. In this tutorial, I'm just going to show you what the various sections of the editor do and how you can use them to get best of repl.it. Also, for the sake of examples, we're using the most used language on repl.it for this tutorial (aka Python3).


Names of the various parts

(This is just made up by me for this tutorial, not sure if it's the right names)

  1. The top bar - shows what tab is opened in (3) and shows more options for the opened tab. In the shown screenshot, the Files tab is open and the top bar has options to do the following: -

    • Create a new file
    • Create a new folder
    • Upload files/folder from PC
    • Download the contents of the repl as a zip file.
  2. The tab contents - allows you to use the tab's features. In the currently opened Files tab, it shows a list of all the files and folders in the repl and allows you to choose which file to open in (4).

  3. The tabs - You can switch between the multiple tabs from here. The various tabs and their usage is given below: -

    • Files : Allows you to manage the project files, create/delete new/existing files/folders.

    • Version Control : Allows you to connect your repl to a GitHub repository. You can pull changes from GitHub to your repl or push changes from repl to GitHub.

    • Packages : Allows you to manage which external libraries/packages you want to use in your project. For example, in many python documentations, you may encounter terms such as

      Open up your command prompt and run the following command

      pip install flask

 [repl.it](https://repl.it) makes it easier for you to handle this by just searching for `flask` in the package manager and adding from there by clicking a little "plus" icon.
  • Debugger : A set of professional debugging tools.
  • Settings : Allows you to modify the editor to suit your own coding style such as using a light or dark theme or enabling/disabling code-intelligence.
  1. The editor - This is the main place where you write your code which will be run, a regular text-editor.

  2. The language shell - When you run your code, the console output is displayed here. You can also run single line code snippets here. For example, in some python documentations, you may encounter code samples such as given below: -

    >>> print("Hello World")

    or

    >>> 3 ** 4

    These are just single line code snippets that can be executed directly to test stuff or calculate some results. These can also be run in the language shell.

    Python's official documentation clearly states, python shell can be used as a replacement for calculators and that's what the shell is there for so put it to good use.

You may also encounter sometimes tutorials saying something like: -

Open up the shell and execute the following command: -

py main.py

OR

pip install flask

These shells refer to terminals and are not to be executed in the language shell and will most probably result in errors.

  1. In case you have made a website using repl.it you will also see a 6th division, which would contain a preview for the website.

The package manager

repl.it uses the Universal Package Manager which detects the language and tries to install the required dependencies automatically but sometimes it can't and you need to install them manually. You can tell the package manager to install them in 2 ways: -

  1. Specifying the dependency in the respective packages list. For example: - you can add dependencies to the pyproject.toml in python or package.json in node js.

  2. Using the packages tab in the editor.

    By default it shows the installed packages as shown in the image. You can search for new packages to add in the search bar. And clicking the little "plus" icon beside the package name.

    And the package will be installed in your repl and automatically added to the corresponding packages list.


This is all you would normally need to get started with repl.it's editor. If you think something is missing and should be added, be sure to let me know via comments and thanks for reading it!


Commentshotnewtop
Zavexeon (1036)

Listing some shortcuts for the editor would be pretty neat.

TheDrone7 (1031)

@Zavexeon repl.it supports 3 different key binds so I couldn't list a few and expect them to work for everyone.

Zavexeon (1036)

@TheDrone7 Hmm... I thought there were more than that, but what do I know? I never use them, lol.

omerocaks (0)

How I can write several different codes in the same page for learning purpose? Let's say If I want to write 4 different 5 lines codes quickly to display, how can I do it? that is the very basic functionality of jupiter but could not find here.

TheDrone7 (1031)

You can use the language shell. @omerocaks

JosLuisLuis20 (0)

Hi, I don't understand how to use the files and folders. I created folders, created files in them, and named them. So far so good. Then I wrote a couple of lines of code in one of them, using Python. But when I hit the RUN button, nothing happens. On the contrary, when I write code directly without creating any file or folder, the RUN button executes the code I've written. Would you please clarify how to use the files and folders for me? Thanks a lot.

TheDrone7 (1031)

Repl.it by default, runs the main.py file only. (Talking about a python repl) @JosLuisLuis20. But in most cases, when making an actual program (not for learning purposes), they're usually too big for one file, so you break down your programs into multiple files and folders for organizing it all properly.

You can change the default file that is run using the .replit file nbut I wouldn't recommend doing that as in most cases, you won't need to.

JosLuisLuis20 (0)

Thanks a lot for your answer @TheDrone7 . All the best to you

largeDachshund (0)

Not a great tutorial, because your editor has a debugger, whilst the rest of us are missing it. Please add the configuration to make this debugger function appear. Greatly appreciated, thanks,

TheDrone7 (1031)

I believe it's a explorer feature. Go to your account page and under the "explorer" section you should be able to check the "explorer" option to become an explorer and get access to beta features. Although, this may break some stuff as beta means more bugs. @largeDachshund

largeDachshund (0)

@TheDrone7 Thanks for the assistance. Unfortunately, I've come to understand the actual issue. Debugger is functional for python programming. It's not functional for pygame.

TheDrone7 (1031)

Yeah it's limited to some specific languages. @largeDachshundd

Davidlegacy (0)

thanks this was great

Franky1 (3)

Is it possible to have a .env file or similar with e.g. credentials, that cannot be seen by others? Or to set ENV variables in my account that are private?

TheDrone7 (1031)

You can simply have a .env file @Franky1 and store keys in it in the following format

key1=value1
key2=value2

Repl.it will automatically read it and create environment variables from it. And it's also hidden from others visiting your repl so they can view your code while but they won't be able to see any hidden keys you keep in the .env file.

Note that you mustn't use quotes or they will be considered a part of the value. For example, if you do

key1="value1"

The value of key1 will be "value1" and not value1.

Franky1 (3)

@TheDrone7 Great! Thanks for the fast reply!

KaiMitchellChri (0)

How do you get a file that's not on UPM?
I am a meganoob.

TheDrone7 (1031)

@KaiMitchellChri that's what the upload option is there for.

PDanielY (978)

Very original 😛