Tiny Layout

Application Demo from the Demo Website
Function Demo from a Local Demo

Creating interactive and illustrative diagrams for the web is difficult, and often frustrating. Writing SVGs in XML is frustrating, especially when you need to integrate interactivity with other parts of your website. Tiny Layout is a language and instructive tool based on HTML's native Web Components, requiring zero external dependencies, and it is designed to make it easy to create interactive diagrams for teaching.

What it does

Tiny Layout is a tool designed to make it easy to create interactive diagrams for education, based on SVG. Using a custom domain-specific language, you can easily define shapes and functions to make it easy to create diagrams quickly.

How we built it

Tiny Layout is built with vanilla TypeScript and Peggy.js, a Parser Generator for JavaScript similar to the combination of Lex and yacc. Using a language that we defined, which supports many common language concepts like functions, loops, and variables alongside the domain-specific tools for creating interactive diagrams, Peggy.js allows us to define syntax-directed translation functions that transform a source file into an abstract syntax tree, which we compile directly into JavaScript source code.

Tiny Layout has a Web Component-based interface that allows directly embedding the language in custom <tiny-layout> blocks in your HTML file. Additionally, to support changing the source on-demand, you can pass Tiny Layout source code into its setCode(string) method, which will parse your source code and generate the diagrams and interactivity you desire.

<tiny-layout class="w-96 h-96">
    have flower = |x, y, color| {
        // petals
        paint ellipse [
            center: [x: x - 15, y: y - 10],
            radius: [x: 12, y: 8],
            fill: color,
            stroke: "none",
        ];
        // omitted for brevity
    };
    paint flower [x: 60,  y: 80,  color: "#e74c3c"];
</tiny-layout>

Challenges we ran into

It was very difficult for us to convert the abstract syntax tree into executable code. Initially, we tried to interpret the code, by jumping around in the abstract syntax tree, but it was difficult to keep track of the state of the program, as well as the variable scope accessible to each function. Furthermore, it was difficult to create a helpful abstract syntax tree because the parsed data from Peggy.js was inconsistent.

To solve this issue, we first simplified the grammar significantly, only keeping the items we needed. For example, we replaced arrays with the convention of using tables with incrementing integer keys starting from 0. Then, we compiled the code directly to JavaScript code which is stored in the Web Component's shadow DOM and executes in the browser. This lets us take advantage of JavaScript's built-in scopes and operator implementations, and it makes it easy to interact with SVG elements in the DOM.

Accomplishments that we're proud of

We're very proud of creating a full compiler in the web. While we each came into the hackathon with some level of knowledge about compilers and interpreters, neither of us had written a complete one before, and we wanted to try with a toy language that would solve an interesting problem. The visual and interactive interface is intuitive, and is a unique application of programming languages and compilers. Additionally, we are amazed that we were able to put together a compiler that works completely in client-side JavaScript code.

What we learned

In addition to the technical experience we got working on such a difficult project, as we worked on Tiny Layout, we learned to alternate our focus between the ideal piece of software and what is realistic to complete in just one hackathon. By focusing on both of these goals, we ultimately designed high-quality software that we are proud of within the time constraints of the event.

Furthermore, both of us got a lot of value from working on a compiler collaboratively, because it helped us understand how each piece fits together, and how many problems have multiple perspectives that they can be approached from, which each present their own solutions.

What's next for Tiny Layout

As we move forward, we want to reconsider the role of built-in functions in the language, and instead consider the possibility of an intuitive 1-to-1 mapping between structures in the language and SVG elements, which would allow us to reduce some duplicate logic, and support more flexible built-in elements. Another major focus of our project moving forward will be keeping it accessible to everyone by focusing on implementing best practices for accessibility on the web.