A Jinja2 extension is available as webassets.ext.jinja2.AssetsExtension. It will provide a {% assets %} tag which allows you to reference your bundles from within a template to render its urls.

It also allows you to create bundles on-the-fly, thus making it possible to define your assets entirely within your templates.

If you are using Jinja2 inside of Django, see this page.

Setting up the extension

from jinja2 import Environment as Jinja2Environment
from webassets import Environment as AssetsEnvironment
from webassets.ext.jinja2 import AssetsExtension

assets_env = AssetsEnvironment('./static/media', '/media')
jinja2_env = Jinja2Environment(extensions=[AssetsExtension])
jinja2_env.assets_environment = assets_env

After adding the extension to your Jinja 2 environment, you need to make sure that it knows about your webassets.Environment instance. This is done by setting the assets_environment attribute.

Using the tag

To output a bundle that has been registered with the environment, simply pass its name to the tag:

{% assets "all_js", "ie_js" %}
    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
{% endassets %}

The tag will repeatedly output its content for each ASSET_URL of each bundle. In the above case, that might be the output urls of the all_js and ie_js bundles, or, in debug mode, urls referencing the source files of both bundles.

If you pass something to the tag that isn’t a known bundle name, it will be considered a filename. This allows you to define a bundle entirely within your templates:

{% assets filters="cssmin,datauri", output="gen/packed.css", "common/jquery.css", "site/base.css", "site/widgets.css" %}

Of course, this means you can combine the two approaches as well. The following code snippet will merge together the given bundle and the contents of the jquery.js file that was explicitly passed:

{% assets output="gen/packed.js", "common/jquery.js", "my-bundle" %}