Skip to content
Visual syntax optimized for displaying source code on handheld devices
JavaScript CSS HTML Vue
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
config
src
static
.DS_Store
.gitignore
LICENSE
README.md
index.html
package-lock.json
package.json

README.md

touchPL

Visual syntax optimized for displaying source code on handheld devices. Try it out here.

Imgur

Why?

This is the first part of my work-in-progress touch based code editor/IDE. It's a visual syntax for JavaScript.

The goal is a code editing environment where the creation and the manipulation of the code is done through a touchscreen on a vertically oriented device (usually smartphone).

The majority of this project only exists in conceptual form but I needed some feedback on the visual representation so I created this demo sandbox.

The syntax implements almost all the ES5 features with the exception of: debugger statement, labeled statement, exceptions, do while loop and sequence expression.

How?

The code transformation is done by parsing the js code to an abstract syntax tree (AST). I'm using acorn to that but it should work fine with every estree compatible parser generator.

The generated AST is a list of js objects wich is given to a vue app that I created custom components for to generate HTML based on the nodes. After that it's just the matter of CSS to have it displayed the way I want.

If you want a more in depth view of the process you may consider checking out the source code.

List of the libraries being used:

  • ace editor for the code editor on the demo page
  • acorn for the js to ast generation
  • vue for generation HTML from the AST
  • I also used quite extensively the astexplorer.net to help me construct the AST -> HTML bit of the app

Other

You can’t perform that action at this time.