Monday, January 15th, 2007

byteplug: Experimental Online JavaScript Editor

Category: JavaScript, RichTextWidget, Toolkit, Utility

Andrea Giammarchi has been working on an online JavaScript editor and debugger.

The online editor combines a possible solution for byte family plugins, a global byteplug namespace object, and a portable Editor panel to test quickly JavaScript and/or html pages.


  • realtime debug


    It allows developers to write and test code quickly using document.write, alerts or everything else.

    To view or execute a code, just use CTRL+RETURN or click on debug panel (bottom left), result will be displayed on output panel (bottom right)
    using a dedicated iframe virtual space.

  • line points

    Just click one line (number on the left) to mark them

  • in-place suggest

    Just click CTRL + SPACE or CTRL + SHIFT with Opera to view a kind of intelligent code suggest.
    For example, if You write “Number.” on area then use CTRL + SPACE You will see every Number dedicated method plus generic Object methods.
    If You press CTRL + SPACE without a dot before area selection, suggest will show You generic or global functions and statements.

  • quick and simple load and save operations

    You can cut and paste some piece of code or directly open a file (txt or js) from Your computer.
    You can save working area content too, choosing a name using CTRL+S or after one click on File, Save As.

  • simplified JavaScript 1.7 debug

    You can choose to parse JavaScript as version 1.7 (compatible only with FireFox 2.0 or other advanced browsers) choosing Use JS 1.7 on Settings menu.

  • popup mode

    You can launch this Editor inside an 800×600 popup

  • jhp mode

    You can choose to try my absolutely nonsense or crazy jhp JavaScript library … !!!

  • x-html mode

    You can write divs, links, or every kind of markup using <script> … </script> as first piece of area code (with or without JS code inside) to create a page instead of direct script execution

    (i.e. <script type=”text/javascript”>function myfunc(){alert(“Hello World”)}</script> <span onclick=”myfunc()”>test me</span>)

  • resizable area

    You can drag the line between working area and debug/output panel to find your favourite size

  • extra “code cruncher” implementation

    You can test your code using a “code cruncher” (Crunch – “method” from Extra menu).
    Please view “simple and portable PHP download” point to know more about Crunch methods.

  • extra code headers injection

    You can choose to add area code as header. For example, if You need to add a library during debug You can
    load or paste its code inside area and add them as header.
    This code will not be parsed by jsmin and will not be saved as part of script but will be wrote before every other scripts on output panel (every but jhp) then,
    for example, You could add Prototype code and use them as header.

     // extra headers example
    // area content
    function testMe(){
    	document.write("useful ?");
    // now click on header - add code on Extra menu and clean the area
    // after that, write this on area
    // CTRL+RETURN or a click on debug panel and code will be executed

    Please remember that every time You add code precedent code will not be deleted so You need to use header – clear code to remove all precedent headers.

  • extra highlight feature

    You can choose to view on output panel highlighted code version.
    Fast version marks strings, numbers and comments while full highlight parse functions and methods too.
    If You have a big source and a regular PC (without monster CPU) You should use fast version.

  • simple and portable PHP download and / or pack panel feature

    You can save your code that should be parsed with cruncher too and then injected into a portable php 3, 4, 5 or greater file that will automatically
    choose the best way to cache with or without gz encoding even on server that doesn’t have zlib extension enabled.

    • just area code,
      to create a php file without code cruncher (the safest script VS bandwidth option leaving comments and everything else)
    • Crunch comments,
      to create a php file parsing code with basic code cruncher (removes only comments, this is a good script VS bandwidth option)
    • Crunch newlines,
      to create a php file parsing code with medium code cruncher (removes comments and every repeated space replacing them using a linefeed, this is the best script VS bandwidth option)
    • Crunch full,
      to create a php file parsing code with full cruncher options (remove any linefeed and doesn’t take care of potential missing semicolons [can be regressive], this is the best copression option)

    If You want to download your code using code cruncher please enable “Crunch”, choose your favourite method and test your code to be sure that it works correctly.
    If You just want to use this Editor to create these kind of compressed files and these are really bigs (no more than 512Kb on upload and 2Mb on download – my personal choice) please don’t use File and Open process, just cut and paste your code into area (faster and safer for your browser and PC).
    Please remember that created file size will not be the real size downloaded from clients so don’t care about that, just test created php file and have fun :-)


Posted by Dion Almaer at 8:30 am

3.7 rating from 36 votes


Comments feed TrackBack URI

Someone is going to have to explain to Andrea that “byteplug” is probably not a good name…

Comment by Dean Edwards — January 15, 2007

Please Dean, tell me why before I’ll create a complete “byteplug” package to download :-)

Thanks to Ajaxian for this post!

Comment by Andrea Giammarchi — January 15, 2007

byteplug is too close to “butt plug”.

I think thats what he is getting at. I donno.

Comment by Mario — January 15, 2007

ooooooopssss … !!! ehr … LOL, I didn’t know it ! thank You Mario, I’m just thinking to another namespace name (.. and I hope a better one) :D

Comment by Andrea Giammarchi — January 15, 2007

NP. Glad to help. I like reading your blog. Always something interesting.

Comment by Mario — January 15, 2007

Thank You Mario … well … who said byteplug ??? … this is an overbyte namespace experiment … now, is there someone that has a “butt plug” called overbyte ??? … I hope this name will be less butt and more byte, thank You again :-)

Comment by Andrea Giammarchi — January 15, 2007

“overbyte” is also funny but in a good way. ;-)

Comment by Dean Edwards — January 15, 2007

I hope this name will be less butt and more byte, thank You again :-)

You have a gift for comedy.

Comment by Dean Edwards — January 15, 2007

lol, buttplug.

Comment by Dougal Matthews — January 15, 2007

byte is very similar to bite == morso..
so now you can understand dean last sentence.

Comment by kentaromiura — January 15, 2007


Check out which is something similar and not just for JS.


Comment by OB — January 15, 2007 which is something similar and not just for JS

I didn’t know this project and it seems very intersting!!!
Area highlight is a cool feature and my overbyte.HighLight should work with other languages too (uses SourceMap that can parse, with dedicated rules, different languages) … but I wonder if an online workspace could be secure for server-side PHP users too (dedicated folder with low permissions for each user ?)

Another question, does your highlight work fast with big size scripts too ? (I haven’t test the demo)

However, I’ll stay tuned.
Good luck for this project (mine is “just a quick and dirty” realtime debugger, not a complete workspace, I did them only to test quickly another project, jhp) :-)

Comment by Andrea Giammarchi — January 15, 2007


Your project is very interesting i was playing around with it for a while and was impressed :)

Our syntax highlighter can handle fairly large files but still needs a lot of improvement which is what we are currently working on. Our workspace can connect to any server using FTP protocol and allow user to edit the files conveniently.

I will post more details on the blog later on :)


Comment by OB — January 15, 2007

Is it only me or do you guys also get stuck at a blog about Byteplug? Can’t find any demoversion…

Comment by Bart — January 16, 2007

Leave a comment

You must be logged in to post a comment.