After nearly a full year of work, I’m happy to announce the first release of my newest app, Quadrants. 🥳 It is a local-first code playground designed around quickly trying out web design ideas, whether you’re at your desk or on the go.
Similar to other tools of this kind, you get different editors for HTML, CSS, and JavaScript code which can then be executed to render a live view directly in the editor. Unlike other similar tools, however, Quadrants are private by default and can optionally be shared by exporting and embedding the code or hosting decentralised live sessions.
In this post, I’d like to introduce you to some of the core features and provide a bit of insight into why I built them.
Why another code playground?
There’s no shortage of tools to quickly test out web design ideas. Between CodePen, JsFiddle, StackBlitz, and your IDE of choice, there should be something for everyone, right? Well, if I didn’t disagree with this, we wouldn’t be here—unless I only put all this work into this project because I read somewhere that any dev worth their salt has to build their own code playground eventually. 😉
The truth is the same as it is every time I build an app, I just didn’t like my options. Quadrants is built to work how I like it: for private experiments first and to share code snippets second, with features helping me teach web development and giving my students some opinionated guidelines. It uses the keyboard shortcuts I am used to from my editor of choice and a design I find pleasing.
It probably isn’t for everyone, but that’s why other options exist—and I’d still appreciate it if you gave it a try to see if it’s for you.
A Flexible UI
When first opened, the app immediately creates an empty Quadrant so you can get started experimenting with as little friction as possible. By default, the UI is split into four equally sized quadrants (wink, wink) containing the code editors and a viewport for the result.
This view is the one I personally prefer to work in, because it gives me a clear overview of everything I’m interested in at one glance. But I also wanted this to be flexible so I could quickly rearrange it and hide certain cells while teaching.
So each cell can be resized freely and rearranged via drag and drop in a way that hopefully is intuitive and reminiscent of how most modern code editors can be split into different layouts. Cells can be arranged next to or below each other and even be stacked on top of each other, creating a tabbed interface. And if you decide you don’t need JavaScript in your Quadrant, you can disable the cell entirely, freeing up room for the others.
The layout you build for a Quadrant is stored alongside it, so it will always be restored when the Quadrant is opened. I’ve also provided a selection of layout presets for different use-cases such as scripting and I am hoping to add the ability to store custom layout presets in a future update.
Editors that Make Learning Easy
One of the things that I feel had the greatest impact on my personal learning journey as a developer was the discovery of linters and code styles. Especially with HTML and CSS, which are very forgiving by nature, and JavaScript, where there are so many quirks, oddities, and ways to reach a goal. Being able to see warnings and errors before running my code, along with pointers to where to learn more about them, were a blessing.
Since I am going to use Quadrants as a tool for teaching web development to beginners in October, it was important to me that I could provide my students with a similar experience. All three editors have eslint built-in, along with a set of rules modelled after the Airbnb style guide, which is what I personally prefer. Linting issues can even be fixed automatically with the click of a button. 👍
And if you don’t enjoy the rules or find the squiggly lines distracting, you can of course disable linting on a per-Quadrant basis.
Another useful feature of code editors when learning a new language are snippets and completions. Especially when first learning about CSS and its myriad of properties, having a feature to just browse through all available ones and find the one you’re looking for with fuzzy search works wonders for discovery. Quadrants has that as well—it might not be as comprehensive as proper IntelliSense in an IDE, but it should be enough to get started.
A Killer Console
When working with JavaScript, errors, or weird behaviours are unavoidable. So to make debugging easy without having to leave the Quadrants UI, there is a built-in console. It intercepts (nearly) all errors and calls to the console object made in your JavaScript and displays them in a neatly browsable fashion, similarly to the console in the Chrome DevTools.
Arrays, errors, and complex objects can be collapsed, there is some syntax highlighting to make things more parsable at a glance, and you can even enter expressions that will be executed in the context of your Quadrant.
The native DevTools of your browser are extremely powerful—and they aren’t going anywhere—but they can be overwhelming and hard to get to, especially in mobile browsers. So for beginners, or the small-scope code experiments Quadrants is built for, the in-page console should be more than enough.
Local First Features
When trying out some code in your local code editor, you don’t need an account to save your experiments, so why should you when using an editor which runs in your browser? Like most of my apps, Quadrants is build local-first. Once you’ve used the app once, you can access it even without an internet connection (as long as you don’t clear your browser data).
All your Quadrants are stored on your own device, so only you can access them, just as if you had saved them as local files in your regular code editor. This is great for your privacy and that there’s no need to charge extra for private code snippets.
Unfortunately, there currently is an issue with rendering Quadrant results while offline, but that is an issue I’m hoping can be resolved in the future. In the meantime, if you have rendered a Quadrant before the internet connection dropped, you’ll still be able to see it update until you refresh your browser or change the layout.
Sharing is Caring
As nice as having everything run locally is, there will always be times when you would want to share a code snippet with others—and you can do so with Quadrants as well!
By accessing the share menu in the top right, you can export your Quadrant as HTML or JSON, which you can then host or send to others so they can import it into Quadrants. The HTML export also features an optional web component, which, if added, will add an “Open in Quadrants” button to the exported web page. Clicking that button will open and import the code directly into Quadrants.
Then there are Live Sessions.
Since I want to use Quadrants to help me teach and reading code projected to a wall in a large auditorium isn’t always the easiest, Quadrants supports a “Live Session” feature. With this, the entire editor is transferred to connected devices via a direct peer-to-peer connection.
During a Live Session, students will see a read-only representation of what I am working in, receiving updates in nearly real-time. This will hopefully make it easier for them to follow along and focus on what is happening. Once the session ends, all participants will also receive the option to store a local copy of the shared Quadrant on their devices, so they can work with the code in their own time.
A nice side effect of this feature is that it makes it possible to quickly open a Quadrant result on a different device, a live-preview so to speak. This makes it trivial to test responsive code on a smartphone by scanning the session QR code. To make this even more useful, the Live Sessions feature includes an option to share just the result, so it will be all that is visible.
Templates, Tags, and More
While the editors, running everything locally and the sharing functionalities definitely are the headlining features of Quadrants, there are so many little things that will hopefully make working with it truly delightful.
For example, Quadrants can easily be sorted into different categories using the tagging feature, which makes finding related Quadrants as easy as clicking on a tag in the sidebar.
Along with auto-completion and Emmet support, the editors also support snippets for quickly entering code, so of course there is a way to add custom snippets for the different languages. And since I constantly have to wrap things in tags and other snippets in HTML, there’s a way to do just that—try selecting some text and hitting Ctrl/⌘+Shift+A.
Quadrants tries to automatically generate a fitting thumbnail for your code snippets, but you can easily upload your own. And while you’re at it, you can also completely customise the HTML document your Quadrant code gets loaded into by providing a custom template.
Speaking of templates, of course you can save a Quadrant as a template and apply its code to future Quadrants with a simple click. Perfect to have all your code examples looking and feeling the same without having to write a lot of boilerplate code every time you create a new one.
And if the on-device previews via the Live Sessions feature weren’t enough, you can also open a responsive full-screen preview complete with custom size presets directly within the app.
There’s even a button to quickly take a screenshot of a Quadrant at a given size, because sometimes I just quickly want to grab something I’m working on at very precise dimensions.
Building in Public
When I first set out to build Quadrants half a decade ago (what 😳), I naively thought I could get it done in a couple of weeks as a respite between other projects. It took a four-year hiatus, a complete restart from scratch, and nearly an entire year of working on it after work and on weekends instead. The new semester starts next week and I wanted to have something ready to use with my students—but Quadrants isn’t done.
I consider this first release a public beta version. All core features are implemented, but there are some minor (well, and maybe not so minor) features missing still. You will encounter bugs (I already found one on iOS, thanks Safari 26) and a couple rough edges. Especially, the Live Sessions feature could benefit from some more testing under different network conditions.
I hope I’ll have the time for some more updates soon—but I also have other projects demanding my attention.
Feedback Welcome
Nonetheless, I believe Quadrants is ready to be used productively. I’d be glad if you could give it a try, share it with your fellow friends and developers, and perhaps give me some feedback on Mastodon if you’d like. Thank you for your time and have fun creating things! 😊