diff --git a/module.js b/module.js
index f23198d..93d3192 100644
--- a/module.js
+++ b/module.js
@@ -1,7 +1,31 @@
 
+
+import TemplateRenderer, { cache } from './modules/renderer-template.js';
+
+export default function Literal(id) {
+    // TODO: I don't think this works, it replaces whatever template is in the
+    // DOM, it it probably isn't in the DOM if it's cached?
+
+    const id = typeof id === 'object' ?
+        id.id || '' :
+        id ;
+
+    if (cache[id]) {
+        return cache[id].create();
+    }
+
+    const template = typeof id === 'object' ?
+        id :
+        document.getElementById(id) ;
+
+    return new TemplateRenderer(template) ;
+}
+
+// TODO: Legacy, remove
+export { TemplateRenderer as Renderer };
+
 export { compiled }                 from './modules/renderer/compile.js';
 export { default as config }        from './modules/config.js';
 export { default as Data, observe } from './modules/data.js';
-export { default as Renderer }      from './modules/renderer-template.js';
 export { default as scope }         from './modules/scope.js';
 export { urls }                     from './modules/urls.js';
diff --git a/modules/config.js b/modules/config.js
index 5e7f058..14768fc 100644
--- a/modules/config.js
+++ b/modules/config.js
@@ -2,9 +2,27 @@
 /*
 config
 Configure Literal's behaviour.
+
+```js
+    // An event dispatched when Literal updates input values. Default is `false`.
+    config.updateEvent = CustomEvent('ping');
+
+    // Run templates in sloppy mode inside a `with(data)` statement, making
+    // `${ data.name }` available as simply `${ name }` in a template.
+    // Warning: MDN says `with` should be considered deprecated:
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with
+    // I really don't see how they can remove it, though.
+    useWith: false
+```
 */
 
 export default {
     // An event dispatched when Literal updates input values. May be false.
-    updateEvent: false
+    updateEvent: false,
+    // Runs templates in sloppy mode inside a `with(data)` statment, making
+    // `${ data.name }` available as simply `${ name }` in a template.
+    // Warning: MDN says with should be considered deprecated:
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with
+    // I don't see how anyone can remove it, though.
+    useWith: false
 }
diff --git a/modules/data.js b/modules/data.js
index ef56665..24b3761 100644
--- a/modules/data.js
+++ b/modules/data.js
@@ -1,7 +1,9 @@
 
 import { Observer as Data, getTarget } from '../../fn/observer/observer.js';
+import observe from '../../fn/observer/observe.js';
 
 Data.getObject = getTarget;
+Data.observe   = observe;
 
 export default Data;
-export { default as observe } from '../../fn/observer/observe.js';
+export { observe };
diff --git a/modules/renderer-template.js b/modules/renderer-template.js
index 456f5c2..f104fd2 100644
--- a/modules/renderer-template.js
+++ b/modules/renderer-template.js
@@ -1,6 +1,6 @@
 
 /**
-TemplateRenderer(template, element, parameters)
+TemplateRenderer(template, element, parameters, options)
 
 Import the `TemplateRenderer` constructor:
 
@@ -40,7 +40,7 @@ import { groupCollapsed, groupEnd } from './log.js';
 
 const assign = Object.assign;
 const keys   = Object.keys;
-const cache  = {};
+export const cache  = {};
 const nodes  = [];
 
 
@@ -98,19 +98,19 @@ function prepareContent(content) {
     }
 }
 
-function compileContent(content, message) {
+function compileContent(content, message, options) {
     if (window.DEBUG) { groupCollapsed('compile', message, 'yellow'); }
     prepareContent(content);
-    const renderers = compileNode([], content, '', message);
+    const renderers = compileNode([], content, '', message, options);
     if (window.DEBUG) { groupEnd(); }
     return renderers;
 }
 
-function compileTemplate(template, id) {
+function compileTemplate(template, id, options) {
     const content = template.content
         || create('fragment', template.childNodes, template) ;
 
-    const renderers = compileContent(content, '#' + id);
+    const renderers = compileContent(content, '#' + id, options);
 
     return { id, content, renderers };
 }
@@ -136,7 +136,9 @@ export default function TemplateRenderer(template, element = template.parentElem
     const id = identify(template) ;
 
     const { content, renderers } = cache[id]
-        || (cache[id] = compileTemplate(template, id));
+        || (cache[id] = compileTemplate(template, id, {
+            sloppy: template.hasAttribute('nostrict')
+        }));
 
     this.element    = element;
     this.parameters = parameters;
diff --git a/modules/renderer/compile-attribute.js b/modules/renderer/compile-attribute.js
index 0066dc8..f8e1e32 100644
--- a/modules/renderer/compile-attribute.js
+++ b/modules/renderer/compile-attribute.js
@@ -17,6 +17,10 @@ compileAttributes(renderers, element, attribute, path, message)
 **/
 
 const constructors = {
+    class:          TokensRenderer,
+    value:          ValueRenderer,
+    checked:        CheckedRenderer,
+
     async:          BooleanRenderer,
     autofocus:      BooleanRenderer,
     autoplay:       BooleanRenderer,
@@ -38,19 +42,16 @@ const constructors = {
     reversed:       BooleanRenderer,
     selected:       BooleanRenderer,
     default:        BooleanRenderer,
-    checked:        CheckedRenderer,
-    class:          TokensRenderer,
-    value:          ValueRenderer,
 
     // Workaround attribute used in cases where ${} cannot be added directly to
     // HTML, such as in <tbody> or <tr>
-    'inner-html': function(path, name, source, message, element) {
+    'inner-html': function(path, name, source, message, options, element) {
         element.removeAttribute(name);
-        return new TextRenderer(path, 0, decode(source), message, element.childNodes[0]);
+        return new TextRenderer(path, 0, decode(source), message, options, element.childNodes[0]);
     }
 };
 
-export default function compileAttribute(renderers, element, attribute, path, message = '') {
+export default function compileAttribute(renderers, element, attribute, path, message = '', options) {
     const name   = attribute.localName;
     const source = attribute.value;
 
@@ -65,6 +66,6 @@ export default function compileAttribute(renderers, element, attribute, path, me
     }
 
     const Constructor = constructors[name] || AttributeRenderer;
-    renderers.push(new Constructor(path, name, source, message, element));
+    renderers.push(new Constructor(path, name, source, message, options, element));
     return renderers;
 }
diff --git a/modules/renderer/compile-node.js b/modules/renderer/compile-node.js
index a6c371b..5761d27 100644
--- a/modules/renderer/compile-node.js
+++ b/modules/renderer/compile-node.js
@@ -15,10 +15,10 @@ const assign = Object.assign;
 
 
 /*
-compileChildren(renderers, element, path, message)
+compileChildren(renderers, element, path, message, options)
 */
 
-function compileChildren(renderers, element, path, message = '') {
+function compileChildren(renderers, element, path, message = '', options) {
     // Children may mutate during compile, and we only want to compile
     // current children
     const children = Array.from(element.childNodes);
@@ -51,7 +51,7 @@ function compileChildren(renderers, element, path, message = '') {
                 }
             }
 
-            compileNode(renderers, children[n], path, message);
+            compileNode(renderers, children[n], path, message, options);
         }
     }
 
@@ -60,16 +60,16 @@ function compileChildren(renderers, element, path, message = '') {
 
 
 /*
-compileAttributes(renderers, node, path, message)
+compileAttributes(renderers, node, path, message, options)
 */
 
-function compileAttributes(renderers, element, path, message = '') {
+function compileAttributes(renderers, element, path, message = '', options) {
     // Attributes may be removed during parsing so copy the list before looping
     const attributes = Array.from(element.attributes);
     let n = -1, attribute;
 
     while (attribute = attributes[++n]) {
-        compileAttribute(renderers, element, attribute, path, message);
+        compileAttribute(renderers, element, attribute, path, message, options);
     }
 
     return renderers;
@@ -77,7 +77,7 @@ function compileAttributes(renderers, element, path, message = '') {
 
 
 /*
-compileElement(renderers, node, path, message)
+compileElement(renderers, node, path, message, options)
 */
 
 const compileElement = overload((renderers, element) => element.tagName.toLowerCase(), {
@@ -89,31 +89,31 @@ const compileElement = overload((renderers, element) => element.tagName.toLowerC
     // Do not parse the inner DOM of scripts
     'script':   compileAttributes,
 
-    'textarea': (renderers, element, path, message) => {
+    'textarea': (renderers, element, path, message, options) => {
         // A <textarea> does not have children, its textContent becomes its value
-        compileAttributes(renderers, element, path, message);
+        compileAttributes(renderers, element, path, message, options);
         compileAttribute(renderers, element, {
             localName: 'value',
             value:     element.textContent
-        }, path, message);
+        }, path, message, options);
         element.textContent = '';
         return renderers;
     },
 
-    'default': (renderers, element, path, message) => {
+    'default': (renderers, element, path, message, options) => {
         // Compiling children first means inner DOM to outer DOM, which allows
         // `<select>`, for example, to pick up the correct option value. If we
         // decide to change this order we should still make sure value attribute
         // is rendered after children for this reason.
-        compileChildren(renderers, element, path, message);
-        compileAttributes(renderers, element, path, message);
+        compileChildren(renderers, element, path, message, options);
+        compileAttributes(renderers, element, path, message, options);
         return renderers;
     }
 });
 
 
 /**
-compileNode(renderers, node, path, message)
+compileNode(renderers, node, path, message, options)
 **/
 
 const compileNode = overload((renderers, node) => toType(node), {
@@ -122,12 +122,12 @@ const compileNode = overload((renderers, node) => toType(node), {
     'document': compileChildren,
     'fragment': compileChildren,
 
-    'element': (renderers, element, path, message = '') => {
-        compileElement(renderers, element, (path ? path + pathSeparator : '') + indexOf(element), message = '');
+    'element': (renderers, element, path, message = '', options) => {
+        compileElement(renderers, element, (path ? path + pathSeparator : '') + indexOf(element), message = '', options);
         return renderers;
     },
 
-    'text': (renderers, node, path, message = '') => {
+    'text': (renderers, node, path, message = '', options) => {
         const string = node.nodeValue;
         if (!isLiteralString(string)) {
             return renderers;
@@ -135,7 +135,7 @@ const compileNode = overload((renderers, node) => toType(node), {
 
         const source = decode(string);
         if (window.DEBUG) {
-            parent = node.parentElement || { tagName: 'template' };
+            const parent = node.parentElement || { tagName: 'template' };
             message = truncate(64, '<'
                 + parent.tagName.toLowerCase() + '>'
                 + source.trim()
@@ -143,7 +143,7 @@ const compileNode = overload((renderers, node) => toType(node), {
                 + ' (' + message + ')' ;
         }
 
-        renderers.push(new TextRenderer(path, indexOf(node), source, message, node));
+        renderers.push(new TextRenderer(path, indexOf(node), source, message, options, node));
         return renderers;
     },
 
diff --git a/modules/renderer/compile.js b/modules/renderer/compile.js
index 368c46c..f807d01 100644
--- a/modules/renderer/compile.js
+++ b/modules/renderer/compile.js
@@ -1,34 +1,40 @@
 
 import compileFn  from '../../../fn/modules/compile.js';
-import { indent } from './constants.js';
 import { log }    from '../log.js';
-
+import { indent } from './constants.js';
 
 /**
-compile(source, scope, parameters, message)
+compile(source, scope, parameters, message, options)
 Compiles a literal template string to a function.
+
+(`options.sloppy = true` enables template rendering `with(data)`.)
 **/
 
 // Store render functions against their source
 export const compiled = {};
 
 // Last param, message, is for logging/throwing message
-export default function compile(source, scope, parameters, message = '') {
-    // Hey hey, we are not in 'strict mode' inside compiled functions so we CAN
-    // use with(), handy for accessing template variables of `data`. A small
-    // caveat though: accessing a not-defined property via `with` does not
-    // appear to be reflected in the `data` proxy access records where the
-    // property is not defined. This is bad, because that property won't be
-    // registered for rerendering.
-    const code = '\n' + indent + 'with(data) { return this.compose`' + source + '`; }\n';
+export default function compile(source, scope, parameters, message = '', options = {}) {
+    // Hey hey, we are not in 'strict mode' inside compiled functions by default
+    // so we CAN use with(), but let's make it opt-in for the moment at least.
+    // It's handy for accessing template variables of `data`. A small caveat
+    // though: accessing a not-defined property via `with` does not appear to be
+    // reflected in the `data` proxy access records where the property is not
+    // defined. This is bad, because that property won't be registered for
+    // rerendering. Also, arrays and other objects have their entire prototype
+    // chain exposed, so `map()`, `filter()` and stuff can be called on the
+    // array, which is just weird, and probably bad. If we are going to use
+    // sloppy mode it would probably be best to devise some way of enforcing the
+    // base data object to be a prototypeless object of some sort. Just a thought.
+    const code = '\n' +
+        indent + (options.sloppy ? 'with(data) {' : '"use strict";' ) + '\n' +
+        indent + 'return this.compose`' + source + '`;\n' +
+        (options.sloppy ? indent + '}\n' : '');
 
     // Return cached fn
-    // Todo: factor in keys from scope and parameters to make this key truly
-    // unique to all same instances of compiled function
-    const key = code;
-    if (compiled[key]) { return compiled[key]; }
+    if (compiled[code]) { return compiled[code]; }
 
-    // The DEBUG logging version, removed in built files
+    // The DEBUG logging version (removed in built files)
     if (window.DEBUG) {
         try {
             const t0 = window.performance.now();
@@ -42,7 +48,7 @@ export default function compile(source, scope, parameters, message = '') {
             // Log this compile
             log('compile', (t1 - t0).toPrecision(3) + 'ms – ' + message, undefined, undefined, 'yellow');
 
-            return compiled[key] = fn;
+            return compiled[code] = fn;
         }
         catch(e) {
             // Append message to error message
diff --git a/modules/renderer/renderer-attribute.js b/modules/renderer/renderer-attribute.js
index d24813d..cea5a98 100644
--- a/modules/renderer/renderer-attribute.js
+++ b/modules/renderer/renderer-attribute.js
@@ -8,7 +8,7 @@ const getDescriptor = Object.getOwnPropertyDescriptor;
 const getPrototype  = Object.getPrototypeOf;
 
 /**
-AttributeRenderer(path, name, source, element, message)
+AttributeRenderer(path, name, source, message, options, element)
 Constructs an object responsible for rendering to a plain text attribute.
 **/
 
@@ -52,7 +52,7 @@ function setAttribute(node, name, property, writable, value) {
     return 1;
 }
 
-export default function AttributeRenderer(path, name, source, message, element) {
+export default function AttributeRenderer(path, name, source, message, options, element) {
     Renderer.apply(this, arguments);
     this.property = name in names ?
         names[name] :
diff --git a/modules/renderer/renderer-boolean.js b/modules/renderer/renderer-boolean.js
index 3dfc272..d9e169c 100644
--- a/modules/renderer/renderer-boolean.js
+++ b/modules/renderer/renderer-boolean.js
@@ -31,7 +31,7 @@ export function setBooleanProperty(node, name, property, writable, value) {
     return 1;
 }
 
-export default function BooleanRenderer(path, name, source, message, element) {
+export default function BooleanRenderer(path, name, source, message, options, element) {
     AttributeRenderer.apply(this, arguments);
     // Avoid boolean defaulting to true
     element.removeAttribute(name);
diff --git a/modules/renderer/renderer-checked.js b/modules/renderer/renderer-checked.js
index 822bf38..faa1370 100644
--- a/modules/renderer/renderer-checked.js
+++ b/modules/renderer/renderer-checked.js
@@ -51,7 +51,7 @@ function setChecked(element, value, hasValueAttribute) {
     return 1;
 }
 
-export default function CheckedRenderer(path, name, source, message, element) {
+export default function CheckedRenderer(path, name, source, message, options, element) {
     AttributeRenderer.call(this, path, 'checked', source, message, element);
     // Flag whether element has a value attribute
     this.hasValue = isDefined(element.getAttribute('value'));
diff --git a/modules/renderer/renderer-text.js b/modules/renderer/renderer-text.js
index 26b8351..60ec854 100644
--- a/modules/renderer/renderer-text.js
+++ b/modules/renderer/renderer-text.js
@@ -9,7 +9,7 @@ that DOM after the text node.
 import isTextNode        from '../../../dom/modules/is-text-node.js';
 import include           from '../scope/include.js';
 import library           from '../scope-dom.js';
-import removeNodeRange       from '../dom/remove-node-range.js';
+import removeNodeRange   from '../dom/remove-node-range.js';
 import TemplateRenderer  from '../renderer-template.js';
 import print             from '../scope/print.js';
 import indexOf           from './index-of.js';
@@ -150,7 +150,7 @@ function updateDOM(first, last, objects) {
     return count + setNodeValue(last, nLast < 1 ? null : objects[nLast]);
 }
 
-export default function TextRenderer(path, index, source, message, node) {
+export default function TextRenderer(path, index, source, message, options, node) {
     Renderer.apply(this, arguments);
     // Insert text node. When renderer is created with cloned DOM, clone of
     // `node` is assigned to `renderer.first` and the clone of this new text
diff --git a/modules/renderer/renderer-tokens.js b/modules/renderer/renderer-tokens.js
index 4ba65da..f2cb024 100644
--- a/modules/renderer/renderer-tokens.js
+++ b/modules/renderer/renderer-tokens.js
@@ -44,7 +44,7 @@ function updateTokens(list, cached, tokens, count) {
     return count;
 }
 
-export default function TokensRenderer(path, name, source, message, element) {
+export default function TokensRenderer(path, name, source, message, options, element) {
     AttributeRenderer.apply(this, arguments);
     // Empty the tokens attribute until it is rendered to avoid code in
     // literals being interpreted as tokens.
diff --git a/modules/renderer/renderer-value.js b/modules/renderer/renderer-value.js
index d7839c3..6c95ae4 100644
--- a/modules/renderer/renderer-value.js
+++ b/modules/renderer/renderer-value.js
@@ -26,8 +26,8 @@ const compose = overload((value, type) => type, {
     'default':    composeString
 });
 
-export default function ValueRenderer(path, name, source, message, element) {
-    AttributeRenderer.call(this, path, 'value', source, message, element);
+export default function ValueRenderer(path, name, source, message, options, element) {
+    AttributeRenderer.call(this, path, 'value', source, message, options, element);
     // Remove value attribute to prevent unrendered value showing up
     // unexpectedly. This is not strictly necessary, as first render happens
     // before connection to the DOM.
diff --git a/modules/renderer/renderer.js b/modules/renderer/renderer.js
index f830581..101f581 100644
--- a/modules/renderer/renderer.js
+++ b/modules/renderer/renderer.js
@@ -193,8 +193,8 @@ function renderValue(renderer, args, values, n, object, isRender = false) {
 Renderer(path, name, source, message)
 */
 
-export default function Renderer(path, name, source, message = '') {
-    this.literal = compile(source, scope, this.parameterNames.join(', '), message);
+export default function Renderer(path, name, source, message = '', sloppy) {
+    this.literal = compile(source, scope, this.parameterNames.join(', '), message, sloppy);
     this.path    = path;
     this.name    = name;
     this.message = message;
diff --git a/modules/scope.js b/modules/scope.js
index 1f0e084..abc3405 100644
--- a/modules/scope.js
+++ b/modules/scope.js
@@ -43,6 +43,8 @@ import id                   from '../../fn/modules/id.js';
 import by                   from '../../fn/modules/by.js';
 import { clamp }            from '../../fn/modules/clamp.js';
 //import capture         from '../../fn/modules/capture.js';
+import deg                  from '../../fn/modules/to-deg.js';
+import rad                  from '../../fn/modules/to-rad.js';
 import equals               from '../../fn/modules/equals.js';
 import isDefined            from '../../fn/modules/is-defined.js';
 import matches              from '../../fn/modules/matches.js';
@@ -57,12 +59,11 @@ import last                 from '../../fn/modules/last.js';
 import normalise            from '../../fn/modules/normalise.js';
 import denormalise          from '../../fn/modules/denormalise.js';
 import overload             from '../../fn/modules/overload.js';
-import { Observer, notify } from '../../fn/observer/observer.js';
-import observe              from '../../fn/observer/observe.js';
 import Stream               from '../../fn/modules/stream.js';
 import ClockStream          from '../../fn/modules/stream/clock-stream.js';
 
-import paramify        from './scope/paramify.js';
+import Data, { observe } from './data.js';
+import paramify          from './scope/paramify.js';
 
 const library = {
     /**
@@ -79,6 +80,21 @@ const library = {
     ceil: Math.ceil,
 
     clamp,
+
+    /**
+    Data(object)
+
+    Returns the data proxy of `object`. Use this proxy to set properties in a
+    way that can be observed with `observe(path, object)`.
+
+    Normally this is not needed. It's for advanced use. The `data` object in the
+    scope of the template is already a data proxy and mutations to it are
+    observed by the template renderer.
+    **/
+
+    Data,
+
+    deg,
     denormalise,
 
     /** entries(object)
@@ -151,11 +167,6 @@ const library = {
     normalise,
     nothing,
 
-    /* notify(path, object)
-    Force observer to register a mutation at `path` of `object`.
-    */
-    //notify,
-
     /**
     observe(path, object)
     Returns a stream of values at `path` in `object`. Values are sent whenever
@@ -170,18 +181,6 @@ const library = {
     **/
     observe,
 
-    /**
-    Data(object)
-
-    Returns the data proxy of `object`. Use this proxy to set properties in a
-    way that can be observed with `observe(path, object)`.
-
-    Normally this is not needed. It's for advanced use. The `data` object in the
-    scope of the template is already a data proxy and mutations to it are
-    observed by the template renderer.
-    **/
-
-    Data: Observer,
     overload,
 
     /** round(value)
@@ -195,6 +194,7 @@ const library = {
     round: (value, n = 1) => Math.round(value / n) * n,
 
     paramify,
+    rad,
     remove,
     set,
     slugify,
diff --git a/modules/scope/include.js b/modules/scope/include.js
index 01bbe47..9a8ee8d 100644
--- a/modules/scope/include.js
+++ b/modules/scope/include.js
@@ -24,20 +24,20 @@ import getById          from '../dom/get-by-id.js';
 import requestTemplate  from '../request-template.js';
 import requestData      from '../request-data.js';
 
-function push(template, data, element, parameters) {
-    const renderer = new TemplateRenderer(template, element, parameters);
+function push(template, data, element, parameters, options) {
+    const renderer = new TemplateRenderer(template, element, parameters, options);
     renderer.push(data);
     return renderer;
 }
 
-function pipe(template, data, element, parameters) {
-    const renderer = new TemplateRenderer(template, element, parameters);
+function pipe(template, data, element, parameters, options) {
+    const renderer = new TemplateRenderer(template, element, parameters, options);
     data.each((data) => renderer.push(data));
     renderer.done(data);
     return renderer;
 }
 
-export default function include(src, data, element, parameters) {
+export default function include(src, data, element, parameters, options) {
     // Operate on target to be sure we are not registering gets in
     // parent renderer
     const object = getTarget(data);
@@ -50,14 +50,14 @@ export default function include(src, data, element, parameters) {
             null;
 
         if (dataRequest) {
-            return dataRequest.then((data) => push(template, data, element, parameters));
+            return dataRequest.then((data) => push(template, data, element, parameters, options));
         }
 
         if (object && object.pipe) {
-            return pipe(template, object, element, parameters);
+            return pipe(template, object, element, parameters, options);
         }
 
-        return push(template, object || {}, element, parameters);
+        return push(template, object || {}, element, parameters, options);
     }
 
     // Template is external to document
@@ -69,7 +69,7 @@ export default function include(src, data, element, parameters) {
     if (object && object.pipe) {
         return templateRequest
         .then((template) =>
-            pipe(template, data, element, parameters)
+            pipe(template, data, element, parameters, options)
         );
     }