Contact
Icon for product Alfie

Alfie

An online code editor and visual debugger which automatically selects and displays examples of values flowing through your code as you type it

online IDE
live programming
runtime analysis
debugging/QA
View online

Features

Icon for data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NiIgdmlld0JveD0iMCAwIDY0IDY2Ij4KICAgIDxwYXRoIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSIjNkZEMDhEIiBzdHJva2Utd2lkdGg9IjEuNiIgZD0iTTYyLjIwOCA0MC42OWwtNS41NjItMy4xNzRhMjQuNTY2IDI0LjU2NiAwIDAgMCAwLTkuMDU4bDUuNTYyLTMuMTc0Yy42NC0uMzYxLjkyNy0xLjExLjcxOC0xLjgwN2EzMi4wNSAzMi4wNSAwIDAgMC03LjE0Mi0xMi4yMDYgMS41ODUgMS41ODUgMCAwIDAtMS45MzMtLjI5N2wtNS41NjIgMy4xNzRhMjQuNzEzIDI0LjcxMyAwIDAgMC03Ljk0LTQuNTI4VjMuMjg0YTEuNTUgMS41NSAwIDAgMC0xLjIyNy0xLjUxIDMzLjIxIDMzLjIxIDAgMCAwLTE0LjI1OCAwIDEuNTUgMS41NSAwIDAgMC0xLjIyOCAxLjUxdjYuMzQ4YTI1LjQ5NyAyNS40OTcgMCAwIDAtNy45MzkgNC41M2wtNS41NS0zLjE3NWExLjU2NSAxLjU2NSAwIDAgMC0xLjkzMi4yOTdBMzEuODU2IDMxLjg1NiAwIDAgMCAxLjA3MyAyMy40OWExLjUzNiAxLjUzNiAwIDAgMCAuNzE4IDEuODA3bDUuNTYyIDMuMTc0YTI0LjU2NyAyNC41NjcgMCAwIDAgMCA5LjA1OGwtNS41NjIgMy4xNzRhMS41NTEgMS41NTEgMCAwIDAtLjcxOCAxLjgwNyAzMi4wNDkgMzIuMDQ5IDAgMCAwIDcuMTQyIDEyLjIwNiAxLjU4NSAxLjU4NSAwIDAgMCAxLjkzMy4yOTdsNS41NjItMy4xNzRhMjQuNzE1IDI0LjcxNSAwIDAgMCA3Ljk0IDQuNTI5djYuMzQ4YzAgLjcyMy41MDggMS4zNTUgMS4yMjcgMS41MWEzMy4yMDcgMzMuMjA3IDAgMCAwIDE0LjI1OCAwIDEuNTUgMS41NSAwIDAgMCAxLjIyOC0xLjUxdi02LjM0OGEyNS40OTUgMjUuNDk1IDAgMCAwIDcuOTM5LTQuNTNsNS41NjIgMy4xNzVjLjY0LjM2MSAxLjQzNy4yNDUgMS45MzMtLjI5N2EzMS44NTYgMzEuODU2IDAgMCAwIDcuMTQyLTEyLjIwNmMuMTk2LS43MS0uMDkxLTEuNDU4LS43My0xLjgyek0zMS41IDQzQzI1LjcxMiA0MyAyMSAzOC4yODggMjEgMzIuNVMyNS43MTIgMjIgMzEuNSAyMiA0MiAyNi43MTIgNDIgMzIuNSAzNy4yODggNDMgMzEuNSA0M3oiLz4KPC9zdmc+Cg==
Runtime tracing via robust transpilation
Icon for data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDcyIDY0Ij4KICAgIDxwYXRoIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSIjRkZENDcyIiBzdHJva2Utd2lkdGg9IjEuNiIgZD0iTTY1LjE2NyAxSDYuODMzQzMuNjEzIDEgMSAzLjYwNCAxIDYuODEzdjM4Ljc1YzAgMy4yMDggMi42MTMgNS44MTIgNS44MzMgNS44MTJoMjMuMzM0bC0xLjk0NSA1LjgxM2gtOC43NWEyLjkwNSAyLjkwNSAwIDAgMC0yLjkxNiAyLjkwNmMwIDEuNjEgMS4zIDIuOTA2IDIuOTE2IDIuOTA2aDMzLjA1NmEyLjkwNSAyLjkwNSAwIDAgMCAyLjkxNi0yLjkwNmMwLTEuNjEtMS4zLTIuOTA3LTIuOTE2LTIuOTA3aC04Ljc1bC0xLjk0NS01LjgxMmgyMy4zMzRjMy4yMiAwIDUuODMzLTIuNjA0IDUuODMzLTUuODEzVjYuODEzQzcxIDMuNjA0IDY4LjM4NyAxIDY1LjE2NyAxem0tMS45NDUgNDIuNjI1SDguNzc4VjguNzVoNTQuNDQ0djM0Ljg3NXoiLz4KPC9zdmc+Cg==
Information displayed in an intuitive way
Icon for data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4OSIgaGVpZ2h0PSI2OCIgdmlld0JveD0iMCAwIDg5IDY4Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCA0KSI+CiAgICAgICAgPHBhdGggZmlsbC1ydWxlPSJub256ZXJvIiBzdHJva2U9IiNGRkRBODYiIHN0cm9rZS13aWR0aD0iMS42IiBkPSJNNjYuNTQgMjAuMjhhLjk5Mi45OTIgMCAwIDAtMS4zOSAwTDQzLjE1OCA0Mi4wMzdsLTEuMDM3IDkuMjQ2Yy0uMTQgMS4yMzUuOTE3IDIuMjgxIDIuMTY1IDIuMTQybDkuMzQ1LTEuMDI3IDIxLjk5MS0yMS43NThhLjk2Ny45NjcgMCAwIDAgMC0xLjM3NWwtOS4wODItOC45ODd6bTE2LjMxMi0yLjI4MmwtNC45MTQtNC44NjJjLTEuNTMtMS41MTUtNC4wMTctMS41MTUtNS41NTggMGwtMy41NjUgMy41MjdhLjk2Ny45NjcgMCAwIDAgMCAxLjM3NWw5LjA4MyA4Ljk4NmEuOTkyLjk5MiAwIDAgMCAxLjM5IDBsMy41NjQtMy41MjdhMy44NjcgMy44NjcgMCAwIDAgMC01LjV6TTY0LjY2NyA0Ni40ODJjMC0uMzIuMTMtLjYxOC4zNTItLjg0N2w0LjAyOC0zLjk4NWMuNzY1LS43NDggMi4wNjQtLjIyIDIuMDY0Ljg0NnYxNS43MjJjMCAyLjY0LTIuMTY1IDQuNzgyLTQuODMzIDQuNzgySDMwLjgzM0MyOC4xNjUgNjMgMjYgNjAuODU4IDI2IDU4LjIxOHYtMzUuMDdjMC0yLjY0IDIuMTY1LTQuNzgyIDQuODMzLTQuNzgyaDI4Ljc3OWMxLjA3NyAwIDEuNjIxIDEuMjg2Ljg1NiAyLjA0M2wtNC4wMjggMy45ODVjLS4yMzIuMjE5LS41MzQuMzQ5LS44NTYuMzQ5aC0yMy4xNHYzMS44OGgzMi4yMjNWNDYuNDgzeiIvPgogICAgICAgIDxjaXJjbGUgY3g9IjMyLjUiIGN5PSIxOS41IiByPSI3LjUiIGZpbGw9IiNGRkYiLz4KICAgICAgICA8cGF0aCBmaWxsPSIjRkZGIiBkPSJNMjAgMTJoMjV2MjJIMjB6Ii8+CiAgICAgICAgPHBhdGggZmlsbC1ydWxlPSJub256ZXJvIiBzdHJva2U9IiNGRkQ1NzYiIHN0cm9rZS13aWR0aD0iMy4yIiBkPSJNNDIuMTczIDExLjczN2wuMDA0LjAwN0E0LjI0IDQuMjQgMCAwIDEgNDIuNiAxMy41YzAgLjU1My0uMTcxIDEuMjYyLS40MjcgMS43NjNDMzcuOTUyIDIzLjM5OSAyOS42NjcgMjguNiAyMC41IDI4LjZjLTkuMTY4IDAtMTcuNDUtNS4xOTgtMjEuNjc3LTEzLjM0NEE0LjI0IDQuMjQgMCAwIDEtMS42IDEzLjVjMC0uNTUzLjE3MS0xLjI2Mi40MjctMS43NjNDMy4wNDggMy42MDEgMTEuMzMzLTEuNiAyMC41LTEuNmM5LjE2OCAwIDE3LjQ1IDUuMTk4IDIxLjY3MyAxMy4zMzd6bS0yLjg0NCAxLjQ2N3YtLjAwMWwuMDAzLjAwN2EyMi45MzcgMjIuOTM3IDAgMCAwLS4wMDMtLjAwNnpNMjAuODc0IDIxLjY1bC4xNTQtLjAwMWM0LjcxNS0uMDc2IDguNTAyLTMuODczIDguNTAyLTguNTA2bC0uMDAyLS4xNkMyOS40NTIgOC4zNDQgMjUuNjA1IDQuNiAyMC44OCA0LjZjLTQuNzggMC04LjY1IDMuODI0LTguNjUgOC41MjUgMCA0LjcgMy44NjggOC41MjIgOC42NDQgOC41MjV6bS0uNDEyLTE2LjVoLjAzOGM0LjY1MSAwIDguNDMzIDMuNzM2IDguNDMzIDguMzUgMCA0LjYxNC0zLjc4MiA4LjM1LTguNDMzIDguMzVzLTguNDMzLTMuNzM2LTguNDMzLTguMzVjMC0uNjQuMTI2LTEuNTc1LjI5Ni0yLjE5MmwuNjEyLTIuMjMgMS44NzEgMS4zNmMuMjI1LjE2My44MDIuMzUgMS4wODMuMzUgMS4wMDUgMCAxLjgxMy0uNzk5IDEuODEzLTEuNzcyIDAtLjI2Ni0uMTg2LS44MjctLjM0Ny0xLjA0M2wtMS4zODEtMS44NTUgMi4yMjItLjYzOWE5LjgwNyA5LjgwNyAwIDAgMSAyLjIyNi0uMzI5eiIvPgogICAgPC9nPgo8L3N2Zz4K
Efficient live updates on edit
Icon for data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NyIgaGVpZ2h0PSI2NyIgdmlld0JveD0iMCAwIDY3IDY3Ij4KICAgIDxwYXRoIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSIjRjQ4NDYwIiBzdHJva2Utd2lkdGg9IjEuNiIgZD0iTTYzLjk2IDE1LjIxTDUxLjc5IDMuMDRDNTAuNjY0IDEuOTE0IDQ4LjQ1OCAxIDQ2Ljg2NSAxaC0zOC45QTYuOTY0IDYuOTY0IDAgMCAwIDEgNy45NjR2NTEuMDcyQTYuOTY0IDYuOTY0IDAgMCAwIDcuOTY0IDY2aDUxLjA3MkE2Ljk2NCA2Ljk2NCAwIDAgMCA2NiA1OS4wMzZWMjAuMTM1YzAtMS41OTMtLjkxNC0zLjc5OS0yLjA0LTQuOTI1ek0zMy41IDU3YTkuNSA5LjUgMCAxIDEgMC0xOSA5LjUgOS41IDAgMCAxIDAgMTl6TTQ3IDEyLjI5OHYxNC45MmMwIC45ODQtLjc3NyAxLjc4Mi0xLjczNCAxLjc4MkgxMS43MzRDMTAuNzc3IDI5IDEwIDI4LjIwMiAxMCAyNy4yMTlWMTEuNzhjMC0uOTgzLjc3Ny0xLjc4MSAxLjczNC0xLjc4MWgzMy4wMjljLjQ2IDAgLjkuMTg4IDEuMjI2LjUyMmwuNTAzLjUxNmMuMjQ1LjI1Mi40NS43MTYuNDk4IDEuMWwuMDEuMTZ6Ii8+Cjwvc3ZnPgo=
Saving, sharing, and forking system
Icon for data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NSIgaGVpZ2h0PSI2NyIgdmlld0JveD0iMCAwIDc1IDY3Ij4KICAgIDxwYXRoIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSIjNDlCRkZGIiBzdHJva2Utd2lkdGg9Ii44IiBkPSJNNjkuNDM4IDIwQzcxLjk1NyAyMCA3NCAxNy44NzMgNzQgMTUuMjV2LTkuNUM3NCAzLjEyNyA3MS45NTcgMSA2OS40MzcgMUg1LjU2M0MzLjA0MiAxIDEgMy4xMjcgMSA1Ljc1djkuNUMxIDE3Ljg3MyAzLjA0MyAyMCA1LjU2MyAyMGg2My44NzR6TTYyLjUgN2EzLjUgMy41IDAgMSAxIDAgNyAzLjUgMy41IDAgMCAxIDAtN3ptLTkgMGEzLjUgMy41IDAgMSAxIDAgNyAzLjUgMy41IDAgMCAxIDAtN3ptMTUuOTM4IDM2QzcxLjk1NyA0MyA3NCA0MC44NzMgNzQgMzguMjV2LTkuNWMwLTIuNjIzLTIuMDQzLTQuNzUtNC41NjMtNC43NUg1LjU2M0MzLjA0MiAyNCAxIDI2LjEyNyAxIDI4Ljc1djkuNUMxIDQwLjg3MyAzLjA0MyA0MyA1LjU2MyA0M2g2My44NzR6TTYyLjUgMzBhMy41IDMuNSAwIDEgMSAwIDcgMy41IDMuNSAwIDAgMSAwLTd6bS05IDBhMy41IDMuNSAwIDEgMSAwIDcgMy41IDMuNSAwIDAgMSAwLTd6bTE1LjkzOCAzNkM3MS45NTcgNjYgNzQgNjMuODczIDc0IDYxLjI1di05LjVjMC0yLjYyMy0yLjA0My00Ljc1LTQuNTYzLTQuNzVINS41NjNDMy4wNDIgNDcgMSA0OS4xMjcgMSA1MS43NXY5LjVDMSA2My44NzMgMy4wNDMgNjYgNS41NjMgNjZoNjMuODc0ek02Mi41IDUzYTMuNSAzLjUgMCAxIDEgMCA3IDMuNSAzLjUgMCAwIDEgMC03em0tOSAwYTMuNSAzLjUgMCAxIDEgMCA3IDMuNSAzLjUgMCAwIDEgMC03eiIvPgo8L3N2Zz4K
Works with fairly large datasets

Screenshots

Context

Alfie was originally designed for the Advent of Code, an algorithmic code challenge that occurs every year during December. Algorithmic problems are suitable for Alfie as the problems often involve simple data types such as numbers and strings.

Limits

Professional developers are often skeptical about online IDEs and one key concern is integration with their workflow. If the Alfie editor did not come with many of the features developers are so used to, it would be a hard sell. This meant that we spent a lot of time building out editor features rather than improving the runtime visualisation.

Alfie was good with number and strings, but it can be difficult to visualise complex objects. One goal of Alfie was to keep the runtime data as closley connected the source code as possible. We did this by showing the runtime values immedatley to the right of the line of code they came from. This means that each piece of data visualized can only take up a single line. More complex data structures would not fit elegantly.

Algorithmic problems often involve very large datasets. In the case of Advent of Code, users were provided a few small datasets for testing and debugging of the solution. A second large dataset was used to find the actual solution. Alfie shined when debugging the solution with the small dataset. However, the large dataset would take drastically longer than just running the code in Node. We wanted users to be able to use Alfie to debug and develop their solution as well as find the final answer to the problem. After some trial and error we believe we struck a good balance between usefulness, usability, and speed by optimising the transpiler to only trace what we deemed to be useful. For example, we wouldn't trace the 1,000,000th iteration of a loop.

Potential

Visualising how data is flowing through your the internals of your application is extermly useful. Alfie currently works well for what it was designed for (algorithmic problems), but we feel like the core concepts could be incorporated into a tool for building fully featured web applications. Advanced debugging tools and runtime analysis are perfect for advanced developer and low code tools. Here are a few ideas where an Alfie-like visualisation could be useful:

  • Visualise where each piece of data visible in your React application originates from.
  • Track origins and values of global actions as they happen.
  • Quickly see how user actions modify the global state.