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

Quickstart: JavaScript

Learn how to drive JavaScript functions and external libraries from Anvil.
Follow this Quickstart guide to create an app that drives a Quill text editor (all from Python!).

Include the External Library

Check the library for the installation options. There will often be a CDN option with some HTML. When you include the HTML in your project, the library will be pulled in from an external host.
Find this code and paste it into your native-libraries.

<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
Many libraries offer a choice between a .min.js file (faster to load, but harder to debug if you need it) and a .js version (for easier debugging). In this case, we suggest using the .js version while you’re developing your integration, then switching to the .min.js version when you’re ready to publish, to speed up your users’ loading time.

Import JavaScript into Anvil

The anvil.js module gives you access to the window object. Any JavaScript object from the window can be imported into Anvil. We need the Quill constructor from JavaScript so import it.

from anvil.js.window import Quill 
# import the Quill constructor from JavaScript

Convert JavaScript to Python

Start using the library. This involves reading the documentation and adapting examples to work in Anvil. Below is some JavaScript from the Quill documentation.

// JavaScript code from Quill documentation


var quill = new Quill('#editor', {
    modules: { toolbar: true },
    theme: 'snow'
});

quill.on('text-change', function(delta, oldDelta, source) {
    console.log(source, quill.getText());
});

Make it Python!

  • dictionary string keys must use quotes in Python
  • true and false become True and False
  • null becomes None
  • Inline functions with multiple lines of code should be extracted into separate functions

Add a ColumnPanel in the design view. We’ll tell Quill to use the ColumnPanel as the editor with anvil.js.get_dom_node().

Call the Quill constructor inside your Form’s __init__ method with the DOM node and some options. We’ll also add a method text_change() to handle the Quill ’text-change’ event.

A Form’s __init__ method runs before the Form, and its components, are added to the page. Some JavaScript functions will require DOM nodes to be on the page in order to execute correctly. If this is the case, or if you notice some strange behaviour, try moving the JavaScript to the Form’s show event. A Form’s show event executes after components are added to the page.

Here’s what your final code should look like.

from ._anvil_designer import Form1Template
from anvil import *
from anvil.js.window import Quill
import anvil.js

class Form1(Form1Template):
  def __init__(self, **properties):
    self.init_components(**properties)

    editor = anvil.js.get_dom_node(self.column_panel_1)
    # add a ColumnPanel in the design view
    # get the dom node for the ColumnPanel
    
    self.quill = Quill( editor, {
        'modules': { 'toolbar': True },
        'theme': 'snow'
    })
    
    self.quill.on('text-change', self.text_change)
    
  def text_change(self, delta, old_delta, source):
    print(source, self.quill.getText())

The above code is enough to get started with a Quill editor in Anvil. Run the code!

Copy The Example App

Click on the button below to clone a finished version of this app into your account.

Open in Anvil

Next up

Want more depth on this subject?

Read more about Accessing JavaScript.

Want another quickstart?

Every quickstart is on the Quickstarts page.

Do you still have questions?

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

Using JavaScript Accessing JavaScript

On This Page: