Arduino Project Hub

Getting Started with the Arduino Web Editor

Start coding online with the Arduino Web Editor, save your sketches in the cloud, and always have the most up-to-date version of the IDE!

  • 135,049 views
  • 8 comments
  • 88 respects

Components and supplies

Apps and online services

About this project

Arduino Web Editor, and the Create Platform

The Arduino Web Editor allows you to write code and upload sketches to any official Arduino and Genuino board from your web browser (Chrome, Firefox, Safari and Edge) after installing a plugin. We recommend you use Google Chrome.

This IDE (Integrated Development Environment) is part of Arduino Create, an online platform that enables makers to write code, access tutorials, configure boards, and share projects. Designed to provide users with a continuous workflow, Arduino Create connects the dots between each part of a maker’s journey from inspiration to implementation. Meaning, you now have ability to manage every aspect of your project right from a single dashboard.

The Arduino Web Editor is hosted online, therefore it will always be up-to-date with the latest features and support for new boards.

This IDE lets you write code and save it to the cloud, always backing it up and making it accessible from any device. It automatically recognizes any Arduino and Genuino board connected to your PC, and configures itself accordingly.

An Arduino account is all you need to get started.

Sign up to Arduino

Go to arduino.cc and click the ‘Sign Up’ link in the upper right corner of the page. Complete the registration form, then hit the ‘Create Account ’ button. You will receive an email with a link to activate your account. Select the link and a new page will open with your confirmed account information.

Note that you can also use this account to write posts on Arduino’s official Forum, buy products on the online stores, add comments on the blog, as well as create tutorials on the Arduino Project Hub (YAY!).

Log in the Arduino Web Editor

Once you have successfully registered for an Arduino account, go to create.arduino.cc/editor. After accepting the term and conditions, you should receive an email with a link to the Forum where you can report any bugs you may encounter and share your feedback.

Follow a simple flow to install the Arduino Web Editor plugin, which permits you to upload sketches from the browser onto your boards. At the end of the plugin installation flow, you will be redirected to the Arduino login page—it’s time to use your credentials!

Arduino Web Editor anatomy

After logging in, you are ready to start using the Arduino Web Editor. The web app is divided into three main columns.

The first column lets you to navigate between:

  • Your Sketchbook: a collection of all your sketches (’sketch ’ is what programs you upload on your board are called).
  • Examples: read-only sketches that demonstrate all the basic Arduino commands (built-in tab), and the behavior of your libraries (from the libraries tab)
  • Libraries: packages that can be included to your sketch to provide extra functionalities
  • Serial monitor: a feature that enables you to receive and send data to your board via the USB cable
  • Help: helpful links and a glossary about Arduino terms
  • Preferences: options to customize the look and behavior of your editor, such as text size and color theme

When selected, every menu items shows its options in a side panel (second column).

The third column, the code area, is the one you will use the most. Here, you can write code, verify it and upload it to your boards, save your sketches on the cloud, and share them with anyone you want.

Now that you’ve set up your online IDE, let’s make sure your computer can talk to the board; it’s time to make sure you can upload a program.

  • Double check if the Web Editor is displayed the way you like, check the Preferences panel for a few options
  • Connect your Arduino or Genuino board to your computer. Boards and serial ports are auto-discovered and selectable in a single dropdown. Pick the Arduino/Genuino board you want to upload to from the list.
  • Let’s try an example: Choose ‘Examples ’ on the menu on the left, then ‘Basic ’ and ‘Blink ’. The Blink sketch is now displayed in the code area.
  • To upload it to your board, press the ‘Upload ’ button (arrow right) near the dropdown. A ‘BUSY ’ label replaces the buttons during code verifying and uploading. If the upload is successful, the message “Success: Done uploading ” will appear in the bottom output area.
  • Once the upload is complete, you should then see on your board the yellow LED with an L next to it start blinking. If this is the case congratulations! You have successfully programmed your board to blink its on-board LED!
  • Sometimes your brand new Arduino/Genuino is already programmed with the Blink sketch, so you can’t tell if you are truly in control. If this is the case, change the delay time by changing the number in the parenthesis to 100, and upload the Blink sketch again. Now the LED should blink much faster. Congratulations! You really are in control!

What boards are supported?

On the online IDE we are able to automatically detect the kind of board and the port it is connected to without you having to individually select them.

We are currently supporting only Official Arduino/Genuino boards, and a few Certified and AtHeart boards. You can find the full list of supported boards by clicking on the boards dropdown and hitting 'Select Other Board and Port '.

In this popup window you also have the freedom to select any board if you want to verify if your code works for a specific product, but you don't have it at hand. If the board you have connected is not recognized, you can also manually select it here, don't forget to also select the port.

The full list of supported hardware is displayed in the popup window. We are working on expanding this list.

Serial Monitor

On the Arduino Web Editor the Serial Monitor is available on the side bar, when you click on it a panel will be displayed.

The Serial Monitor reads the board selected at that moment in the Board dropdown. If you need to change board (for instance you have more than one board connected to your PC), just select the one you would like to read from in the dropdown. The PORT infos in the panel will be updated as a result.

If you want to print something and get familiar with the Serial Monitor you can try Examples > 03.Analog > AnalogInOutSerial. Press Upload and see the values printed out in the panel.

While the code is uploading the panel will be greyed out as in the following image.

If no board if connected at that time, the Serial Monitor will be greyed out and unavailable.

If you are using other programs that communicates via that port (for instance Processing or the Desktop IDE), a message saying that the port is used by another software will appear.

If you wish to use the port with another software or just want the flow of output values to stop, you can press the Disconnect button on the panel.

Document your projects

Documenting your project is always a great idea. Go to the Examples panel and select the Fade sketch.

Open the ‘layout.png ’ and ‘schematic.png ’ tab. These illustrations will show you how to put together your electronics. When you are working on your own projects, you can add your own documentation images by clicking on the last tab of the code area and choosing ‘Import File into Sketch ’.

Share your Sketches

Every sketch you create has a unique URL, similar to Google Docs. Press the ‘Share ’ button and copy the URL provided into a new tab of your browser to check it out.

If you give the URL to someone, they will be able to see your code, add a copy of it to their Sketchbook in the cloud or download it. If you write a tutorial on Project Hub and add the link in the Software section, your code will be embedded and will always remain up-to-date.

We envision the Arduino Sketch as the unit that includes everything you need to bring an idea to life. When someone shares a sketch with you, you’ll both have access to the code, the layout for the electronics, as well as the full tutorial (when available). This will provide you with all the necessary information to build on top of the original project, thereby making it your own.

You can even embed your sketch in a webpage by copying the code provided in the Share window.

Libraries and the Arduino Web Editor

The Arduino community has written over 700 libraries that you can include in your sketches without having to install a thing. You can browse through all of them in the Library Manager and favorite the ones you like the most. All the libraries available in the Library Manager are automatically detected, so you’ll never need to install them to get your code to compile.

Since all the contributed libraries are up on our servers, if you use them and then you share your sketch with someone, they could just add a copy of your code to their sketchbook and will be able to compile it without having to do anything else.

We know that sharing a sketch and its related libraries can be cumbersome, using the Web Editor you can really speed up this process. Try for instance this Thermostat Bot sketch that uses a variety of Contributed libraries.

But what if you want to select a specific version of a library? Look for it on the Library Manager and star it. It will show up on the the Favorite tab of the Libraries panel. From there you can select a specific version and include it to your sketch. We are adding a metadata to the sketch about the version number so we can tell the Arduino Builder to pick the one you really want. When building your sketch we will always look at your custom libraries first, then to your favorite ones, and lastly to the Arduino built-in libraries.

If you favorite a library you can also see its related examples, get more information and a link to the GitHub repository, and download it.

We would love to hear your feedback!

We are keeping a close look at the Forum, and we would love to hear from you if you encounter any bugs, have any feedback or ideas you want to share with us.

Code

Blink
Fade

Comments

Similar projects you might like

Arduino 101 - Intel Curie Pattern Matching Dress

Project tutorial by Kitty Yeung

  • 2,270 views
  • 11 comments
  • 21 respects

Arduino Morse Code Machine

Project tutorial by Vlada Krsmanovic

  • 822 views
  • 0 comments
  • 12 respects

Arduino Laser Tripwire

Project tutorial by Ian Cumming

  • 2,820 views
  • 2 comments
  • 20 respects

PlatformIO for Visual Studio Code

by formulahendry

  • 977 views
  • 0 comments
  • 7 respects

Smart Home Sensor Node

Project tutorial by vincent wong

  • 1,007 views
  • 0 comments
  • 6 respects

ESP8266 + L298N Motor Drive + Smartphone

by luciorocha

  • 1,774 views
  • 2 comments
  • 8 respects
Add projectSign up / Login