About
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 Safari.
- 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 8 (current version) brings more predictability and convenience when building interactive UIs.
- Added
reef-checked
,reef-selected
, andreef-value
attributes (andreef-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
andsetter
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 globalReef.clone()
method still exists).
Version 6 completely changes how data reactivity works.
- Component data is now directly reactive.
- The
setData()
andgetData()
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()
andremoveAttributes()
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 believe there’s a simpler, more resilient way to make things for the web.
I create vanilla JS pocket guides and video courses, run a project-based training program, and host the vanilla JS podcast. My developer tips newsletter is read by over 11,200 developers each weekday.
If you have a question about something or need JavaScript help, get in touch.
Get Daily Developer Tips
I send out a short email each weekday with code snippets, tools, techniques, and interesting stuff from around the web. Join 11,200+ daily subscribers.