About Reef

Browser Compatibility

Reef works in all modern browsers. That means:

The latest versions of Edge, Chrome, Firefox, and Safari.
Mobile Safari, Chrome, and Firefox on iOS.
WebView, Chrome, and Firefox for Android.

If you need to support older browsers, you’ll need to transpile your code into ES5 with BabelJS.

License

The code is available under the MIT License.

Changelog

You can find all available versions under releases.

Version 13 (current version) updates naming and brings rendering improvements.

The store() function has been renamed signal() (and the reef:store event has been renamed reef:signal) to better align with industry norms.
The reef:signal event passes along the name and value of the updated property rather than the entire data object.
The setter() function has been renamed store() to more accurately describe what it is and does.
The listeners() function has been removed, as it was deprecated in v12.
When using on* event listeners, you can no longer pass in arguments. This was done for XSS attack/security reasons.
A new focus() function was added to improve accessibility when rendering UIs.
Changes were made to the render() function’s DOM diffing to improve performance.
A [reef-ignore] attribute was added that can be used to exclude specific template elements from DOM diffing after initial render.
Added support for a [key] attribute to more easily ID list elements for more efficient DOM diffing.

Version 12 shifts to small, decoupled utility functions.

Removed new Reef() constructor and component-focused API.
Added three small utility functions: store(), render(), and component().
Focused on more vanilla JS oriented developer experience.
Removed support for AMD modules.

Version 11 improves the developer experience.

Removed getters (which were causing confusion).
Removed Reef.clone(), Reef.emit(), and Reef.err() methods.
Updated nested components for easier use.
Added ability to attach event listeners directly to elements in templates.
Updated dynamic and default form values to use @ and # for better ergonomics.

Version 10 brings more layout control.

Template data is allowed to contain HTML by default.
The sanitization engine has been updated to be more robust.
on* attributes are no longer allowed on elements.
Components can now use both a shared store and local data.

Version 9 reduces under-the-hood complexity.

Large refactor to reduce abstractions for improved performance and reduced file size.
Removed all router options.

Version 8 brings more predictability and convenience when building interactive UIs.

Added reef-checked, reef-selected, and reef-value attributes (and reef-default-* versions) for more predictable form field behavior.
Added new helper methods for more accurate type checking and throwing errors.
Improved DOM diffing under-the-hood.
Fixed router issues with module bundlers.
Improved control for route titles.
Dropped legacy browser support.

Version 7 introduces new tools for managing more complex applications.

Added new Reef.Store() data store constructor for reactive shared state.
Added getter and setter functions for more fine-grained control over how data flows in and out of components.
Improved process for attaching nested components to parent components.
Removed the clone() method on individual components (the global Reef.clone() method still exists).

Version 6 completely changes how data reactivity works.

Component data is now directly reactive.
The setData() and getData() methods (previously used for reactivity) have been removed.
You can get an immutable copy of your data with the clone() method.
Added an emit() method for emitting custom events.
IE support now requires polyfills or transpiling.

Version 5 adds new build system and filename structure,

Specific named versions for ES modules, AMD, and CommonJS.
Default build is browser-only.
ES modules now natively supported.

Version 4 adds better performance and XSS protection.

Data is once again automatically encoded to help protect you from cross-site scripting (XSS) attacks.
Changes to diffing and rendering reduce reflows and improve performance.
Support pushed back even further to IE9.
Deprecated: Custom sanitizer methods were removed in favor of built-in, automated HTML encoding. You can still add custom sanitization within template functions.

Version 3 removes built-in sanitization.

Automatic sanitization has been removed. HTML templates are unsanitized by default.
Two new hooks to add sanitization to your components have been added. This provides more developer flexibility and keeps Reef as lightweight as possible.

Version 2 adds a better sanitizing engine and markup support.

DOMPurify is now the template sanitizing engine.
The attribute exceptions feature has been removed in favor of DOMPurify’s configuration options. The addAttributes() and removeAttributes() methods no longer exist.
Reef now offers a smaller unsafe version for UIs that don’t use any third-party or user-provided content. It does not sanitize templates before rendering, so use with caution.
SVGs are now properly supported and will render correctly.

Version 1 removed polyfill dependencies.

All polyfills have been removed and are no longer needed. This is a breaking change, as the .polyfill versions of scripts no longer exist.

Version 0.2 introduced some big new features.

Data reactivity and automatically updating UI
Support for nested components
Shared state support (with data reactivity!)
Custom attribute exceptions for your templates

Hi, I'm Chris Ferdinandi. 👋

I help people learn vanilla JavaScript, and I believe there’s a simpler, more resilient way to make things for the web.

I create courses and workshops on modern front-end web development. My developer tips newsletter is read by over 14k developers each weekday.

Have a question? Get in touch.

Get Daily Developer Tips

Hate the complexity of modern front‑end web development? I send out a short email each weekday on how to build a simpler, more resilient web. Join over 14k others.