What is svelte?

svelte is a lightweight modern JavaScript library (4.57KB minified) intended for use on projects where legacy browser support is not necessary.

It uses modern JavaScript (querySelectorAll, classList, matchesSelector) to help make it as lightweight as possible and therefore only works on the latest version of modern browsers E.g. Chrome, Firefox, Opera, IE10+.

Quick Example

If you have used other JavaScript libraries like Zepto or jQuery most functions will be familiar to you. For example, to set the text of an element, you would write:

$('.hello').text("Hello svelte");

API

  • $(selector, context)
  • each(callback)
  • find(selector)
  • css(property, value)
  • hide()
  • show()
  • toggle()
  • addClass(className)
  • removeClass(className)
  • toggleClass(className)
  • hasClass(className)
  • on(name, callback)
  • off(name, callback)
  • focus()
  • blur()
  • trigger(eventName, detail)
  • next()
  • first()
  • last()
  • parent()
  • children()
  • append(position, html)
  • text(textToAdd)
  • html(html)
  • outerHTML(html)
  • empty()
  • clone()
  • remove()
  • attr(name, (value))
  • removeAttr(name)
  • val((value))
  • length()
  • height()
  • width()
  • position()
  • matches(selector)

View JSDoc generated documention.

Custom Functions

You can easily add a custom function to svelte by adding to $.fn.

$.fn.cool = function() {
    return this.each(function(el) {
        el.textContent = 'Cool';
    });
}

$('.says-cool').cool();

Ajax

The svelte ajax function was removed in version 1.4.0. Instead it is recommended that you use the fetch api. There is a version of svelte bundled with a fetch and polyfill polyfill svelte.fetch.min.js.

fetch('/test.html')
.then(function(response) {
    return response.text()
}).then(function(body) {
    document.body.innerHTML = body
})

IE9

If you need to support IE9, you will need to use a pollyfill for ClassList like this one and put it somewhere before svelte is included on the page.

<!--[if IE 9]>
    <script src="js/classlist.js"></script>
<![endif]-->

Get Involved

Contributions to the project are welcome.

The svelte project is hosted on github.