Prototype Dissected
In getting to know Prototype a little better, I decided to go through the latest version of the Prototype library (1.5.0_pre0) and detail every method and property that was available. In doing so, I got a much better understanding of how the code works. Here are the files in a 1280x960 and a widescreen 1440x900 version.
1280x960
1440x900
1280x960 on White
1440x900 on White
And with WHITE backgrounds, as requested.
Enjoy!
Update: thanks everybody for the positive comments. Here are the original Fireworks files for each one: Black, Black widescreen, White, and White widescreen.
A vector PDF of the cheat sheet is now available thanks to the efforts of Youri op 't Roodt (wicked name, by the way).



Accelerated DOM Scripting with Ajax, APIs and Libraries
The Art & Science of CSS by Sitepoint is a cookbook of web standards
The Thoughts of Others
All comments
Really Great ! am wondering what did you use to make this graph ?
All comments
Shouldn't I be able to click on one of the boxes and have it slide open to show me the raw JS? J/K
Great work - it helps to see it like this.
All comments
Nice, this helped me find something i was looking for.
Can you also create some white background, so we can use it as a quick printed cheatsheet?
All comments
Quite a good look at the library. Seems that I have missed some interesting use of the library. Agreed to have a white background so that we can print it out for reference.
All comments
Thanks! I was just looking at Prototype, and this is one of the best bits of documentation I've found...
All comments
I've now with WHITE backgrounds!
All comments
Excellent cheatsheet! Kudos!
All comments
You finally did it :) Nice work Snook mate. Impressed me yet again.
All comments
nice thanks ... but a pdf would be nicer :-) (esp. if it's all vectors) ... cheers
All comments
This is now the desktop on my secondary monitor...Awesome!
All comments
Made my day, thanks!
All comments
Once again, excellent work Johnathan! I also vote for a PDF, and if you don't have Acrobat Pro, I would be happy to convert these diagrams for you!
All comments
Cool!
Totally want a PDF -- I'd like to turn this into a poster.
All comments
I too would love a PDF version. Would look much better in print.
All comments
PDF would be great so I can print them on A3!
Great work, thanks
All comments
Thank you, make a poster i'll pay cash.
All comments
Very nice idea to make your cheat-sheets your desktop background. This looks great! Mind sharing what you used to put this together?
All comments
great idea, this overview sheet. I think it'll help me a lot. thanx!
All comments
Just another thank you. Prototype is brilliant, but really suffered from a lack of documentation, I will be trying to print this out at work tomorrow :)
All comments
doug: I had started off doing this in Visio but the anti-aliasing was making it hard to read so I started again in Fireworks.
As for PDF... um, let me see what I can do.
All comments
Great work Jonathan! This is a testament to how clean the Prototype api is.
All comments
That's purdy. Real purdy.
Thank you much.
All comments
Dang, awesome man. Wow, seriously. Oh, and put me down for the PDF version too. :)
To anyone else looking for good docs on prototype, make sure you check out this resource (it also has links to other good ones):
http://wiki.script.aculo.us/scriptaculous/show/Prototype
All comments
Again, this goes to show how louzy the original documentation is for Prototype. Excellent work Jonathan. I'll be printing this out at work.
All comments
This is just what I needed, but as others have suggested PDF would be sweet.
All comments
I've been hesitating to get into Prototype due to the complete lack of documentation but this might just be the helping hand I needed. Well done.
All comments
Wow, that's insane.
All comments
Thanks a lot for sharing this. Your chart make the code a lot easier to understand for the vast majority of webdevelopers (including myself) that are sometimes too lazy to dissect the code.
Very good work!
All comments
Wow... "It's beauuuuutiful"
You've got a great site design, too...
All comments
haha, that's cool
All comments
Wow... very cool... good job!!.
All comments
Wow... awesome. Thanks for this great prototype reference!
All comments
this is cool and pretty, but for a more practical reference, check out:
www.sergiopereira.com/articles/prototype.js.html
its really good.
All comments
nice! very cool, good looking too. can you post the fireworx file? i think i will be here another hour re-arranging for 1280x800 (damn you, crazy widescreen laptop!)
btw your site is beautiful.
All comments
just a quick note that I've updated the article to include the original Fireworks files if anybody is interested.
All comments
<33
All comments
d'oh, sorry, i meant to say "<33".. thanks for the pngs!
All comments
Helpful, but more details would be great. Howabout including what each function takes as parameters and returns?
All comments
Dave Child is going to be upset! Just kidding. Nice work Jonathan, and judging from all the comments, you're getting a terrific response.
All comments
just marvelling at your site design..
All comments
NIce work with the prototype stuff, it inspires me to have a go at using it for something. But, uh, I'm afraid this sites design steals the show. It's just amazing.
All comments
Thanks for the taking the effort to make this!
I'm sure lots of people will find it handy.
All comments
Thanks Jonathan for sharing your findings. I've created a PDF as you asked. More info on our blog. http://blog.brains4all.com/brainblog/archives/2006/02/prototype_cheat_1.html
All comments
All comments
Realy great yob.
All comments
Well done, great!
All comments
I had looked at Prototype before but couldn't immediately see any documentation, and therefore didn't see what the fuss was all about.
Having quickly glanced at this, I've suddenly realised what it can do. Sam should be very grateful!
All comments
great job !
All comments
Love it, great job!
All comments
Really good, usefull, nice design! Great!
All comments
This helped me too.
All comments
nice site, nice wall paper, and nice links. *New Subscriber to your feed.
Thanks
All comments
You can easily make PDF's of these using this website: www.expresspdf.com
All comments
I've been using Prototype for a little while and this "Cheat Sheet" comes in really handy!
Thanks for donating such a nicely done graphic to the community!!!
All comments
great job, Tnx
All comments
test, nice comment system
All comments
nice m8 .... *save* khm ... *set as desktop background* ;) that's gonna make stuff easy'r now!
All comments
amazing visual and organization. good work. thanks! :)
All comments
wow, you had a lot of time on your hands huh? hahaha very very nice man thx for the hard work
All comments
Thanks a lot for this!!
All comments
These are fantastic, and printed out very good indeed.
Thank you very much!
All comments
THANK YOU SO MUCH!
~ Flashy Jackson
All comments
Great Job, thank you so much :)
All comments
Thank you for this. I am stupefied by the wicked cool design of this site too...
All thats going through my head is "Note to self: yo, kid! you better start eating your design wheaties! Did you see the CSS balls on that 900 lb design gorilla? dude's droppin' bombs like hiroshima!"
All comments
this is fantastic. thank you very much.
any plans on making one for scriptaculous? because if there was, and you were going to do it, that'd be hella cool. and i'd totally download it and thank you with another comment.
All comments
I've made it my desktop background!
All comments
whoa
All comments
Are you 'snook' the coochie crook?
All comments
Are the items colored green, globals????
All comments
green items are properties. blue items are methods.
All comments
Very impressive. Thanks for the overview.
All comments
Sir: You are a genius. This is a magnificent product and a great service to others. Thank you.
All comments
I have converted them to pdf's as many of you have requested.
Find the files here
All comments
These PDFs are converted images and so have no use at all. Jonathan should print'm himself directyly from the app he made the graphics in!
All comments
I would be more than happy to take the original pngs and print them as pdf's in case Jon does not have the tool to do it.
All comments
I would be more than happy to take the original pngs and print them as pdf's in case Jon does not have the tool to do it.
Johnny: if you believe there is no use for them, don't use them.
All comments
This is great! I already have it set up as my desktop background. Thanks for going to the trouble :)
All comments
perfect! Can you provide a chm help for prototype?
All comments
Dude! Thanks for this! This prottype disected poster is just awesome! Just what I was looking for!
Thanks Again!
All comments
The PDF's so far only contain images, I think people are asking for a vector version so you can blow it up as big as you want. I completely recreated a vector image from scratch and tried to respect the original image as much as possible.
Free to download for everyone:
prototype.pdf
All comments
Its really nice
All comments
Oh my god! This is the best thing anyone's ever done. What a helpful little monkey you are! I'm gonna go stare at this for an hour or so.
All comments
Does anyone know where I can download prototype 1.5 easily? (in one file)
Thanks
All comments
Grab the latest from here.
All comments
Love the layout
All comments
this is really cool
All comments
WOW nice sheets! have already helped me with being a noob to this, I saw this article when it was first posted but didnt think much of it (never had a serious use for JS) but then I wanted to try out ajax with a little system i was building. Few hours searching didnt really get anywhere.
Then I remembered I saw ajax mentioned on 24ways and tried Prototype. I was ajaxing in seconds
Fantastic!
All comments
nice comment system - so creative and awesome
All comments
That's really great! Helped me alot. Thanks for great work.
All comments
Awesome! If only this came in 1024x768 it'd be my wall paper!
All comments
you could probably easily fit a color key on the images (suggestion)
All comments
Thanks a lot!
All comments
Gooooooooooood!!!
All comments
Beautiful and useful. Thank you for the version with white background. :)
All comments
Jonathan - If you'll send me your Fireworks vector PNG I'd be happy to create a vector PDF to send back.
Thanks for providing this to the community!
BTW, great blog commenting design! ~Jon
All comments
Ooops! I missed the PDF link at the very top. Good stuff Jon, thanks!
All comments
Too strong, thanks a lot !!!
All comments
This thing is amazing, especially the PDF, but do the fonts seem kinda small to anyone else?
All comments
hoo!
All comments
Nice work, it gonna be very usefull for me thanks alot ;)
All comments
Great work!
All comments
Thank you thank you thank you! Very nice work, and quite helpful. :)
All comments
Hey Cool, WEb2.0 is great..-..
All comments
Someone has too much time on their hands...
Great work Jon, this is going to come in handy for a lot of people I'm sure, including myself whenever I get around to taking a look at Prototype.
All comments
Thank you, this helps a lot while working with Prototype.
All comments
respect man!!
All comments
Hey man, great blog and site btw! I'll be visiting again!
All comments
Thank you very much. This is my desktop now.
All comments
Great stuff. Wish I had cheatsheets this nice for JS and PHP...
All comments
Great cheatsheet, going to be using it a lot :)
All comments
I to, like ron would be more than happy if you made a sheet over scriptaculous, that would just be awesome - REALLY!
But thanks for the truely awesome work on prototype champ
All comments
Thank you soo much for this. This one came handy.
All comments
Great work! This is really handy. Need a laminated poster sized version so it's always in my face.
All comments
wow..thanks alot!
All comments
Great work. When I look at the png its much easy for me.
Thanks
All comments
This has obviously struck a chord with the community, well done.
But you're only 30% finished. API documentation has to include arguments and return values to be useful for day-to-day work.
I hope this is the start of a more complete project!
All comments
It's seems so good.Thank you for your good work.
All comments
I think you should continue developing this project and keep the good work
All comments
Great job man this is wht u call Good work Keep it up :)
All comments
Wouldn't it have been a lot better, and taken you a lot less time if you used UML instead of straight graphics?
All comments
Duc: Typing the words takes just the same amount of time no matter what format you use.
All comments
well UML ould be better but nice work tough cant take that from u
All comments
Great Work!!! I printed out a copy for everyone at the office!
All comments
Thank for the work.
One beauty remark, I saw the 'position' contains clone() 2 times.
All comments
Very Good
All comments
You should publish some detailed tutorials on how to implement such work.
Thanks a lot.
All comments
I've gone through the new String functions/methods that Prototype 1.5 has added and written up a post:
Using Prototype's New String Functions
It's some pretty powerful stuff that is giving me a serious crush on Ruby.
All comments
Great work. When I look at the png its much easy for me.
Thanks
All comments
good job, keep going like this
All comments
pretty nice work, this is really fantastic.
All comments
Great job, I love your work. Hope we see some more of your ideas
All comments
thanks muchly...
All comments
Great work and looks very good!
All comments
Well done, keep goin on like that ... Thanks and greetz, Tomba
All comments
Great job! Impressive!
Congratulations from Brazil.
All comments
Wow! This is just what I needed!
All comments
I have just printed it out. The white one. Thank you from germany!!
All comments
Good Job; I'm sure lots of people will find it handy.
All comments
<div align="right">PDF is great for printing, anyway, thanks a bunch for this documentation! +</div>
All comments
<center>Nice work, thanks for the good documentation....</center>
All comments
This helped me a lot with my work, thank you Jonathan.