Docs
Switch to new Anvil Editor docs Switch to Classic Editor docs
You are currently viewing the new Anvil Editor Docs.
Switch to the Classic Editor Docs
You are currently viewing the Classic Editor Docs.
Switch to the new Anvil 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.

Client-side Python and JavaScript

When you write client-side code in Anvil, Anvil translates it to Javascript, and that’s how the browser executes it. This means that you can interact with Javascript libraries from your Python code, or even write your own Javascript.

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 <script> tags. HTML Forms can interact with 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.

Anvil already includes some 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

Do you still have questions?

Our Community Forum is full of helpful information and Anvil experts.

Alerts and Notifications Error Reporting

On This Page: