Skip to content
← Back to Community
An introduction to the repl.it editor
Profile icon
h
has Hacker Plan
TheDrone7

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)

Repl.it Editor #1

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

  4. The editor - This is the main place where you write your code which will be run, a regular text-editor.

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

  6. 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.
    Packages tab

    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.

    Package

    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!


Voters
Profile icon
leha-code
Profile icon
CedricMunezero
Profile icon
hazelpy
Profile icon
Dileep-Dilraj
Profile icon
Davidlegacy
Profile icon
TA1890
Profile icon
Highwayman
Profile icon
e5pe
Profile icon
Nyamador
Profile icon
LucasGentil
Comments
hotnewtop
Profile icon
Zavexeon

Listing some shortcuts for the editor would be pretty neat.

Profile icon
TheDrone7

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

Profile icon
Zavexeon

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

Profile icon
BillieRogers

A presentation is a way for a speaker to communicate information to an audience. Another item I'd like to show you is Modern Keynote Templates. https://masterbundles.com/templates/presentations/keynotes/modern/ has over 35 Modern Keynote Templates. Demonstrations, introductions, lectures, or speeches are used to enlighten, convince, inspire, motivate, develop goodwill, or introduce a new product.

Profile icon
InCamiloDev

Can I create custom snippets?

Profile icon
omerocaks

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.

Profile icon
TheDrone7

You can use the language shell. @omerocaks

Profile icon
JosLuisLuis20

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.

Profile icon
TheDrone7

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.

Profile icon
JosLuisLuis20

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

Profile icon
largeDachshund

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,

Profile icon
TheDrone7

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

Profile icon
largeDachshund

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

Profile icon
TheDrone7

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

Profile icon
Davidlegacy

thanks this was great

Profile icon
Franky1

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?

Profile icon
TheDrone7

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.

Profile icon
Franky1

@TheDrone7 Great! Thanks for the fast reply!

Profile icon
KaiMitchellChri

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

Profile icon
TheDrone7

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

Profile icon
KaiMitchellChri
Profile icon
HackermonDev

Very original 😛

Profile icon
LeonDoesCode

Very well written!