Using JavaScript
This feature is optional - you do not need to know JavaScript to use Anvil!
However, if you do know JavaScript, and want to integrate with a low-level browser API or an existing JavaScript library, this reference will allow you to access all those low-level details from Anvil.
Check the Quickstart to see this feature in action.
JavaScript environment
All the Python client-code you write in Anvil is executed as JavaScript code. In the same way that Python code written on your PC is executed as C code.
Anvil pages execute within the Anvil runtime. The Anvil runtime loads various JavaScript components into the namespace.
You can also inject your own JavaScript objects into the namespace and access those objects from Python. These reference documents show you how.
Injecting your own JavaScript
You can inject your own JavaScript in various ways:
- by writing JavaScript in the Native Libraries
- by writing JavaScript in Custom HTML Templates
- by pulling in JavaScript from external libraries
- by including JavaScript files in theme assets and referencing these files in HTML
Accessing JavaScript from Python
anvil.js
Anvil’s js module
is the rosetta stone for accessing JavaScript variables in Python code. Check the Quickstart for a worked example, or get a more in-depth look at how this works.
HTML Forms
HTML Forms have an HTML Template which may include JavaScript functions. HTML Forms can interact with those JavaScript functions using their self.call_js()
method. Find out how.
Using Native JavaScript libraries
To use Native Libraries with Anvil, select the Native Libraries option in the App Browser.
Any HTML you add to the “Native Libraries” section will be inserted into the <head>
tag of your Anvil app’s HTML. This is a great place to add a <script>
tag to pull in an external library (or a .js
file in your app’s Assets). You can also use <link>
tags to refer to external CSS.

Importing JavaScript libraries. You can write <meta>
tags in here too.

Importing JavaScript libraries. You can write <meta>
tags in here too.
Already included JavaScript
If your JavaScript is acting weird, it might be because you have overwritten something important.
For example, it is a bad idea to load jQuery or Bootstrap JavaScript explicitly from an HTML template — it will overwrite the versions Anvil has already loaded. Here is a partial list of JavaScript libraries Anvil loads:
- jQuery version 3 (minor versions may be upgraded without warning)
- Bootstrap version 3.4 (minor versions may be upgraded without warning)
- The Skulpt Python-to-JavaScript compiler
Anvil Examples
Driving JavaScript APIs
- 3d Christmas Tree - using Three.js a library for displaying 3D content on the web
- Tabulator - a libary for creating rich tables on the web
- HashRouting - drive window navigation from Python
- Popover - using
jQuery
to implement bootstrap popovers - AnvilAugment - using
jQuery
events on anvil components