Need help with sqwidget?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

130 Stars 19 Forks 572 Commits 3 Opened issues


JavaScript widget toolkit, for the creation and distribution of third-party web widgets.

Services available


Need anything else?

Contributors list

No Data


Sqwidget is a framework for adding components to a page in a way that ensures they are self contained and namespaced. It is great for buliding third party widgets.

A typical embed code looks like the following:


  1. Easy configurations and customisations: An embed code can have any number of optional parameters that are passed to the constructer your widget.
  2. Sandboxed JavaScript: All your JS is completely sandboxed from the rest of page not allowing you to leak any globals by default. It uses RequireJS to call your widget.
  3. Widgets are RequireJS modules.
  4. Yeoman Generator: A Yeoman generator allows you to scaffold your widget very quickly. The scaffold includes some libraries that we've found great for building high-performance widgets:
    1. RactiveJS
    2. Lodash
    3. RequireJS

The only hard dependency is RequireJS, since sqwidget expects to find a RequireJS module to initialise.

Getting Started

The easiest way to get started with using Sqwidget in your project is to use the Yeoman generator that builds a project layout for you.

First, install Yeoman using:

$ npm install -g yo

Next, install the sqwidget-generator:

$ npm install -g generator-sqwidget

Finally, initiate your project in a new directory where you want to create your widget:

$ mkdir my-awesome-project
$ cd my-awesome-project
$ yo sqwidget

This will create your project for you and install all the dependencies. See your widget in action by doing:

$ grunt

The Basic Widget

At the minimum, your widget will have a

which is a RequireJS module. This module should return a function that accepts one
parameter (object).


define([], function() {
    return function(options) {
        // DOM element to append your content is available at options.el
        // Config params are available at options.config

Configuration and Custom Parameters

The embed code can also accept any number of parameters like:

All parameters that begin with

will be passed to the function called in your widget during initialisation.

In this case, the

object from above will have a
object that looks like:
options = {
    el: ,
    config = {
        "title": "My Title",
        "user": "johndoe",
        "age": "20"


Building sqwidget

npm install grunt-cli -g
npm install bower -g
bower install
npm install
grunt test

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.