Docs
Switch to Classic Editor docs Switch to Beta Editor docs
You are currently viewing the new Beta Editor Docs.
Switch to the Classic Editor Docs
You are currently viewing the Classic Editor Docs.
Switch to the Beta Editor Docs

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:

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 &lt;meta&gt; tags in here too.

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

Loading Native Libraries

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

Titles and Logos Browser Support

On This Page: