---
tags: brew-js
---
# Quick reference
## List of methods
#### Built-in methods
| Category | Methods |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Initialization | [beforeInit](/SsjQWjEmSyuIDQOxqdrw0w#appbeforeInit) |
| Click actions | [addAsyncAction](/m9kIlMQGTcOeUn7kQhY-Jg#addAsyncAction) |
| Layout | [openFlyout](/MxAtAeTISDqLMbKXy6cx2Q#openFlyout), [closeFlyout](/MxAtAeTISDqLMbKXy6cx2Q#closeFlyout) |
| Animation | [animateIn](/wwn4gahqSkqJRcMyzBrPPA#animateIn), [animateOut](/wwn4gahqSkqJRcMyzBrPPA#animateOut), [addAnimateIn](/wwn4gahqSkqJRcMyzBrPPA#addAnimateIn), [addAnimateOut](/wwn4gahqSkqJRcMyzBrPPA#addAnimateOut) |
| Feature detection | [addDetect](/eoX-D3mESaW7b4TTCTXW2Q#appdetect), [detect](/eoX-D3mESaW7b4TTCTXW2Q#addDetect) |
| Extension | addExtension |
#### Extension methods
| Category | Methods |
| ----------- | ------------------------------------------------------------------------------------------- |
| Template | [getVar](/5-f7XDknRbW-QGB5HMuimQ#getVar), [setVar](/5-f7XDknRbW-QGB5HMuimQ#setVar), [declareVar](/5-f7XDknRbW-QGB5HMuimQ#declareVar), [matchElement](#appmatchElement) |
| Router | |
| HTML Router | [beforePageEnter](#appbeforePageEnter), [matchPath](#appmatchPath), isElementActive |
#### Util methods
| Category | Methods |
| -------- | ---------------------------------------------------------------------------------------------- |
| DOM | getAttrValues, setAttr, copyAttr, getFormValues |
| Resource | api, getJSON, loadScript, addStyleSheet, preloadImages |
| Path | setBaseUrl, combinePath, normalizePath, withBaseUrl, toAbsoluteUrl, toRelativeUrl, isSubPathOf |
| Browser | getQueryParam, getCookie, setCookie, deleteCookie, cookie |
## List of events
#### Built-in events
| Category | Events |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| Initialization | [ready](/SsjQWjEmSyuIDQOxqdrw0w#ready-event) |
| Flyouts | [flyoutshow](/MxAtAeTISDqLMbKXy6cx2Q#flyoutshow-event), [flyouthide](/MxAtAeTISDqLMbKXy6cx2Q#flyouthide-event) |
| Animation | [animationstart](/wwn4gahqSkqJRcMyzBrPPA#animationstart-event), [animationcomplete](/wwn4gahqSkqJRcMyzBrPPA#animationcomplete-event) |
#### Extension events
| Category | Events |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Router | [navigate](/5mvQVUziSJCcJ3E0ARGyjQ#navigate-event), [beforepageload](/5mvQVUziSJCcJ3E0ARGyjQ#beforepageload-event) |
| HTML Router | [pageenter](/bNpxLEQBTdOE1UTTOQZ7HA#pageenter-event), [pageleave](/bNpxLEQBTdOE1UTTOQZ7HA#pageleave-event) |
| Template | [mounted](/5gESKkd7RCyu6-OBbcUzwg#mounted-event), [statechange](/5-f7XDknRbW-QGB5HMuimQ#statechange-event), [domchange](/Jxc5O-zMRpyyAzgYb31sFw#domchange-event) |
| Form | [validate](/v_-SoqTzSdSYEO1YvQ2Klw#validate-event), [reset](/v_-SoqTzSdSYEO1YvQ2Klw#reset-event), [preventLeave](/v_-SoqTzSdSYEO1YvQ2Klw#preventLeave-event) |
| Viewport | [orientationchange](/zhmMz3OyRSKi92kht-nl8Q#orientationchange-event), [resize](/zhmMz3OyRSKi92kht-nl8Q#resize-event) |
| Login | [login](/R6dvbFf5RUesaiNf-iis_g#login-event), [logout](/R6dvbFf5RUesaiNf-iis_g#logout-event) |
## List of directives
#### Interactions
| Category | Directives |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Click actions | [data-href](/m9kIlMQGTcOeUn7kQhY-Jg#data-href), [toggle](/m9kIlMQGTcOeUn7kQhY-Jg#toggleselector), [toggle-class](/m9kIlMQGTcOeUn7kQhY-Jg#toggle-class), [toggle-class-for](/m9kIlMQGTcOeUn7kQhY-Jg#toggle-class-for), [context-method](/m9kIlMQGTcOeUn7kQhY-Jg#context-method), [context-form](/m9kIlMQGTcOeUn7kQhY-Jg#context-form), [validate](/m9kIlMQGTcOeUn7kQhY-Jg#validate) |
| Flyouts | [is-flyout](/MxAtAeTISDqLMbKXy6cx2Q#is-flyout), [is-modal](/MxAtAeTISDqLMbKXy6cx2Q#is-modal) |
| Animation | [animate-in](/wwn4gahqSkqJRcMyzBrPPA#animate-in), [animate-out](/wwn4gahqSkqJRcMyzBrPPA#animate-out), [animate-on-statechange](/wwn4gahqSkqJRcMyzBrPPA#animate-on-statechange), [animate-sequence](/wwn4gahqSkqJRcMyzBrPPA#animate-sequence), [animate-sequence-reverse](/wwn4gahqSkqJRcMyzBrPPA#animate-sequence-reverse) |
#### Template
| Category | Directives |
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Variables | [var](/5-f7XDknRbW-QGB5HMuimQ#var-key1-value1--), [auto-var](/5-f7XDknRbW-QGB5HMuimQ#auto-var-key1-value1--), [set-var](/5-f7XDknRbW-QGB5HMuimQ#set-var-key1-value1--), [error-scope](/5-f7XDknRbW-QGB5HMuimQ#error-scope) |
| Rendering | [template](/Jxc5O-zMRpyyAzgYb31sFw#template), [set-class](/Jxc5O-zMRpyyAzgYb31sFw#set-classobject), [set-style](/Jxc5O-zMRpyyAzgYb31sFw#set-styleobject) |
| Transformation | [apply-template](/vcdpPiz-Rg6oED5zMyeKjw#apply-templatename), [foreach](/vcdpPiz-Rg6oED5zMyeKjw#foreachexpression) |
| Conditions | [switch](/1RHWmC8NQUePrPYAmmQj0g#switchname), [match-\*](/1RHWmC8NQUePrPYAmmQj0g#match-expression) |
| Template | [form-var](/v_-SoqTzSdSYEO1YvQ2Klw#form-var) |
#### Extensions
| Category | Directives |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| HTML Router | [switch](/bNpxLEQBTdOE1UTTOQZ7HA#switch), [match-path](/bNpxLEQBTdOE1UTTOQZ7HA#match-path), [default](/bNpxLEQBTdOE1UTTOQZ7HA#default) |
Sign in with Wallet
Connect another wallet