Rapid Prototype Advice


I am finding it difficult to prototype with Aurelia using online tools like Codepen and JSFiddle. I have been looking for low effort solutions that will allow me to simply include Aurelia’s binding engine and apply a viewmodel to a simple view.

This is relatively easy to achieve with every other framework so I am hoping that there is an easy way to do this with Aurelia:

Any advice would be greatly appreciated!

Getting Aurelia working in CodePen

Probably the easiest way to do this at the moment is using this GistRun created by @jdanyow. https://gist.run/?id=1ae985e6c943885496e8&sha=c12282e3d8b25301aaf7668a32d2f9197f9204fc.

It comes with a simple app view and view-model that allows you to play with Aurelia’s binding and so on. I’ve not tried to get this working with Codepen, but I imagine you should be able to simply copy the contents of the index.html file to get started.


The only problem is that Aurelia’s libraries are not available in global module format so a module loader needs to be included and configured.

Once that is set up the API is similar to other frameworks: here is an example following Vue’s example.


I wrote sample code with codepen with reference to the benchmark code of js perfs which is used in the example showing the high performance of aurelia.

important point

  • use loader is requirejs.
  • I am importing modules related to all aurelia from cloudflare cdn.
  • aurelia cli are also used, it requires a text module
  • If you type in the text box and press the hello button, headline changes.
  • Press the world button to add a random number from 1 to 100 in the downward direction.
  • Press the remove button to delete the values added downward one by one.


YAY!!! This is exactly what I needed!


Thanks. This is exactly what I was looking for today. I needed a single html file with that I could send around via email, but I could use already some basic data binding.

And believe me or not, even though I am an aurelia fan, I learned about vuejs just because of this. :slight_smile:


Hello all, I found this thread after posting this other one. I can’t seem to get that example to work on Codepen. Any ideas?


If you want to use Typescript then this can be useful.