ICode is an open source online HTML/CSS/JS editor.

Why create iCode?

Yes, there are already a number of proven products out there, such as JSFiddle, Codepen, etc. Why add another one? Very simple: practice 😂

On the one hand, iCode is suitable for practicing CSS /Vue and other technologies. On the other hand, you may also use iCode to test your code.

What are the features of iCode?

Even as a hands-on project, iCode has some characteristics of its own:

  • HTML/CSS /js/ Preview 4 distribution, very similar to my own usual use of iTerm2
  • Interactively, this is similar to iTerm2: highlight the current Panel and drag and drop to resize the Panel

  • Shortcut key support (I am an efficiency fan) :
    • ⌘1/2/3/4 shows hidden HTML/JS/CSS/Preview area
    • ⌘Enter to run the code manually
  • Basic editor support, such as auto indent, syntax highlighting, syntax checking, etc
  • The code is stored in the browser’s local store

The default edit automatically runs the code, if you are worried about too many unnecessary execution, you can click the Settings button in the bottom right corner of the page to disable this option.

What else is missing from iCode?

ICode is still a long way from being a full-fledged online editor. For example:

  • Browser adaptation, mobile adaptation
  • Multi-project support; Currently iCode supports only single-project code
  • The code is saved in the cloud and runs across browsers
  • Code can be embedded in the website
  • Uploading resource Files
  • More interface layouts, themes
  • …

The source code

  • GitHub
  • Online sample

NPM Run serve, you get the idea.

Welcome to exchange ~