options - an object that can take the following properties:

debug - if set to true turns on the verbose logger. Useful during development, should be set to false in production.

Returns a new fig instance


fig#use(component[, name])

Registers the specified component, optionally with the specified name.

component is usually a result of running a .fig component file through the fig-compiler, you don't really have to worry about it but it is possible to write a component manually using an ordinary object.

component can be an object with the following keys:

template - required - function that should take a locals object as an argument and return plain HTML.

name - name of the component, should be in kebab-case. Required if fig#use doesn't receive a name parameter.

style - string of plain css markup.

default - function that gets called on every re-render with the following parameters (in order of listing):

view - empty object, ready to be populated with custom keys. Gets passed to the template as an argument.

opts - state object if the component is mounted as the root component, otherwise an opts object.

emit - event emitter function, same as fig#emit

The component can also be a string, containing the URL from which fig would pull the component into the registry. See the fig-compiler's docs for detailed usage.

fig#on(domain, listener)

Registers an event listener on the given domain. domain can contain a wildcard, which matches 0 or more characters under itself.

fig#once(domain, listener)

Same as fig#on, except that the listener only gets called once. Technology!

fig#off(domain[, listener])

Removes an event listener on the given domain. If listener is not specified, ALL listeners listening to domain get removed!

fig#emit(domain[, payload])

emits an event of the given domain, optionally with the given payload. payload can be any object or any primitive value.

fig#mount(element, componentName)

Replaces the element with a rendered component with the given componentName.

element can either be a string or an HTMLElement.


Forces a re-render of the view in your app. Useful pretty much never.



Object containing the instance's data. See the guide for detailed usage.


An object containing references of elements skipped by the skip mixin. See the guide for detailed usage.

Internal properties

Marked internal by both the underscore prefixes and by the header above this paragraph, these should not be used in any "real" code. Documented here for debugging and contributors' needs.


Reference to the root element the instance is mounted to. Null before mount.


Contains the instance's event bus, with a listeners array as a property. All of its prototype methods are exported on the main instance object. E.g. app._bus.on === app.on.


Fig instance's method calls are "stacked" onto this object, in order to provide a synchronous-looking-possibly-async api, especially useful useful when pulling components in fig#use from a remote source.


The instance's component registry, a Map object containing all of the components registered with fig#use.


An ID used to differentiate the instance from other instances on the page. 8 character long string.


Contains the options object the instance was initialized merged with fig's default options object.