If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

The world of JS libraries

There are thousands of JavaScript libraries that you could bring into your webpage, and many aspects of your webpage that they can help you with:
  • DOM manipulation
  • DOM Events
  • AJAX / Data retrieval
  • Effects & animation
  • HTML templating
  • Page layout
  • UI widgets
  • Graphics & charts
  • Data modeling
  • Routing & navigation
  • Accessibility
  • Multi-browser support
  • Mobile support
Here's another way I like to think of it - a webpage is made up of the User Interface (HTML & CSS), Interactivity (JS + DOM), and Data (which we often bring in through JS). You can make your data-driven interactive UI without a library, or you can bring in different libraries to help out with different parts. Some libraries will do a lot, some will do just one part:
Diagram showing different ways of breaking a webapp into UI, interactivity, and data.
One of the hardest parts of web development is deciding what libraries to use, because you'll often be writing code that builds on top of the libraries, and it's hard to change your decision later. There's no right answer - know your options, then make an educated guess.

Web frameworks

There are some libraries that "do it all" - everything from data retrieval to DOM manipulation to fancy UI widgets. If you use one of these frameworks, you'll typically be bringing a lot of JavaScript into your page, so you'll want to make sure you really need most of what the framework is offering you. For some developers, these frameworks do too much, and they find it better to use smaller libraries with more focused tasks.

CSS frameworks

A CSS library is a collection of CSS style rules, and documentation that shows you what HTML tags and classes to use. There are many popular CSS libraries that will make it easier for you to make a beautifully styled website. They sometimes include optional JavaScript widgets, but developers often choose to use other JS libraries with a CSS library.

JS browser libraries

These are libraries that will make it easier for you to use browser functionality - like the DOM API, the window methods - the topics we discussed in this course. They often make it possible to accomplish the same thing in less code, and they'll take care of cross-browser bugs.

JS app architecture libraries

These libraries help you with your web apps as they grow larger. Your code might be manageable now, at a few hundred lines of code, but once you get to thousands of lines of code, your code might become "spaghetti code" - an unmanageable mess. These libraries help you separate your "model" (data) from your "view" (presentation), and often use object-oriented programming principles to organize your code.

Mini libraries & microlibraries

You can also use small libraries that developers have written for a specific task - when they're really small, they're sometimes called "microlibraries". Here's a smattering:
You can find more at microjs.com or just by searching the internet for "javascript library [functionality]" for whatever functionality you're looking for.
Have you tried out a JS library in your webpages here on Khan Academy? Share it in the comments below.

Want to join the conversation?

  • leaf green style avatar for user kun mangobe
    don't you think that using these libraries ; is preventing people for learning more? making a lot of reasearch? or not? because by using that people can get lazy. of course up to me!
    (20 votes)
    Default Khan Academy avatar avatar for user
    • male robot hal style avatar for user Ramon Carroll
      Your concerns are very legitimate...but only for people who don't truly know Javascript or CSS. If you've already done a good amount of work without these tools, then you know when you do or do not need them, and you are more prepared to tweak or add in your own functionality when you don't like the way something is done with the existing tool.

      Yes, there are, unfortunately, many people who just learn libraries and frameworks, and never learn the languages that they are built with (Javascript and CSS). Those people can get far in companies that don't require anything more from them. However, if you want to be truly useful, then its best to know how to do most of the stuff on your own, and just use the tools to increase your productivity when you don't have the time to implement some low level functionality yourself. Tools can be a crutch to the novice, but they can also be a great boon to the master.
      (106 votes)
  • leaf orange style avatar for user Elaine To
    hmmm...after watching the video and reading the article, I was introduced to various JS libraries, but I failed to grab the essence of "how to use a library". I go visit the sites and there are download and code for copy but I don't know how to start...it is just me or does anyone share the same predicament?
    (28 votes)
    Default Khan Academy avatar avatar for user
    • piceratops tree style avatar for user zeraph.moore
      The library has to be hosted somewhere, which means you have to download a js file and upload it to a place it can be hosted, or you could link to an existing hosted file, or you can write or paste your own code in a text document (like notepad) and save it with a .js extension.

      Then you link to your code with script tags as described in this section of the course, and begin using the functions from the library as usual.

      For me, I have hosted websites so I upload my js libraries to a js folder on the server. Then I link to them in the head of the document.
      (14 votes)
  • stelly yellow style avatar for user Tony Punnacherry
    Can you guys make a tutorial for React JS and Node JS, and maybe even full stack? These are newer technologies that are becoming more and more wanted in the job market rather than Vanilla JS/JQuery.
    (9 votes)
    Default Khan Academy avatar avatar for user
  • hopper cool style avatar for user Bob The Zealot
    If I make a library, can I somehow share it with everyone on Khan Academy?
    (6 votes)
    Default Khan Academy avatar avatar for user
  • leaf orange style avatar for user Bryce
    Are these libraries allowed on Khan Academy?
    (6 votes)
    Default Khan Academy avatar avatar for user
  • piceratops tree style avatar for user zeraph.moore
    I always end up using a couple plugins on each website i build which all require JQuery. Here you've said it (Jquery) is generally too big to be including with your website, so what's the solution? Build your own custom programs every time you want to do something, just so you don't have to include jquery?
    (3 votes)
    Default Khan Academy avatar avatar for user
  • starky tree style avatar for user Abhishek Suresh
    So if I learn Jquery next , can it actually replace the DOM events and animations in a more easier and neat way?
    (2 votes)
    Default Khan Academy avatar avatar for user
  • piceratops ultimate style avatar for user Garrett Swartout
    Hi guys! I have a few questions. First, what does UI stand for? I saw it used in this article but I don't know what it means. Second, can you only use one code library for every program you make or can you use multiple? Also, how would you decide which library to use? Thanks in advance!
    (2 votes)
    Default Khan Academy avatar avatar for user
    • spunky sam blue style avatar for user Dalendrion
      Hey Garrett.
      UI stands for User Interface. So it's the part of a program where the computer communicates to the user, or the user communicates to the computer.
      A button is a prime example. It allows the user to press it, after which the computer will know that it has to respond.
      An other example is a text area, where the computer can display some text for the user.

      You can use as many libraries as you would like.
      As long as they don't conflict with each other.
      Just keep in mind that the person visiting the website will have to download all those libraries.
      So the fewer the better.
      (4 votes)
  • leaf orange style avatar for user unegoist
    Hmm, I have a problem here. Why isn't Node.js listed?
    (2 votes)
    Default Khan Academy avatar avatar for user
  • starky ultimate style avatar for user Swara Patil
    What's the difference between a CDN and the cloud? Or is the CDN a part of the cloud?
    (2 votes)
    Default Khan Academy avatar avatar for user