# Jinja2

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" %}
    ...