THE VSCODE OF MOBILE
Tags: webdev, android, productivity, javascript
Published: 2020-07-21 11:37:41

So a few months ago I stumbled upon spck editor app on playstore while doing my occasionaly peruse around Playstore. I checked out the rating and the preview pictures and got super hyped to try it out.

I have tried a lot of other mobile text editors to enable me to do some front end development on my phone but I never quite found what I was looking. But this was until I found Spck Editor. (Pronounced as "speck")

Its availabele for [web](https://spck.io) and [android](https://play.google.com/store/apps/details?id=io.spck&hl=en)

### **Some of Its Major awesome features**

#### 1. GitHub integration

#### 2. Boiler plates for popular fronted frameworks

#### 3. Ability to add Css frameworks to your projects

#### 4. The Chrome-Like Console

#### 5. Autocomplete, suggestions, Keyboard shortcuts and Find 'n' replace

#### 6. And of course syntax highlighting

---

## GitHub Integration
> With Spck you can clone GitHub repos which gets added onto your **Project Pane** as a new Project.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uz6l7ktn6rmjj6vyymrm.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/byucviz2pp1ghz00jsgg.png)

> Once you make changes to your project you can then **Commit All** (Commit all the changes) and then **Push** (Push the changes to the remote repo)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/klc0sijrr2ei825twvgw.png)


> You can also make pull requests and Revert changes using the **Pull** and **Revert All** options.

> You Can **Create and Switch Branches**, **Add remote repo to existing project**, **Fetch** and **Log History**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/70un8arlagrtp6q1vsbk.png)

> Basically the GitHub integration is unbelievable (for a mobile app)

---

## Boilerplate for popular front end frameworks

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w8i81zn09uhmtk3sl8yj.gif)

> You can create a **Vue**, **React** or **Angular** project super easily with steps below.

1. Click on the `Plus Icon` on the project pane
2. Select `New Project`
3. Select the Front end Framework you want.
4. Lastly, the Css Framework.

> #### **Note for VueJs the project is not initialized in the single file component model but with Vue being imported and targeting a particular div.**

---

## Ability to add Css frameworks to your projects


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vi7nj6zjf02pwy3zyv9h.gif)

> Currently when you create a project you can choose either the following css frameworks to be automatically imported/linked with your Project

1. Bootstrap
2. Bulma
3. Material Design Lite
4. Semantic UI
5. UIkit

---

## The Chrome-Like Console

> The Console is a stripped down version of the Chrome Console.You can toggle it on off in the Preview mode. It Features the **The JS Console Tab**, **The Elements Tab**,**The Resources tab** and **Settings tab**

> The Js console tab is Just like the Chrome console

---

## Autocomplete, suggestions, Keyboard shortcuts and Find 'n' replace

> What can I say here. A lot like VSCode

#### The are a lot and I mean a lot more features that I have not covered. And I do believe that Spck editor app is the closest thing to our beloved Vscode on Mobile

> I'll also be posting an article about doing back end development on Mobile. And again I mean serious back end development with express and a Mongodb service running on the PHONE. So stay tuned (or just follow me :) )