Type an apostrophe ( ' ) to see all the wishes

*You can also click/tap the lamp image above.

Wishes made: {{wishesMade}}

GenieJS was built to simulate the behavior in apps like Alfred.
Essentially, you register actions with keywords and then you can find those actions via a keyword search.
For info on the vernacular of wishes and magic words, see the project on GitHub.
There's also an AngularJS module with a few useful directives called uxGenie on GitHub.
All tests are written using Mocha. Go here to run them.

See the api docs here

Note: If you're on a mobile device, you will not be able to use this demo. Instead you can watch this demo video. Please also visit the GitHub project.

Do you see a problem? Report an issue!

Demo

Press Ctrl+Space to open the Genie Search Box
Optionally type an apostrophe (') to show all wishes (about this feature)
Type anything to filter the wishes
Mouse over or arrow down to the wish you wish and click/press return
Notice how genie learns the wishes you make and organizes them more logically the more you use it
Change the lamp's styles below

Change Lamp Styles

Light
Dark Large
Small Fast
Slow Default Template
Custom Template

How to use Genie

Both examples below will create a wish which will alert "Consider them done!" to the user.
Go ahead and give it a try! Copy the JavaScript and paste it in your console then make the wish!

JavaScript

genie({
  magicWords: 'Do my dishes',
  action: function doDishes() {
    alert('Consider them done!');
  }
});

AngularJS Directive

<button ng-click="doDishes()" genie-wish>Do my dishes</button>

That's it! It's pretty simple! Obviously, you need to include the dependency on your page and there is a lot more to it if you want more control.
Head over to the GitHub project to see more documentation on the customization you can do.

Genie Workshop

The best way to learn how to use Genie in an interactive way. Checkout the Genie Workshop.

Want Genie Everywhere?

Try the Chrome Extension

This is a custom template! Type "Default" to go back
You can customize the dom used for the lamp. Type "uxGenie" to see the docs.

Wish "{{lamp.focusedWish.data.uxGenie.displayText || lamp.focusedWish.magicWords[0]}}" Data:
Total Times Executed: {{lamp.focusedWish.data.timesMade.total}}
Magic words executed with:

{{key}}: {{value}}

Don't be a stranger